383
edits
(add-on design and potential firefox impl.) |
|||
Line 59: | Line 59: | ||
* '''Tie in to about:me'''. | * '''Tie in to about:me'''. | ||
* '''Contextual Navigation'''. I'm on X and always go to Y. The new page should make that easy. | * '''Contextual Navigation'''. I'm on X and always go to Y. The new page should make that easy. | ||
= Add-on Development = | |||
This is an overview of how the add-on was designed and various aspects like performance and security. | |||
== Design == | |||
About:Tab mainly consists of a new tab xhtml file that imports data modules (sites, feeds, clipboard) to dynamically generate html to display sites and actions. The modules provide cross-page persistant data and caches results for fast access. | |||
* overlay browser window | |||
** browser.js tweaks | |||
*** BrowserOpenTab open new tab page | |||
*** browser.js URLBarSetURI clear new tab location | |||
** register ambient rss listener | |||
** prefetch sites | |||
*** prefetch feeds for first 10 sites | |||
* new tab text.xhtml | |||
** dynamically build site list | |||
*** request a number of sites from the site module (async) | |||
*** each site item starts starts from a html template | |||
*** populate fields with site data (title, url) | |||
*** request feeds for site from feed module and add them (async) | |||
*** find search queries for search boxes | |||
*** dynamically adjust which sites are hidden based on vertical space | |||
** site list configuration | |||
*** jQuery sortable for reordering of listing | |||
*** inform site module which site was moved or removed | |||
*** (+) add site button with input field that asks sites module to find a site | |||
*** record an added site to the sites module | |||
*** feed +/- buttons to adjust num feeds and save to site module data | |||
** actions | |||
*** check if the most recent closed tab isn't a new tab then show it | |||
*** check if the clipboard has anything recent and suggest search | |||
*** detect if clipboard matches other patterns and suggest action | |||
** switcher/configuration | |||
*** allow switching to other view | |||
*** store which page to load in pref | |||
* site module | |||
** handle requests to get a certain number of sites | |||
*** callback with slice of cached results if cache is big enough | |||
*** async fetch top sites from db: url, title, favicon | |||
*** clean up results like trim subtitles, moz-anno, set default #feeds | |||
** handle move/remove/add by adjusting cache structure | |||
*** remember which pages are removed and don't refetch them into cache | |||
** support find with navhistory autocomplete | |||
* feed module | |||
** handle requests to get feeds for a page url | |||
*** callback with results if in cache | |||
*** async fetch feeds by looking up feed then requesting feed | |||
*** clean up feeds by trimming, replacing html-like entities | |||
** automatically refresh cache every 20 minutes | |||
* clipboard module | |||
** get clipboard data | |||
** pretend there's nothing if it's old (45 seconds) | |||
== Performance == | |||
* + caching of sites and feeds | |||
* + prefetching sites and feeds | |||
* + background feed fetching | |||
* + saving an image of the old sites and fading it out with real html | |||
* - dynamic finding of site search boxes | |||
== Security == | |||
The new tab page runs with chrome privileges so it can access module data and make calls back to them. There's a lot of web content that can get on the page such as site titles, feeds and things in the clipboard. The main thing is to add content as text instead of html to avoid executing remote scripts. Keeping content strings short/trimmed also makes remote difficult. | |||
* site titles | |||
** subtitles are dropped and total length trimmed | |||
* feed title | |||
** html tags like < are replaced with &lt; and trimmed | |||
* action detectors | |||
** registered detectors can do stuff, but right now it's only a local map command | |||
* privacy | |||
** fetching feeds gives away that the person visits the site.. | |||
** fetching is done in the background like how feeds | |||
** use moz-anno:favicon to prevent hitting the network | |||
== Strings == | |||
There are strings scattered throughout, but these can be consolidated in a single .properties file. There's some use of PluralForm to pluralize "feed items" when customizing #feeds. Detectors provide a string for a button, e.g., "Map" so the API probably needs to be adjusted to support localization. | |||
Some strings might need to adjusted to simplify localization such as actions concat: "(search) for ..., or (map) it" | |||
== Styling == | |||
All the styling is done with an in-page css style, but this should eventually be pushed out to support per-platform styles. (No more mac buttons on windows!) | |||
== Testing == | |||
So far things have been manually tested, but various interfaces exposed by the modules could easily be unit tested. Pushing more logic out of the new tab page would probably make it easier to test. Then basic testing of the new tab page could be automated to make sure it gets populated and allows interaction with sites/actions. | |||
= Potential Firefox Implementation = | |||
Instead of having a "smart" new tab xhtml file that builds itself, it could be a dumb, bare-bone page that just loads pre-generated html for sites/feeds and actions. The only other dynamic code run on opening a new tab would be to wire-up callbacks to handle configuration and opening pages plus adjusting how many sites are displayed based on available screen space. | |||
The majority of the page building logic can then be pushed to a module that updates the site html every 20 minutes on feed update as well as updates actions html on close tab, clipboard copy or text select. This background updating will make the new tab page load much faster as it just needs to render html instead of building it. | |||
All these modules (html builder, sites, feeds, clipboard, actions) can be combined into a single new tab module. Each sub-module would cache its data and store it into a top-level cache javascript object. The add-on doesn't support cross-session data storage, but this could be easily done by JSON-ing the top-level cache and saving it into a pref. | |||
There's various one-time behaviors that should run at start-up, and this can be handled by loading the javascript module. This would load the JSON cache from the pref as well as install the feed listener and prefetch sites and feeds. | |||
With most of the logic pushed into the module, unit tests can be written to probe each of the sub-modules' interfaces. | |||
Browser changes are minimal and just need to make the new tab action open the new tab page. There's recent (trunk?) code that checks an array of uris to hide. Potentially we would want to register about:tab to open up the new tab page. | |||
= References = | = References = |
edits