jaredhirsch

I need to click a link to trigger an install of 1.0.12, to verify that it will upgrade to 1.0.13 and self-uninstall:

https://s3-us-west-2.amazonaws.com/universal-search/universal-search-1.0.12.xpi

jaredhirsch

// You may sometimes be doing something in non-UI add-on code,
// but want access to nice DOM APIs, like navigator.sendBeacon().
// Use the hidden window, which is accessible via the AppShell service:

// If you're in an SDK addon, do this to get a Cu reference:
// const { Cu } = require('chrome');
Cu.import('resource://gre/modules/Services.jsm');

// this is your window:
const win = Services.appShell.hiddenDOMWindow;

jaredhirsch

Step 1: Visualizing single commits

Use the github API to get a JSON commit object (or use any git repo with an adapter (not included) that matches the parts of the github commit API schema that are used below)

Then, given a JSON blob representing an object,

• template the code diff (response.files.patch) into a right pane with syntax highlighting
• template the commit message (response.commit.message) through a markdown processor (like https://github.com/chjj/marked) and into a left pane with nice vertical rhythm.

Step 2: Visualizing multiple commits

jaredhirsch

1. use the github API or use any git repo with an adapter (not included) that matches the parts of the github commit API schema that we use, currently an object of the form

response = {
  files: {
    patch: 'git diff as patch inserted here'
  },
  commit: {
    message: 'git commit message as string here'
  }
}

jaredhirsch

diff --git a/addon/index.js b/addon/index.js
index 41b5b06..4350531 100644
--- a/addon/index.js
+++ b/addon/index.js
@@ -16,6 +16,7 @@ const { PrefsTarget } = require('sdk/preferences/event-target');
 const URL = require('sdk/url').URL;
 const Metrics = require('./lib/metrics');
 const survey = require('./lib/survey');
+exports.survey = survey;
 const WebExtensionChannels = require('./lib/webextension-channels');

jaredhirsch

'model.enabled': [{
  type: 'booleanClass',
  hook: 'show-detail',
  name: 'enabled'
}, {
  type: 'toggle',
  hook: 'enabled-tab'
}];

jaredhirsch

Here's the big idea: let's use CSS variables to make theming Firefox as easy as using a color picker!

How can we do it?

Firefox uses a set of built-in special shortcut colors, like HighlightText or ButtonText. These are customized for each major OS (linux, windows, mac). (If you're curious, you can see a complete list of colors on MDN here.)

Firefox has also entered into the era of CSS variables, and you can dynamically

jaredhirsch

// if you want to pin the popup open, from the browser toolbox:
gURLBar.popup.addEventListener('popuphiding', (e) => { e.preventDefault(); })

// to unpin it, close the window.
// if you need to get fancier, set a global bit of state and check it before
// preventing default, or, use a named function and call removeEventListener()
// when you're done.

jaredhirsch

Don't use annotations for images

Supporting hi dpi icons requires new storage anyway.

Favicons are cached for 7 days.

Use a DB but a separate one. Then use attach database to do queries across databases.

SQLite has solid full text indexing capabilities.

jaredhirsch

// skipping the imports of Cu and AddonManager here:

// get an addon pointer
var addon;
AddonManager.getAddonByID('@idea-town-addon', function(x) { addon = x; });
// get the local machine's file path of the addon
var addonURI = addon.getResourceURI().asciiSpec;
// ugh, wrap the `file:///` URI in a `jar:///` URI,
// to get access to the metrics.jsm file inside the zipped idea town xpi.
// figured this out after a long search in dxr: