Tiles/Technical Documentation: Difference between revisions

Jump to navigation Jump to search

Tiles/Technical Documentation (view source)

Revision as of 17:58, 3 April 2015

269 bytes added ,  3 April 2015
→‎Tiles Technical Documentation: high level, suggested object
(→‎Source Code: add directory links provider link)
(→‎Tiles Technical Documentation: high level, suggested object)
Line 7: Line 7:
This is technical information for advanced users or enterprise implementers on how Tiles are stored locally and fetched remotely and how you can change it.
This is technical information for advanced users or enterprise implementers on how Tiles are stored locally and fetched remotely and how you can change it.


=== Previously ===
=== High Level ===


Default Tiles were originally built into Desktop Firefox for en-US builds in the ''chrome://global/content/directoryLinks.json'' location.  This file no longer exists in Firefox as Tiles are now downloaded from a web service.  Additionally the preference ( ''browser.newtabpage.directorySource'' ) for Tiles has changed, the current details are listed below.
To potentially show any of Default, Suggested, or Enhanced Tiles, Firefox fetches/downloads -- at most once a day -- a JSON file containing lists of tiles with data to determine if a tile should be shown and what to be shown. Firefox caches that file and decides 1) if there aren't enough history tiles being shown to fill in with Default Tiles 2) if the user's top sites match any of the triggering criteria for Suggested Tiles 3) if a visible history tile should be replaced by an Enhanced Tile. Firefox also sends cookieless pings to measure in aggregate which Tiles are useful or not.


