Merge pull request #34 from keithclark/bug-33-firefox-48-error

Firefox 48 error

Author: keithclark

gruntfile.js

@@ -43,7 +43,7 @@ module.exports = function(grunt) {
             'src/firefox/chrome/tool.xul',
             'src/firefox/chrome/tool.js',
             'src/firefox/chrome/panel.js',
-            'src/firefox/chrome/resourceHelpers.jsm',
+            'src/firefox/chrome/resourceLoader.js',
             'src/firefox/locale/**',
             'src/firefox/skin/**',
             'src/firefox/*'

src/firefox/chrome/panel.js

@@ -1,33 +1,25 @@
 'use strict';
 
-const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
-
 this.EXPORTED_SYMBOLS = ['GADebuggerPanel'];
 
-Cu.import('resource://gre/modules/XPCOMUtils.jsm');
-
-XPCOMUtils.defineLazyModuleGetter(this, 'EventEmitter','resource://gre/modules/devtools/event-emitter.js');
-XPCOMUtils.defineLazyModuleGetter(this, 'promise', 'resource://gre/modules/commonjs/sdk/core/promise.js', 'Promise');
-
 function GADebuggerPanel(iframeWindow, toolbox) {
     this.panelWin = iframeWindow;
     this._toolbox = toolbox;
-    EventEmitter.decorate(this);
 };
 
 GADebuggerPanel.prototype = {
-    get target() this._toolbox.target,
+    get target() {
+        return this._toolbox.target;
+    },
     open: function() {
         return this.panelWin.startup(this._toolbox, this.target).then(() => {
             this.isReady = true;
-            this.emit('ready');
             return this;
         });
     },
     destroy: function() {
         return this.panelWin.shutdown().then(() => {
             this.isReady = false;
-            this.emit('destroyed');
         });
     }
 };

src/firefox/chrome/resourceHelpers.jsm

@@ -0,0 +1,97 @@
+// GA Debugger uses a few of devtools internal assets for various UI elements
+// such as the split view and beacon inspector (a VariableView). Unfortunately,
+// the Devtools framework is in a state of flux, with asset paths and import
+// methods changing regularly with each release of Firefox.
+//
+// This helper module provides methods for loading script dependencies in either
+// commonJS or the older JSM format. Method calls accept the latest paths,
+// resolving them to the correct location for the current browser version. The 
+// correct commonJS or JSM module is then loaded and returned to the caller.
+//
+// It also provides methods for loading stylesheets (again, with differing paths)
+// into an XUL document.
+//
+// ** This is a temporary fix and will remain here unitl the old versions are
+// phased out, at which point the min version for this extension will be changed
+// to 44 **
+
+'use strict';
+
+const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+const appInfo = Cc['@mozilla.org/xre/app-info;1'].getService(Ci.nsIXULAppInfo);
+const appMajorVer = parseInt(appInfo.version);
+
+let ResourceLoader = {},
+    require;
+
+if (appMajorVer >= 48) {
+    require = Cu.import("resource://devtools/shared/Loader.jsm", {}).require;
+}
+
+ResourceLoader.require = function (url) {
+
+    if (url === 'devtools/client/shared/l10n') {
+        // Prior to v48, the localization helpers were in ViewHelpers.jsm
+        if (appMajorVer < 48) {
+            return {
+                LocalizationHelper: ResourceLoader.require('devtools/client/shared/widgets/view-helpers').ViewHelpers.L10N
+            }
+        }
+    } else if (url === 'devtools/client/shared/widgets/view-helpers') {
+        if (appMajorVer < 44) {
+            // Prior to v44, ViewHelpers was in a different directory. (see: https://bugzil.la/912121)
+            url = 'resource:///modules/devtools/ViewHelpers.jsm';
+        } else if (appMajorVer < 49) {
+            // Prior to v49, ViewHelpers was JSM. from 49 it's a commonJS module
+            url = 'resource://devtools/client/shared/widgets/ViewHelpers.jsm';
+        }
+    } else if (url === 'devtools/shared/event-emitter') {
+        // Proior to v48, event-emitter must be loaded as JSM
+        if (appMajorVer < 44) {
+            return Cu.import('resource://gre/modules/devtools/event-emitter.js', {}).EventEmitter;
+        } else if (appMajorVer < 48) {
+            return Cu.import('resource://devtools/shared/event-emitter.js', {}).EventEmitter;
+        }
+    } else if (url === 'resource://devtools/client/shared/widgets/SideMenuWidget.jsm') {
+        // Proior to v44, SideMenuWidget.jsm existed elsewhere. (see: https://bugzil.la/912121)
+        if (appMajorVer < 44) {
+            url = 'resource:///modules/devtools/SideMenuWidget.jsm';
+        }
+    } else if (url === 'resource://devtools/client/shared/widgets/VariablesView.jsm') {
+        // Proior to v44, VariablesView.jsm existed elsewhere. (see: https://bugzil.la/912121)
+        if (appMajorVer < 44) {
+            url = 'resource:///modules/devtools/VariablesView.jsm';
+        }
+    } else if (url === 'promise') {
+        // Proior to v48, promise must be loaded as JSM
+        if (appMajorVer < 48) {
+            return Cu.import('resource://gre/modules/Promise.jsm', {}).Promise;
+        }
+    }
+
+    if (appMajorVer >= 48 && !url.endsWith('.jsm')) {
+        return require(url);
+    } else {
+        return Cu.import(url, {});
+    }
+}
+
+
+ResourceLoader.loadStyleSheet = function(url, doc) {
+    if (appMajorVer < 44) {
+        if (url === 'chrome://devtools/content/shared/widgets/widgets.css') {
+            url = 'chrome://browser/content/devtools/widgets.css';            
+        } else {
+            url = url.replace('chrome://devtools/skin/', 'chrome://browser/skin/devtools/')
+        }
+    }
+    var pi = doc.createProcessingInstruction('xml-stylesheet', 'href="' + url + '" type="text/css"');
+    doc.insertBefore(pi, doc.firstChild);
+}
+
+
+ResourceLoader.getAppMajorVersion = function () {
+    return appMajorVer;
+}
+
+this.EXPORTED_SYMBOLS = ['ResourceLoader'];

src/firefox/chrome/resourceLoader.js

@@ -15,20 +15,20 @@ const EVENTS = {
 const RE_ALPHA_CHARS = /[^a-z]/gi;
 const RE_NUMBERIC_CHARS = /[^0-9.]/g;
 
-Cu.import('resource://gre/modules/XPCOMUtils.jsm');
-Cu.import('chrome://gadebugger/content/resourceHelpers.jsm')
+Cu.import('chrome://gadebugger/content/resourceLoader.js');
 
-ResourceHelpers.importModule('resource://devtools/client/shared/widgets/SideMenuWidget.jsm', this);
-ResourceHelpers.importModule('resource://devtools/client/shared/widgets/ViewHelpers.jsm', this);
-ResourceHelpers.importModule('resource://devtools/client/shared/widgets/VariablesView.jsm', this);
+const appVersion = ResourceLoader.getAppMajorVersion();
+const {Heritage, WidgetMethods, ViewHelpers} = ResourceLoader.require('devtools/client/shared/widgets/view-helpers');
+const {SideMenuWidget} = ResourceLoader.require('resource://devtools/client/shared/widgets/SideMenuWidget.jsm');
+const {VariablesView} = ResourceLoader.require('resource://devtools/client/shared/widgets/VariablesView.jsm');
+const {LocalizationHelper} = ResourceLoader.require('devtools/client/shared/l10n');
+const EventEmitter = ResourceLoader.require('devtools/shared/event-emitter');
+const promise = ResourceLoader.require('promise');
 
-ResourceHelpers.insertStyleSheet('chrome://devtools/skin/common.css', document);
-ResourceHelpers.insertStyleSheet('chrome://devtools/skin/splitview.css', document);
-ResourceHelpers.insertStyleSheet('chrome://devtools/skin/widgets.css', document);
-ResourceHelpers.insertStyleSheet('chrome://devtools/content/shared/widgets/widgets.css', document);
-
-XPCOMUtils.defineLazyModuleGetter(this, 'EventEmitter', 'resource://gre/modules/devtools/event-emitter.js');
-XPCOMUtils.defineLazyModuleGetter(this, 'promise', 'resource://gre/modules/commonjs/sdk/core/promise.js', 'Promise');
+ResourceLoader.loadStyleSheet('chrome://devtools/skin/common.css', document);
+ResourceLoader.loadStyleSheet('chrome://devtools/skin/splitview.css', document);
+ResourceLoader.loadStyleSheet('chrome://devtools/skin/widgets.css', document);
+ResourceLoader.loadStyleSheet('chrome://devtools/content/shared/widgets/widgets.css', document);
 
 function startup(toolbox, target) {
     TrackerListView.initialize();
@@ -175,8 +175,15 @@ let ToolbarView = {
         this._clearButton = $('#clear-button');
         this._preserveLogCheckbox = $('#preserve-log');
 
-        this._captureToggleButton.setAttribute('label', L10N.getStr('startLabel'));
-        this._clearButton.setAttribute('label', L10N.getStr('clearLabel'));
+        // Prior to v48, use buttons text labels instead of icons. Altough pre-48
+        // supported icons, the icon colouring requirements were different
+        if (appVersion < 50) {
+            this._captureToggleButton.classList.remove('record-button');
+            this._clearButton.classList.remove('devtools-clear-icon');
+            this._clearButton.setAttribute('label', L10N.getStr('clearLabel'));
+       }
+
+        this._clearButton.setAttribute('tooltiptext', L10N.getStr('clearTooltip'));
         this._preserveLogCheckbox.setAttribute('label', L10N.getStr('preserveLogLabel'));
 
         this._onCaptureTogglePressed = this._onCaptureTogglePressed.bind(this);
@@ -215,12 +222,18 @@ let ToolbarView = {
         BeaconPropertiesView.hide();
     },
     _onBeaconMonitorStart: function() {
-        let label = L10N.getStr('stopLabel');
-        this._captureToggleButton.setAttribute('label', label);
+        if (appVersion < 50) {
+            this._captureToggleButton.setAttribute('label', L10N.getStr('stopLabel'));
+        }
+        this._captureToggleButton.setAttribute('tooltiptext', L10N.getStr('stopTooltip'));
+        this._captureToggleButton.setAttribute('checked', 'true');
     },
     _onBeaconMonitorStop: function() {
-        let label = L10N.getStr('startLabel');
-        this._captureToggleButton.setAttribute('label', label);
+        if (appVersion < 50) {
+            this._captureToggleButton.setAttribute('label', L10N.getStr('startLabel'));
+        }
+        this._captureToggleButton.setAttribute('tooltiptext', L10N.getStr('startTooltip'));
+        this._captureToggleButton.removeAttribute('checked');
     }
 };
 
@@ -562,7 +575,7 @@ let BeaconPropertiesView = {
 /**
  * Localization convenience methods.
  */
-let L10N = new ViewHelpers.L10N(STRINGS_URI);
+let L10N = new LocalizationHelper(STRINGS_URI);
 
 /**
  * Convenient way of emitting events from the panel window.
@@ -572,4 +585,6 @@ EventEmitter.decorate(this);
 /**
  * DOM query helper.
  */
-function $(selector, target = document) target.querySelector(selector)
+function $(selector, target = document) {
+    return target.querySelector(selector);
+}

src/firefox/chrome/tool.js

@@ -12,8 +12,8 @@
     <box>
       <toolbar class="devtools-toolbar" flex="1">
         <hbox class="devtools-toolbarbutton-group">
-          <toolbarbutton id="capture-button" class="devtools-toolbarbutton" />
-          <toolbarbutton id="clear-button" class="devtools-toolbarbutton" />
+          <toolbarbutton id="clear-button" class="devtools-toolbarbutton devtools-clear-icon" />
+          <toolbarbutton id="capture-button" class="devtools-toolbarbutton record-button" />
         </hbox>
         <checkbox id="preserve-log" checked="true" />
       </toolbar>

src/firefox/chrome/tool.xul

@@ -3,8 +3,11 @@ devtoolsTooltip=Google Analytics Debugger
 
 # Button labels
 startLabel=Start
+startTooltip=Start recording
 stopLabel=Stop
+stopTooltip=Stop recording
 clearLabel=Clear
+clearTooltip=Clear the beacon log
 preserveLogLabel=Preserve log
 
 # Tracker

src/firefox/locale/en-US/strings.properties

@@ -72,3 +72,20 @@
     background-position: 45px 50%;
     padding-left: 60px;
 }
+
+.record-button {
+  list-style-image: url(icon-record.svg);
+}
+
+#trackers-list {
+    min-width: 150px;
+}
+#tracker-beacons {
+    min-width: 300px;
+}
+#beacon-properties {
+    min-width: 300px;
+}
+#preserve-log {
+    margin-left: .75em;
+}