=== Preferences ===
=== Preferences ===
Line 40: Line 40:


   data:application/json,{
   data:application/json,{
   "en-US": [
   "directory": [
     {
     {
       "url" : "http://www.mozilla.org/",
       "url" : "http://www.mozilla.org/",
Line 53: Line 53:
=== JSON Format ===
=== JSON Format ===


The Tile JSON format is a simple object, the top level needs to be a locale that Firefox understands.  This object allows you to offer multiple locales in a single JSON file.
The Tile JSON format is a simple object, the top level keys group together the different types of Tiles.


At a high level the data object looks like this:
At a high level the data object looks like this:


   { "LOCALE" : [ ARRAY OF DEFAULT TILE OBJECTS ] }
   { "directory" : [ ARRAY OF DEFAULT TILE OBJECTS ], "suggested" : [ ARRAY OF SUGGESTED TILE OBJECTS ], "enhanced" : [ ARRAY OF ENHANCED TILE OBJECTS ]}
 
You can have many locales in the Tiles dictionary object to support multiple languages.
 
For example:
 
  { "en-US" : [ ARRAY OF US DEFAULT TILES ], "en-CA" : [ ARRAY OF CA DEFAULT TILES ] }


Each Default Tile object requires a few attributes, most of which are self explanatory.
Each Default Tile object requires a few attributes, most of which are self explanatory.
Line 69: Line 63:
     {
     {
       "url" : "http://www.mozilla.org/",
       "url" : "http://www.mozilla.org/",
       "bgColor" : "%234d4e54",
       "bgColor" : "#4d4e54",
       "type": "custom",
       "type": "custom",
       "imageURI": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAABWCAQAAADMSHQwAAAFWklEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAABgdu0sNqoyDOP4C1WWgCylKgqKoNRCqaxCiyx2bBGNAVrCJkRkUYFAMEGNVUjYRIIIuAYlBqKAUSBcWEUIBlDCBRU6pKINCAUU0CibbSyL9e%2FNmTdvpudMF2ZGj5nfc%2FcwyZCH6Xd6DlMXTGUbe1jEjYhJMgEK2M5WGiDYZDCJ1QTJRWId4f%2BTDwkpoanT5bKXcgDgEqJpyFrKCJmWGLr2ycNa4rQzQf1OY0RzFdTziaFrn41Yh%2FQTjSqnBaLZA2puYujaZy3Wt06bBepPkhFNIaj5iaFrn4FY0522F3boNohmE6gFiaHrkvmEbNQuw3PoDYlPdP0zmOWsYoRpunkOvT4xdDTj%2F6FpS3vESTo5ZNMBwaYBGeQQIBWJmNsZRB7DybJD1DvN6EE%2BraM0dGdyGct4HiMj3kM3pzdz%2BIzLnEIQ5lJKyC6ynVfdxFJOEPKd52%2Bqk9jNNUIq2MYYBJtxlNSQxc4%2F64t8ykEuAJB63UNns5ojWMdZRqv4DV0IahL7CTcN4UHOEO5rkhBsulOEm13Yn40CalKIICRhdbiOoZOYQRHufqFvvIZeTkgV7t7F3TLEpD%2FeLtIRcTKLmqxz5vk5KkM%2FQxmRXCU5PkPnUF%2BXzGf6VqqI5FeaOK98mer%2BxiqM6tDvUJMV8Rm6J%2BH28T5bwKXfQDHWPYiTHVgvkEZXXsLarJejMdiMJkAp1uyoDi2UgSpiDSvYjPV9fIZOw%2FqS3k6%2FAmunnmU%2Fgsp0uj5YeYiT8Vg9ENf0ohLUbiTKQ%2Fd1Xr2ENO2mgDpHo3gM3RnUAdMPAPWx6T8CNdDlAVAQMTkC9ux1STusq7SK%2BtDCVnbQLqyrJKSClvEYOhXUF6bPBDXd9B9UGzqJS56XyJWgziIuOYyVh8RgaLecJKQ8%2FkPvMn0WqHkeT9UGuJzyTyMm07A6IWFZhbUFifHQN9OF%2B%2BlPFmcJuUCzf3Po%2Fh5Dr6s29ONYwxCTfKyHEGyGYl0gKYZDj2U9pVRS3W808cfQz2IFIkyZj5i0oBJrEBKjoUdxFG9nuMEfQxdEmGsI1mjEZC%2FW60iMhp5HZKdo4I%2Bh50Q4Hh7Bsg88n8MqRWI0dIBwFfzECXOTdBzxx9ATI5zRo7AGYx%2FgWx1jNvRhrJX0ozUNSeEKIUf9MvQDWFMQk5lYd2h%2FGmsWEqOhO2EtNteHKkIO%2B2XoplwGtQgxeRvUSW0%2FwdqH1GvoSlI8hl6g7QisttrfBeqQX4YWPgf1FWJyDNR7TvckVhUpdRg6HdQ1bvG4Y12o7QSslq73oyX%2BGXoIVlePL8F0QxDuxKrkPqQOQ9%2BLlezx93rV4xqRqX17UBf9M7QQBHWeCbSmBeO4Uu3pXXNKsUrIYlhYRpLkOXQbz7vQt0Ad1LYb1iHnVO%2FFfqxh%2Fhk6FbAq%2BAPrvPPtueGA9RfVnaah59DCMaydPOz0U7FKWOt62T3PJnYQ7hyZfhlayMfbZdJqfpWagUQYugALtjl9S8I47zmO2gjGfuh0FD%2BYPtvjrq0QRQ5iEqAMN0G6mCcONWvlDG3dbb43egBcT%2BqJWPCafd4Y8b%2Foyuka%2B6E7UOwkyBrTdze9PQsXEtQ%2F6YnY0IjZFNmDgW94CjEZTHHEBHlTB91u%2BtsQM%2FUbVJj36Gt%2BqoIo1ms%2Fi9NYUEw%2FhNkAQIY%2Fv0DTiVzGMJps2iExSgqPMpknCJBCEmLSh%2FFMZgTpNDJtY%2FJZyga2spFXGKr9SIoYhfwXh%2F6nHToQAQAAAADkb73IbXCjR49u9OhGjx7d6NGNHj260aMbPXp0o0c3evToRo8OZGoOg%2BFHUXQAAAAASUVORK5CYII%3D",
       "imageURI": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAABWCAQAAADMSHQwAAAFWklEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAABgdu0sNqoyDOP4C1WWgCylKgqKoNRCqaxCiyx2bBGNAVrCJkRkUYFAMEGNVUjYRIIIuAYlBqKAUSBcWEUIBlDCBRU6pKINCAUU0CibbSyL9e%2FNmTdvpudMF2ZGj5nfc%2FcwyZCH6Xd6DlMXTGUbe1jEjYhJMgEK2M5WGiDYZDCJ1QTJRWId4f%2BTDwkpoanT5bKXcgDgEqJpyFrKCJmWGLr2ycNa4rQzQf1OY0RzFdTziaFrn41Yh%2FQTjSqnBaLZA2puYujaZy3Wt06bBepPkhFNIaj5iaFrn4FY0522F3boNohmE6gFiaHrkvmEbNQuw3PoDYlPdP0zmOWsYoRpunkOvT4xdDTj%2F6FpS3vESTo5ZNMBwaYBGeQQIBWJmNsZRB7DybJD1DvN6EE%2BraM0dGdyGct4HiMj3kM3pzdz%2BIzLnEIQ5lJKyC6ynVfdxFJOEPKd52%2Bqk9jNNUIq2MYYBJtxlNSQxc4%2F64t8ykEuAJB63UNns5ojWMdZRqv4DV0IahL7CTcN4UHOEO5rkhBsulOEm13Yn40CalKIICRhdbiOoZOYQRHufqFvvIZeTkgV7t7F3TLEpD%2FeLtIRcTKLmqxz5vk5KkM%2FQxmRXCU5PkPnUF%2BXzGf6VqqI5FeaOK98mer%2BxiqM6tDvUJMV8Rm6J%2BH28T5bwKXfQDHWPYiTHVgvkEZXXsLarJejMdiMJkAp1uyoDi2UgSpiDSvYjPV9fIZOw%2FqS3k6%2FAmunnmU%2Fgsp0uj5YeYiT8Vg9ENf0ohLUbiTKQ%2Fd1Xr2ENO2mgDpHo3gM3RnUAdMPAPWx6T8CNdDlAVAQMTkC9ux1STusq7SK%2BtDCVnbQLqyrJKSClvEYOhXUF6bPBDXd9B9UGzqJS56XyJWgziIuOYyVh8RgaLecJKQ8%2FkPvMn0WqHkeT9UGuJzyTyMm07A6IWFZhbUFifHQN9OF%2B%2BlPFmcJuUCzf3Po%2Fh5Dr6s29ONYwxCTfKyHEGyGYl0gKYZDj2U9pVRS3W808cfQz2IFIkyZj5i0oBJrEBKjoUdxFG9nuMEfQxdEmGsI1mjEZC%2FW60iMhp5HZKdo4I%2Bh50Q4Hh7Bsg88n8MqRWI0dIBwFfzECXOTdBzxx9ATI5zRo7AGYx%2FgWx1jNvRhrJX0ozUNSeEKIUf9MvQDWFMQk5lYd2h%2FGmsWEqOhO2EtNteHKkIO%2B2XoplwGtQgxeRvUSW0%2FwdqH1GvoSlI8hl6g7QisttrfBeqQX4YWPgf1FWJyDNR7TvckVhUpdRg6HdQ1bvG4Y12o7QSslq73oyX%2BGXoIVlePL8F0QxDuxKrkPqQOQ9%2BLlezx93rV4xqRqX17UBf9M7QQBHWeCbSmBeO4Uu3pXXNKsUrIYlhYRpLkOXQbz7vQt0Ad1LYb1iHnVO%2FFfqxh%2Fhk6FbAq%2BAPrvPPtueGA9RfVnaah59DCMaydPOz0U7FKWOt62T3PJnYQ7hyZfhlayMfbZdJqfpWagUQYugALtjl9S8I47zmO2gjGfuh0FD%2BYPtvjrq0QRQ5iEqAMN0G6mCcONWvlDG3dbb43egBcT%2BqJWPCafd4Y8b%2Foyuka%2B6E7UOwkyBrTdze9PQsXEtQ%2F6YnY0IjZFNmDgW94CjEZTHHEBHlTB91u%2BtsQM%2FUbVJj36Gt%2BqoIo1ms%2Fi9NYUEw%2FhNkAQIY%2Fv0DTiVzGMJps2iExSgqPMpknCJBCEmLSh%2FFMZgTpNDJtY%2FJZyga2spFXGKr9SIoYhfwXh%2F6nHToQAQAAAADkb73IbXCjR49u9OhGjx7d6NGNHj260aMbPXp0o0c3evToRo8OZGoOg%2BFHUXQAAAAASUVORK5CYII%3D",
Line 77: Line 71:
'''NOTE''': You need to URL escape all the text, in the bgColor you'll see the # is replaced with %23 and the spaces are replaced with %20 in the title.
'''NOTE''': You need to URL escape all the text, in the bgColor you'll see the # is replaced with %23 and the spaces are replaced with %20 in the title.


''Default Tiles Object Attributes''
''Default and Enhanced Tiles Object Attributes''


* '''url''' is the URL you want the Tile to link to
* '''url''' is the URL you want the Tile to link to
Line 85: Line 79:
* '''title''' provides the display text that will appear below the Tile and for the link title attribute.
* '''title''' provides the display text that will appear below the Tile and for the link title attribute.
* '''enhancedImageURI''' provides the full URL to the roll over image you want centered.  Images need to be properly sized for the Tiles.  If included a "Roll Over" image will be the image seen until a user mouses over the Tile, on mouse over the imageURI is then shown.
* '''enhancedImageURI''' provides the full URL to the roll over image you want centered.  Images need to be properly sized for the Tiles.  If included a "Roll Over" image will be the image seen until a user mouses over the Tile, on mouse over the imageURI is then shown.
''Suggested Tiles Object Attributes''
* Same as the Default Tiles Object with the additions below
* '''frecent_sites''' array of domain strings to match against the user's top sites


==== Source Code ====
==== Source Code ====
Mardak
385

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1066338"

Navigation menu