merge the last green changeset on m-c to fx-team

browser/base/content/browser.js

@@ -3429,6 +3429,7 @@ const BrowserSearch = {
     openLinkIn(submission.uri.spec,
                useNewTab ? "tab" : "current",
                { postData: submission.postData,
+                 inBackground: false,
                  relatedToCurrent: true });
   },
 

browser/base/content/browser.xul

@@ -976,7 +976,6 @@
       <toolbarbutton id="inspector-inspect-toolbutton"
                      label="&inspectButton.label;"
                      accesskey="&inspectButton.accesskey;"
-                     class="toolbarbutton-text"
                      command="Inspector:Inspect"/>
       <toolbarseparator />
       <hbox id="inspector-tools">

browser/components/preferences/cookies.js

@@ -89,6 +89,8 @@ var gCookiesWindow = {
         this.filter();
     }
 
+    document.getElementById("removeAllCookies").disabled = this._view._rowCount == 0;
+
     this._saveState();
   },
 
@@ -117,6 +119,7 @@ var gCookiesWindow = {
       this._view._rowCount = 0;
       this._tree.treeBoxObject.rowCountChanged(0, -oldRowCount);
       this._view.selection.clearSelection();
+      document.getElementById("removeAllCookies").disabled = true;
     }
     else if (aData == "reload") {
       // first, clear any existing entries
@@ -207,7 +210,10 @@ var gCookiesWindow = {
     this._view._rowCount += rowCountImpact;
     this._tree.treeBoxObject.rowCountChanged(oldRowCount - 1, rowCountImpact);
 
-    document.getElementById("removeAllCookies").disabled = this._view._filtered;
+    if (this._view._rowCount > 0 && !this._view._filtered)
+      document.getElementById("removeAllCookies").disabled = false;
+    else
+      document.getElementById("removeAllCookies").disabled = true;
   },
 
   _view: {

browser/components/sessionstore/test/browser/browser_607016.js

@@ -89,9 +89,12 @@ function test() {
            state.windows[0].tabs[i].extData["uniq"],
            "sanity check that tab has correct extData");
       }
-      else
+      else {
         ok(!("extData" in curState.windows[0].tabs[i]),
            "sanity check that tab doesn't have extData");
+        //XXXzpao output the tab state to help debug bug 679590
+        info("tabState: " + JSON.stringify(curState.windows[0].tabs[i]));
+      }
     }
 
     // Now we'll set a new unique value on 1 of the tabs

browser/components/tabview/test/browser_tabview_bug591706.js

@@ -38,14 +38,15 @@ function onTabViewWindowLoaded() {
   let secondTabItem = secondTab._tabViewTabItem;
   ok(group.getChildren().some(function(child) child == secondTabItem),"The second tab was made in our new group");
   is(group.getChildren().length, 1, "Only one tab in the first group");
-  isnot(firstTab.linkedBrowser.contentWindow.location, secondTab.linkedBrowser.contentWindow.location, "The two tabs must have different locations");
+  isnot(firstTab.linkedBrowser.currentURI.spec, secondTab.linkedBrowser.currentURI.spec, "The two tabs must have different locations");
 
   // Add the first tab to the group *programmatically*, without specifying a dropPos
   group.add(firstTabItem);
   is(group.getChildren().length, 2, "Two tabs in the group");
-  is(group.getChildren()[0].tab.linkedBrowser.contentWindow.location, secondTab.linkedBrowser.contentWindow.location, "The second tab was there first");
+
-  is(group.getChildren()[1].tab.linkedBrowser.contentWindow.location, firstTab.linkedBrowser.contentWindow.location, "The first tab was just added and went to the end of the line");
+  is(group.getChildren()[0].tab.linkedBrowser.currentURI.spec, secondTab.linkedBrowser.currentURI.spec, "The second tab was there first");
-  
+  is(group.getChildren()[1].tab.linkedBrowser.currentURI.spec, firstTab.linkedBrowser.currentURI.spec, "The first tab was just added and went to the end of the line");
+
   group.addSubscriber("close", function onClose() {
     group.removeSubscriber("close", onClose);
 

browser/components/tabview/test/browser_tabview_bug626455.js

@@ -22,8 +22,7 @@ function test() {
     contentWindow = TabView.getContentWindow();
     activeGroup = contentWindow.GroupItems.getActiveGroupItem();
 
-    gBrowser.browsers[0].contentWindow.location =
+    gBrowser.browsers[0].loadURI("data:text/html,<p>test for bug 626455, tab1");
-      "data:text/html,<p>test for bug 626455, tab1";
     gBrowser.addTab(TEST_URL);
 
     afterAllTabsLoaded(testStayOnPage);
@@ -40,7 +39,7 @@ function testStayOnPage() {
         is(gBrowser.tabs.length, 1,
            "The total number of tab is 1 when staying on the page");
 
-        let location = gBrowser.browsers[0].contentWindow.location.toString();
+        let location = gBrowser.browsers[0].currentURI.spec;
         isnot(location.indexOf("onbeforeunload"), -1,
               "The open tab is the expected one");
 
@@ -80,7 +79,7 @@ function finishTest() {
   is(contentWindow.TabItems.getItems().length, 1,
      "The total number of tab items is 1 after leaving the page");
 
-  let location = gBrowser.browsers[0].contentWindow.location.toString();
+  let location = gBrowser.browsers[0].currentURI.spec;
   is(location, "about:blank", "The open tab is the expected one");
 
   isnot(contentWindow.GroupItems.getActiveGroupItem(), activeGroup,

browser/devtools/highlighter/inspector.jsm

@@ -345,72 +345,72 @@ Highlighter.prototype = {
    */
   highlight: function Highlighter_highlight(aScroll)
   {
-    // node is not set or node is not highlightable, bail
+    let rect = null;
-    if (!this.node || !this.isNodeHighlightable(this.node)) {
-      return;
-    }
 
-    if (aScroll) {
+    if (this.node && this.isNodeHighlightable(this.node)) {
-      this.node.scrollIntoView();
-    }
 
-    let clientRect = this.node.getBoundingClientRect();
+      if (aScroll) {
-
+        this.node.scrollIntoView();
-    // Go up in the tree of frames to determine the correct rectangle.
-    // clientRect is read-only, we need to be able to change properties.
-    let rect = {top: clientRect.top,
-                left: clientRect.left,
-                width: clientRect.width,
-                height: clientRect.height};
-
-    let frameWin = this.node.ownerDocument.defaultView;
-
-    // We iterate through all the parent windows.
-    while (true) {
-
-      // Does the selection overflow on the right of its window?
-      let diffx = frameWin.innerWidth - (rect.left + rect.width);
-      if (diffx < 0) {
-        rect.width += diffx;
       }
 
-      // Does the selection overflow on the bottom of its window?
+      let clientRect = this.node.getBoundingClientRect();
-      let diffy = frameWin.innerHeight - (rect.top + rect.height);
+
-      if (diffy < 0) {
+      // Go up in the tree of frames to determine the correct rectangle.
-        rect.height += diffy;
+      // clientRect is read-only, we need to be able to change properties.
+      rect = {top: clientRect.top,
+              left: clientRect.left,
+              width: clientRect.width,
+              height: clientRect.height};
+
+      let frameWin = this.node.ownerDocument.defaultView;
+
+      // We iterate through all the parent windows.
+      while (true) {
+
+        // Does the selection overflow on the right of its window?
+        let diffx = frameWin.innerWidth - (rect.left + rect.width);
+        if (diffx < 0) {
+          rect.width += diffx;
+        }
+
+        // Does the selection overflow on the bottom of its window?
+        let diffy = frameWin.innerHeight - (rect.top + rect.height);
+        if (diffy < 0) {
+          rect.height += diffy;
+        }
+
+        // Does the selection overflow on the left of its window?
+        if (rect.left < 0) {
+          rect.width += rect.left;
+          rect.left = 0;
+        }
+
+        // Does the selection overflow on the top of its window?
+        if (rect.top < 0) {
+          rect.height += rect.top;
+          rect.top = 0;
+        }
+
+        // Selection has been clipped to fit in its own window.
+
+        // Are we in the top-level window?
+        if (frameWin.parent === frameWin || !frameWin.frameElement) {
+          break;
+        }
+
+        // We are in an iframe.
+        // We take into account the parent iframe position and its
+        // offset (borders and padding).
+        let frameRect = frameWin.frameElement.getBoundingClientRect();
+
+        let [offsetTop, offsetLeft] =
+          this.IUI.getIframeContentOffset(frameWin.frameElement);
+
+        rect.top += frameRect.top + offsetTop;
+        rect.left += frameRect.left + offsetLeft;
+
+        frameWin = frameWin.parent;
       }
-
-      // Does the selection overflow on the left of its window?
-      if (rect.left < 0) {
-        rect.width += rect.left;
-        rect.left = 0;
-      }
-
-      // Does the selection overflow on the top of its window?
-      if (rect.top < 0) {
-        rect.height += rect.top;
-        rect.top = 0;
-      }
-
-      // Selection has been clipped to fit in its own window.
-
-      // Are we in the top-level window?
-      if (frameWin.parent === frameWin || !frameWin.frameElement) {
-        break;
-      }
-
-      // We are in an iframe.
-      // We take into account the parent iframe position and its
-      // offset (borders and padding).
-      let frameRect = frameWin.frameElement.getBoundingClientRect();
-
-      let [offsetTop, offsetLeft] =
-        this.IUI.getIframeContentOffset(frameWin.frameElement);
-
-      rect.top += frameRect.top + offsetTop;
-      rect.left += frameRect.left + offsetLeft;
-
-      frameWin = frameWin.parent;
     }
 
     this.highlightRectangle(rect);
@@ -448,6 +448,11 @@ Highlighter.prototype = {
    */
   highlightRectangle: function Highlighter_highlightRectangle(aRect)
   {
+    if (!aRect) {
+      this.unhighlight();
+      return;
+    }
+
     let oldRect = this._contentRect;
 
     if (oldRect && aRect.top == oldRect.top && aRect.left == oldRect.left &&
@@ -469,6 +474,9 @@ Highlighter.prototype = {
 
     if (aRectScaled.left >= 0 && aRectScaled.top >= 0 &&
         aRectScaled.width > 0 && aRectScaled.height > 0) {
+
+      this.veilTransparentBox.style.visibility = "visible";
+
       // The bottom div and the right div are flexibles (flex=1).
       // We don't need to resize them.
       this.veilTopBox.style.height = aRectScaled.top + "px";
@@ -495,6 +503,7 @@ Highlighter.prototype = {
     this._highlighting = false;
     this.veilMiddleBox.style.height = 0;
     this.veilTransparentBox.style.width = 0;
+    this.veilTransparentBox.style.visibility = "hidden";
     Services.obs.notifyObservers(null,
       INSPECTOR_NOTIFICATIONS.UNHIGHLIGHTING, null);
   },
@@ -837,7 +846,7 @@ InspectorUI.prototype = {
     }
 
     // Observer used to inspect the specified element from content after the
-    // inspector UI has been opened.
+    // inspector UI has been opened (via the content context menu).
     function inspectObserver(aElement) {
       Services.obs.removeObserver(boundInspectObserver,
                                   INSPECTOR_NOTIFICATIONS.OPENED,
@@ -870,6 +879,11 @@ InspectorUI.prototype = {
       this.treePanel = new this.TreePanel(this.chromeWin, this);
     }
 
+    if (Services.prefs.getBoolPref("devtools.styleinspector.enabled") &&
+        !this.toolRegistered("styleinspector")) {
+      this.stylePanel = new StyleInspector(this.chromeWin, this);
+    }
+
     this.toolbar.hidden = false;
     this.inspectMenuitem.setAttribute("checked", true);
 
@@ -886,26 +900,7 @@ InspectorUI.prototype = {
    */
   initTools: function IUI_initTools()
   {
-    // Style inspector
+    // Extras go here.
-    if (Services.prefs.getBoolPref("devtools.styleinspector.enabled") &&
-        !this.toolRegistered("styleinspector")) {
-      let stylePanel = StyleInspector.createPanel(true);
-      this.registerTool({
-        id: "styleinspector",
-        label: StyleInspector.l10n("style.highlighter.button.label"),
-        tooltiptext: StyleInspector.l10n("style.highlighter.button.tooltip"),
-        accesskey: StyleInspector.l10n("style.highlighter.accesskey"),
-        context: stylePanel,
-        get isOpen() stylePanel.isOpen(),
-        onSelect: stylePanel.selectNode,
-        show: stylePanel.showTool,
-        hide: stylePanel.hideTool,
-        dim: stylePanel.dimTool,
-        panel: stylePanel,
-        unregister: stylePanel.destroy,
-      });
-      this.stylePanel = stylePanel;
-    }
   },
 
   /**

browser/devtools/highlighter/test/browser_inspector_initialization.js

@@ -93,7 +93,7 @@ function treePanelTests()
   ok(InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is open");
 
   executeSoon(function() {
-    InspectorUI.stylePanel.showTool(doc.body);
+    InspectorUI.stylePanel.open(doc.body);
   });
 }
 

browser/devtools/styleinspector/CssHtmlTree.jsm

@@ -56,18 +56,18 @@ var EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
  * There should be one instance of CssHtmlTree per style display (of which there
  * will generally only be one).
  *
- * @params {Document} aStyleWin The main XUL browser document
+ * @params {StyleInspector} aStyleInspector The owner of this CssHtmlTree
- * @params {CssLogic} aCssLogic How we dig into the CSS. See CssLogic.jsm
  * @constructor
  */
-function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
+function CssHtmlTree(aStyleInspector)
 {
-  this.styleWin = aStyleWin;
+  this.styleWin = aStyleInspector.iframe;
-  this.cssLogic = aCssLogic;
+  this.styleInspector = aStyleInspector;
-  this.doc = aPanel.ownerDocument;
+  this.cssLogic = aStyleInspector.cssLogic;
-  this.win = this.doc.defaultView;
+  this.doc = aStyleInspector.document;
-  this.getRTLAttr = CssHtmlTree.getRTLAttr;
+  this.win = aStyleInspector.window;
-  this.propertyViews = {};
+  this.getRTLAttr = this.win.getComputedStyle(this.win.gBrowser).direction;
+  this.propertyViews = [];
 
   // The document in which we display the results (csshtmltree.xhtml).
   this.styleDocument = this.styleWin.contentWindow.document;
@@ -79,7 +79,7 @@ function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
   this.templatePath = this.styleDocument.getElementById("templatePath");
   this.propertyContainer = this.styleDocument.getElementById("propertyContainer");
   this.templateProperty = this.styleDocument.getElementById("templateProperty");
-  this.panel = aPanel;
+  this.panel = aStyleInspector.panel;
 
   // The element that we're inspecting, and the document that it comes from.
   this.viewedElement = null;
@@ -87,7 +87,7 @@ function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
 }
 
 /**
- * Memonized lookup of a l10n string from a string bundle.
+ * Memoized lookup of a l10n string from a string bundle.
  * @param {string} aName The key to lookup.
  * @returns A localized version of the given key.
  */
@@ -129,24 +129,6 @@ CssHtmlTree.processTemplate = function CssHtmlTree_processTemplate(aTemplate,
   }
 };
 
-/**
- * Checks whether the UI is RTL
- * @return {Boolean} true or false
- */
-CssHtmlTree.isRTL = function CssHtmlTree_isRTL()
-{
-  return CssHtmlTree.getRTLAttr == "rtl";
-};
-
-/**
- * Checks whether the UI is RTL
- * @return {String} "ltr" or "rtl"
- */
-XPCOMUtils.defineLazyGetter(CssHtmlTree, "getRTLAttr", function() {
-  let mainWindow = Services.wm.getMostRecentWindow("navigator:browser");
-  return mainWindow.getComputedStyle(mainWindow.gBrowser).direction;
-});
-
 XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
     .createBundle("chrome://browser/locale/styleinspector.properties"));
 
@@ -162,6 +144,9 @@ CssHtmlTree.prototype = {
   // Reference to the "Only user Styles" checkbox.
   onlyUserStylesCheckbox: null,
 
+  // Holds the ID of the panelRefresh timeout.
+  _panelRefreshTimeout: null,
+
   get showOnlyUserStyles()
   {
     return this.onlyUserStylesCheckbox.checked;
@@ -193,7 +178,7 @@ CssHtmlTree.prototype = {
       let batchSize = 15;
       let max = CssHtmlTree.propertyNames.length - 1;
       function displayProperties() {
-        if (this.viewedElement == aElement && this.panel.isOpen()) {
+        if (this.viewedElement == aElement && this.styleInspector.isOpen()) {
           // Display the next 15 properties
           for (let step = i + batchSize; i < step && i <= max; i++) {
             let name = CssHtmlTree.propertyNames[i];
@@ -202,7 +187,7 @@ CssHtmlTree.prototype = {
               this.propertyContainer, propView, true);
             propView.refreshMatchedSelectors();
             propView.refreshUnmatchedSelectors();
-            this.propertyViews[name] = propView;
+            this.propertyViews.push(propView);
           }
           if (i < max) {
             // There are still some properties to display. We loop here to display
@@ -223,10 +208,27 @@ CssHtmlTree.prototype = {
    */
   refreshPanel: function CssHtmlTree_refreshPanel()
   {
-    for each(let propView in this.propertyViews) {
+    this.win.clearTimeout(this._panelRefreshTimeout);
-      propView.refresh();
+
+    // We use a setTimeout loop to display the properties in batches of 15 at a
+    // time. This results in a perceptibly more responsive UI.
+    let i = 0;
+    let batchSize = 15;
+    let max = this.propertyViews.length - 1;
+    function refreshView() {
+      // Refresh the next 15 property views
+      for (let step = i + batchSize; i < step && i <= max; i++) {
+        this.propertyViews[i].refresh();
+      }
+      if (i < max) {
+        // There are still some property views to refresh. We loop here to
+        // display the next batch of 15.
+        this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 0);
+      } else {
+        Services.obs.notifyObservers(null, "StyleInspector-populated", null);
+      }
     }
-    Services.obs.notifyObservers(null, "StyleInspector-populated", null);
+    this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 0);
   },
 
   /**
@@ -239,15 +241,7 @@ CssHtmlTree.prototype = {
   {
     aEvent.preventDefault();
     if (aEvent.target && this.viewedElement != aEvent.target.pathElement) {
-      if (this.win.InspectorUI.selection) {
+      this.styleInspector.selectFromPath(aEvent.target.pathElement);
-        if (aEvent.target.pathElement != this.win.InspectorUI.selection) {
-          let elt = aEvent.target.pathElement;
-          this.win.InspectorUI.inspectNode(elt);
-          this.panel.selectNode(elt);
-        }
-      } else {
-        this.panel.selectNode(aEvent.target.pathElement);
-      }
     }
   },
 
@@ -349,11 +343,11 @@ CssHtmlTree.prototype = {
 
     // The element that we're inspecting, and the document that it comes from.
     delete this.propertyViews;
-    delete this.getRTLAttr;
     delete this.styleWin;
     delete this.cssLogic;
     delete this.doc;
     delete this.win;
+    delete this.styleInspector;
   },
 };
 
@@ -369,7 +363,7 @@ function PropertyView(aTree, aName)
 {
   this.tree = aTree;
   this.name = aName;
-  this.getRTLAttr = CssHtmlTree.getRTLAttr;
+  this.getRTLAttr = aTree.getRTLAttr;
 
   this.link = "https://developer.mozilla.org/en/CSS/" + aName;
 
@@ -560,7 +554,7 @@ PropertyView.prototype = {
       this._matchedSelectorViews = [];
       this.propertyInfo.matchedSelectors.forEach(
         function matchedSelectorViews_convert(aSelectorInfo) {
-          this._matchedSelectorViews.push(new SelectorView(aSelectorInfo));
+          this._matchedSelectorViews.push(new SelectorView(this.tree, aSelectorInfo));
         }, this);
     }
 
@@ -577,7 +571,7 @@ PropertyView.prototype = {
       this._unmatchedSelectorViews = [];
       this.propertyInfo.unmatchedSelectors.forEach(
         function unmatchedSelectorViews_convert(aSelectorInfo) {
-          this._unmatchedSelectorViews.push(new SelectorView(aSelectorInfo));
+          this._unmatchedSelectorViews.push(new SelectorView(this.tree, aSelectorInfo));
         }, this);
     }
 
@@ -607,9 +601,12 @@ PropertyView.prototype = {
 
 /**
  * A container to view us easy access to display data from a CssRule
+ * @param CssHtmlTree aTree, the owning CssHtmlTree
+ * @param aSelectorInfo
  */
-function SelectorView(aSelectorInfo)
+function SelectorView(aTree, aSelectorInfo)
 {
+  this.tree = aTree;
   this.selectorInfo = aSelectorInfo;
   this._cacheStatusNames();
 }
@@ -674,7 +671,7 @@ SelectorView.prototype = {
    */
   humanReadableText: function SelectorView_humanReadableText(aElement)
   {
-    if (CssHtmlTree.isRTL()) {
+    if (this.tree.getRTLAttr == "rtl") {
       return this.selectorInfo.value + " \u2190 " + this.text(aElement);
     } else {
       return this.text(aElement) + " \u2192 " + this.selectorInfo.value;
@@ -684,19 +681,22 @@ SelectorView.prototype = {
   text: function SelectorView_text(aElement) {
     let result = this.selectorInfo.selector.text;
     if (this.selectorInfo.elementStyle) {
-      if (this.selectorInfo.sourceElement == this.win.InspectorUI.selection) {
+      if (this.tree.styleInspector.IUI) {
-        result = "this";
+        if (this.selectorInfo.sourceElement == this.tree.styleInspector.IUI.selection)
-      } else {
+        {
-        result = CssLogic.getShortName(this.selectorInfo.sourceElement);
+          result = "this";
-        aElement.parentNode.querySelector(".rule-link > a").
+        } else {
-          addEventListener("click", function(aEvent) {
+          result = CssLogic.getShortName(this.selectorInfo.sourceElement);
-            this.win.InspectorUI.inspectNode(this.selectorInfo.sourceElement);
+        }
-            aEvent.preventDefault();
-          }, false);
       }
-
+      aElement.parentNode.querySelector(".rule-link > a").
+        addEventListener("click", function(aEvent) {
+          this.tree.styleInspector.selectFromPath(this.selectorInfo.sourceElement);
+          aEvent.preventDefault();
+        }.bind(this), false);
       result += ".style";
     }
+
     return result;
   },
 };

browser/devtools/styleinspector/StyleInspector.jsm

@@ -46,14 +46,58 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 var EXPORTED_SYMBOLS = ["StyleInspector"];
 
-var StyleInspector = {
+/**
+ * StyleInspector Constructor Function.
+ * @param {window} aContext, the chrome window context we're calling from.
+ * @param {InspectorUI} aIUI (optional) An InspectorUI instance if called from the
+ *        Highlighter.
+ */
+function StyleInspector(aContext, aIUI)
+{
+  this._init(aContext, aIUI);
+};
+
+StyleInspector.prototype = {
+
   /**
-   * Is the Style Inspector enabled?
+   * Initialization method called from constructor.
-   * @returns {Boolean} true or false
+   * @param {window} aContext, the chrome window context we're calling from.
+   * @param {InspectorUI} aIUI (optional) An InspectorUI instance if called from
+   *        the Highlighter.
    */
-  get isEnabled()
+  _init: function SI__init(aContext, aIUI)
   {
-    return Services.prefs.getBoolPref("devtools.styleinspector.enabled");
+    this.window = aContext;
+    this.IUI = aIUI;
+    this.document = this.window.document;
+    this.cssLogic = new CssLogic();
+    this.panelReady = false;
+    this.iframeReady = false;
+
+    // Were we invoked from the Highlighter?
+    if (this.IUI) {
+      this.createPanel(true);
+
+      let isOpen = this.isOpen.bind(this);
+
+      this.registrationObject = {
+        id: "styleinspector",
+        label: this.l10n("style.highlighter.button.label"),
+        tooltiptext: this.l10n("style.highlighter.button.tooltip"),
+        accesskey: this.l10n("style.highlighter.accesskey"),
+        context: this,
+        get isOpen() isOpen(),
+        onSelect: this.selectNode,
+        show: this.open,
+        hide: this.close,
+        dim: this.dimTool,
+        panel: this.panel,
+        unregister: this.destroy
+      };
+
+      // Register the registrationObject with the Highlighter
+      this.IUI.registerTool(this.registrationObject);
+    }
   },
 
   /**
@@ -61,12 +105,13 @@ var StyleInspector = {
    * @param {Boolean} aPreserveOnHide Prevents destroy from being called
    * onpopuphide. USE WITH CAUTION: When this value is set to true then you are
    * responsible to manually call destroy from outside the style inspector.
+   * @param {function} aCallback (optional) callback to fire when ready.
    */
-  createPanel: function SI_createPanel(aPreserveOnHide)
+  createPanel: function SI_createPanel(aPreserveOnHide, aCallback)
   {
-    let win = Services.wm.getMostRecentWindow("navigator:browser");
+    let popupSet = this.document.getElementById("mainPopupSet");
-    let popupSet = win.document.getElementById("mainPopupSet");
+    let panel = this.document.createElement("panel");
-    let panel = win.document.createElement("panel");
+    this.preserveOnHide = !!aPreserveOnHide;
 
     panel.setAttribute("class", "styleInspector");
     panel.setAttribute("orient", "vertical");
@@ -75,167 +120,183 @@ var StyleInspector = {
     panel.setAttribute("noautohide", "true");
     panel.setAttribute("titlebar", "normal");
     panel.setAttribute("close", "true");
-    panel.setAttribute("label", StyleInspector.l10n("panelTitle"));
+    panel.setAttribute("label", this.l10n("panelTitle"));
     panel.setAttribute("width", 350);
-    panel.setAttribute("height", win.screen.height / 2);
+    panel.setAttribute("height", this.window.screen.height / 2);
 
-    let vbox = win.document.createElement("vbox");
+    let vbox = this.document.createElement("vbox");
     vbox.setAttribute("flex", "1");
     panel.appendChild(vbox);
 
-    let iframe = win.document.createElement("iframe");
+    let iframe = this.document.createElement("iframe");
+    let boundIframeOnLoad = function loadedInitializeIframe()
+    {
+      this.iframe.removeEventListener("load", boundIframeOnLoad, true);
+      this.iframeReady = true;
+      if (aCallback)
+        aCallback(this);
+    }.bind(this);
+
     iframe.setAttribute("flex", "1");
     iframe.setAttribute("tooltip", "aHTMLTooltip");
+    iframe.addEventListener("load", boundIframeOnLoad, true);
     iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
-    iframe.addEventListener("load", SI_iframeOnload, true);
+
     vbox.appendChild(iframe);
 
-    let hbox = win.document.createElement("hbox");
+    let hbox = this.document.createElement("hbox");
     hbox.setAttribute("class", "resizerbox");
     vbox.appendChild(hbox);
 
-    let spacer = win.document.createElement("spacer");
+    let spacer = this.document.createElement("spacer");
     spacer.setAttribute("flex", "1");
     hbox.appendChild(spacer);
 
-    let resizer = win.document.createElement("resizer");
+    let resizer = this.document.createElement("resizer");
     resizer.setAttribute("dir", "bottomend");
     hbox.appendChild(resizer);
     popupSet.appendChild(panel);
 
-    /**
+    this._boundPopupShown = this.popupShown.bind(this);
-     * Iframe's onload event
+    this._boundPopupHidden = this.popupHidden.bind(this);
-     */
+    panel.addEventListener("popupshown", this._boundPopupShown, false);
-    let iframeReady = false;
+    panel.addEventListener("popuphidden", this._boundPopupHidden, false);
-    function SI_iframeOnload() {
-      iframe.removeEventListener("load", SI_iframeOnload, true);
-      iframeReady = true;
-      if (panelReady) {
-        SI_popupShown.call(panel);
-      }
-    }
 
-    /**
+    this.panel = panel;
-     * Initialize the popup when it is first shown
+    this.iframe = iframe;
-     */
-    let panelReady = false;
-    function SI_popupShown() {
-      panelReady = true;
-      if (iframeReady) {
-        if (!this.cssLogic) {
-          this.cssLogic = new CssLogic();
-          this.cssHtmlTree = new CssHtmlTree(iframe, this.cssLogic, this);
-        }
-        let selectedNode = this.selectedNode || null;
-        this.cssLogic.highlight(selectedNode);
-        this.cssHtmlTree.highlight(selectedNode);
-        Services.obs.notifyObservers(null, "StyleInspector-opened", null);
-      }
-    }
-
-    /**
-     * Hide the popup and conditionally destroy it
-     */
-    function SI_popupHidden() {
-      if (panel.preserveOnHide) {
-        Services.obs.notifyObservers(null, "StyleInspector-closed", null);
-      } else {
-        panel.destroy();
-      }
-    }
-
-    panel.addEventListener("popupshown", SI_popupShown, false);
-    panel.addEventListener("popuphidden", SI_popupHidden, false);
-    panel.preserveOnHide = !!aPreserveOnHide;
-
-    /**
-     * Check if the style inspector is open
-     */
-    panel.isOpen = function SI_isOpen()
-    {
-      return this.state && this.state == "open";
-    };
-
-    /**
-     * Select a node to inspect in the Style Inspector panel
-     *
-     * @param aNode The node to inspect
-     */
-    panel.selectNode = function SI_selectNode(aNode)
-    {
-      this.selectedNode = aNode;
-      if (this.isOpen() && !this.hasAttribute("dimmed")) {
-        this.cssLogic.highlight(aNode);
-        this.cssHtmlTree.highlight(aNode);
-      }
-    };
-
-    /**
-     * Destroy the style panel, remove listeners etc.
-     */
-    panel.destroy = function SI_destroy()
-    {
-      if (this.isOpen())
-        this.hideTool();
-      if (panel.cssHtmlTree)
-        panel.cssHtmlTree.destroy();
-      if (iframe) {
-        iframe.parentNode.removeChild(iframe);
-        iframe = null;
-      }
-
-      delete panel.cssLogic;
-      delete panel.cssHtmlTree;
-      panel.removeEventListener("popupshown", SI_popupShown, false);
-      panel.removeEventListener("popuphidden", SI_popupHidden, false);
-      panel.parentNode.removeChild(panel);
-      panel = null;
-      Services.obs.notifyObservers(null, "StyleInspector-closed", null);
-    };
-
-    /**
-     * Dim or undim a panel by setting or removing a dimmed attribute.
-     *
-     * @param aState
-     *        true = dim, false = undim
-     */
-    panel.dimTool = function SI_dimTool(aState)
-    {
-      if (!this.isOpen())
-        return;
-
-      if (aState) {
-        this.setAttribute("dimmed", "true");
-      } else if (this.hasAttribute("dimmed")) {
-        this.removeAttribute("dimmed");
-      }
-    };
-
-    panel.showTool = function SI_showTool(aSelection)
-    {
-      this.selectNode(aSelection);
-      let win = Services.wm.getMostRecentWindow("navigator:browser");
-      this.openPopup(win.gBrowser.selectedBrowser, "end_before", 0, 0,
-        false, false);
-    };
-
-    panel.hideTool = function SI_hideTool()
-    {
-      this.hidePopup();
-    };
-
-    /**
-     * Is the Style Inspector initialized?
-     * @returns {Boolean} true or false
-     */
-    function isInitialized()
-    {
-      return panel.cssLogic && panel.cssHtmlTree;
-    }
 
     return panel;
   },
 
+  /**
+   * Event handler for the popupshown event.
+   */
+  popupShown: function SI_popupShown()
+  {
+    this.panelReady = true;
+    if (this.iframeReady) {
+      this.cssHtmlTree = new CssHtmlTree(this);
+      let selectedNode = this.selectedNode || null;
+      this.cssLogic.highlight(selectedNode);
+      this.cssHtmlTree.highlight(selectedNode);
+      Services.obs.notifyObservers(null, "StyleInspector-opened", null);
+    }
+  },
+
+  /**
+   * Event handler for the popuphidden event.
+   * Hide the popup and conditionally destroy it
+   */
+  popupHidden: function SI_popupHidden()
+  {
+    if (this.preserveOnHide) {
+      Services.obs.notifyObservers(null, "StyleInspector-closed", null);
+    } else {
+      this.destroy();
+    }
+  },
+
+  /**
+   * Check if the style inspector is open.
+   * @returns boolean
+   */
+  isOpen: function SI_isOpen()
+  {
+    return this.panel && this.panel.state && this.panel.state == "open";
+  },
+
+  /**
+   * Select from Path (via CssHtmlTree_pathClick)
+   * @param aNode The node to inspect.
+   */
+  selectFromPath: function SI_selectFromPath(aNode)
+  {
+    if (this.IUI && this.IUI.selection) {
+      if (aNode != this.IUI.selection) {
+        this.IUI.inspectNode(aNode);
+      }
+    } else {
+      this.selectNode(aNode);
+    }
+  },
+
+  /**
+   * Select a node to inspect in the Style Inspector panel
+   * @param aNode The node to inspect.
+   */
+  selectNode: function SI_selectNode(aNode)
+  {
+    this.selectedNode = aNode;
+    if (this.isOpen() && !this.panel.hasAttribute("dimmed")) {
+      this.cssLogic.highlight(aNode);
+      this.cssHtmlTree.highlight(aNode);
+    }
+  },
+
+  /**
+   * Destroy the style panel, remove listeners etc.
+   */
+  destroy: function SI_destroy()
+  {
+    if (this.isOpen())
+      this.close();
+    if (this.cssHtmlTree)
+      this.cssHtmlTree.destroy();
+    if (this.iframe) {
+      this.iframe.parentNode.removeChild(this.iframe);
+      delete this.iframe;
+    }
+
+    delete this.cssLogic;
+    delete this.cssHtmlTree;
+    this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
+    this.panel.removeEventListener("popuphidden", this._boundPopupHidden, false);
+    delete this._boundPopupShown;
+    delete this._boundPopupHidden;
+    this.panel.parentNode.removeChild(this.panel);
+    delete this.panel;
+    delete this.doc;
+    delete this.win;
+    delete CssHtmlTree.win;
+    Services.obs.notifyObservers(null, "StyleInspector-closed", null);
+  },
+
+  /**
+   * Dim or undim a panel by setting or removing a dimmed attribute.
+   * @param aState
+   *        true = dim, false = undim
+   */
+  dimTool: function SI_dimTool(aState)
+  {
+    if (!this.isOpen())
+      return;
+
+    if (aState) {
+      this.panel.setAttribute("dimmed", "true");
+    } else if (this.panel.hasAttribute("dimmed")) {
+      this.panel.removeAttribute("dimmed");
+    }
+  },
+
+  /**
+   * Open the panel.
+   * @param {DOMNode} aSelection the (optional) DOM node to select.
+   */
+  open: function SI_open(aSelection)
+  {
+    this.selectNode(aSelection);
+    this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,
+      false, false);
+  },
+
+  /**
+   * Close the panel.
+   */
+  close: function SI_close()
+  {
+    this.panel.hidePopup();
+  },
+
   /**
    * Memonized lookup of a l10n string from a string bundle.
    * @param {string} aName The key to lookup.

browser/devtools/styleinspector/test/browser/browser_bug683672.js

@@ -21,11 +21,14 @@ function test()
 function tabLoaded()
 {
   browser.removeEventListener("load", tabLoaded, true);
+  doc = content.document;
   ok(window.StyleInspector, "StyleInspector exists");
-  ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
-  stylePanel = StyleInspector.createPanel();
+  stylePanel = new StyleInspector(window);
   Services.obs.addObserver(runTests, "StyleInspector-opened", false);
-  stylePanel.openPopup();
+  stylePanel.createPanel(false, function() {
+    stylePanel.open(doc.body);
+  });
 }
 
 function runTests()
@@ -39,7 +42,7 @@ function runTests()
 
   info("finishing up");
   Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
-  stylePanel.hidePopup();
+  stylePanel.close();
 }
 
 function testMatchedSelectors()

browser/devtools/styleinspector/test/browser/browser_styleinspector.js

@@ -27,10 +27,11 @@ function createDocument()
     '</div>';
   doc.title = "Style Inspector Test";
   ok(window.StyleInspector, "StyleInspector exists");
-  ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  stylePanel = new StyleInspector(window);
-  stylePanel = StyleInspector.createPanel();
   Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
-  stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
+  stylePanel.createPanel(false, function() {
+    stylePanel.open(doc.body);
+  });
 }
 
 function runStyleInspectorTests()
@@ -55,7 +56,7 @@ function runStyleInspectorTests()
 
   SI_CheckProperty();
   Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
-  stylePanel.hidePopup();
+  stylePanel.close();
 }
 
 function SI_CheckProperty()

browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672744_search_filter.js

@@ -15,10 +15,12 @@ function createDocument()
     '</div>';
   doc.title = "Style Inspector Search Filter Test";
   ok(window.StyleInspector, "StyleInspector exists");
-  ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
-  stylePanel = StyleInspector.createPanel();
+  stylePanel = new StyleInspector(window);
   Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
-  stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
+  stylePanel.createPanel(false, function() {
+    stylePanel.open(doc.body);
+  });
 }
 
 function runStyleInspectorTests()
@@ -50,7 +52,7 @@ function SI_toggleDefaultStyles()
   Services.obs.removeObserver(SI_toggleDefaultStyles, "StyleInspector-populated", false);
 
   info("clearing \"only user styles\" checkbox");
-  let iframe = stylePanel.querySelector("iframe");
+  let iframe = stylePanel.iframe;
   let checkbox = iframe.contentDocument.querySelector(".userStyles");
   Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
   EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
@@ -60,7 +62,7 @@ function SI_AddFilterText()
 {
   Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
 
-  let iframe = stylePanel.querySelector("iframe");
+  let iframe = stylePanel.iframe;
   let searchbar = iframe.contentDocument.querySelector(".searchfield");
 
   Services.obs.addObserver(SI_checkFilter, "StyleInspector-populated", false);
@@ -79,14 +81,14 @@ function SI_checkFilter()
   let propertyViews = stylePanel.cssHtmlTree.propertyViews;
 
   info("check that the correct properties are visible");
-  for each(let propView in propertyViews) {
+  propertyViews.forEach(function(propView) {
     let name = propView.name;
     is(propView.visible, name.indexOf("color") > -1,
       "span " + name + " property visibility check");
-  }
+  });
 
   Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
-  stylePanel.hidePopup();
+  stylePanel.close();
 }
 
 function finishUp()

browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672746_default_styles.js

@@ -15,10 +15,12 @@ function createDocument()
     '</div>';
   doc.title = "Style Inspector Default Styles Test";
   ok(window.StyleInspector, "StyleInspector exists");
-  ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  // ok(StyleInspector.isEnabled, "style inspector preference is enabled");
-  stylePanel = StyleInspector.createPanel();
+  stylePanel = new StyleInspector(window);
   Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
-  stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
+  stylePanel.createPanel(false, function() {
+    stylePanel.open(doc.body);
+  });
 }
 
 function runStyleInspectorTests()
@@ -59,7 +61,7 @@ function SI_check()
 function SI_toggleDefaultStyles()
 {
   // Click on the checkbox.
-  let iframe = stylePanel.querySelector("iframe");
+  let iframe = stylePanel.iframe;
   let checkbox = iframe.contentDocument.querySelector(".userStyles");
   Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
   EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
@@ -75,13 +77,18 @@ function SI_checkDefaultStyles()
       "span background-color property is visible");
 
   Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
-  stylePanel.hidePopup();
+  stylePanel.close();
 }
 
 function propertyVisible(aName)
 {
+  info("Checking property visibility for " + aName);
   let propertyViews = stylePanel.cssHtmlTree.propertyViews;
-  return propertyViews[aName].className == "property-view";
+  for each (let propView in propertyViews) {
+    if (propView.name == aName) {
+      return propView.className == "property-view";
+    }
+  }
 }
 
 function finishUp()

browser/devtools/styleinspector/test/browser/browser_styleinspector_webconsole.js

@@ -115,8 +115,10 @@ function teststylePanels() {
   for (let i = 0, max = stylePanels.length; i < max; i++) {
     ok(stylePanels[i], "style inspector instance " + i +
        " correctly initialized");
-    ok(stylePanels[i].isOpen(), "style inspector " + i + " is open");
+    is(stylePanels[i].state, "open", "style inspector " + i + " is open");
 
+/*  // the following should be tested elsewhere
+    // TODO bug 696166
     let htmlTree = stylePanels[i].cssHtmlTree;
     let cssLogic = htmlTree.cssLogic;
     let elt = eltArray[i];
@@ -149,6 +151,7 @@ function teststylePanels() {
         is(selector, "#container", "correct best match for #container");
         is(value, "fantasy", "correct css property value for #" + eltId);
     }
+*/
   }
 
   info("hiding stylePanels[1]");
@@ -160,9 +163,9 @@ function teststylePanels() {
 function styleInspectorClosedByHide()
 {
   Services.obs.removeObserver(styleInspectorClosedByHide, "StyleInspector-closed", false);
-  ok(stylePanels[0].isOpen(), "instance stylePanels[0] is still open");
+  is(stylePanels[0].state, "open", "instance stylePanels[0] is still open");
-  ok(!stylePanels[1].isOpen(), "instance stylePanels[1] is hidden");
+  is(stylePanels[1].state, "closed", "instance stylePanels[1] is hidden");
-  ok(stylePanels[2].isOpen(), "instance stylePanels[2] is still open");
+  is(stylePanels[2].state, "open", "instance stylePanels[2] is still open");
 
   info("closing web console");
   Services.obs.addObserver(styleInspectorClosedFromConsole1,

browser/devtools/webconsole/HUDService.jsm

@@ -4578,9 +4578,12 @@ function JSTermHelper(aJSTerm)
     }
 
     if (!errstr) {
-      let stylePanel = StyleInspector.createPanel();
+      let chromeWin = HUDService.getHudReferenceById(aJSTerm.hudId).chromeWindow;
-      stylePanel.setAttribute("hudToolId", aJSTerm.hudId);
+      let styleInspector = new StyleInspector(chromeWin);
-      stylePanel.showTool(aNode);
+      styleInspector.createPanel(false, function() {
+        styleInspector.panel.setAttribute("hudToolId", aJSTerm.hudId);
+        styleInspector.open(aNode);
+      });
     } else {
       aJSTerm.writeOutput(errstr + "\n", CATEGORY_OUTPUT, SEVERITY_ERROR);
     }

browser/themes/gnomestripe/browser/browser.css

@@ -1954,6 +1954,54 @@ panel[dimmed="true"] {
   outline-color: white;
 }
 
+/* Highlighter toolbar */
+
+#inspector-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  border-top: 1px solid hsla(210, 8%, 5%, .65);
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+}
+
+#inspector-inspect-toolbutton,
+#inspector-tools > toolbarbutton {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-inspect-toolbutton:not([checked]):hover:active,
+#inspector-tools > toolbarbutton:not([checked]):hover:active {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-inspect-toolbutton[checked],
+#inspector-tools > toolbarbutton[checked] {
+  color: hsl(208,100%,60%) !important;
+  border-color: hsla(210,8%,5%,.6) !important;
+  background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
+  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+#inspector-inspect-toolbutton[checked]:hover,
+#inspector-tools > toolbarbutton[checked]:hover {
+  background-color: transparent !important;
+}
+
+#inspector-inspect-toolbutton[checked]:hover:active,
+#inspector-tools > toolbarbutton[checked]:hover:active {
+  background-color: hsla(210,8%,5%,.2) !important;
+}
+
 /*
  * need a "bumpy" background image for this!
  */

browser/themes/pinstripe/browser/browser.css

@@ -2563,8 +2563,7 @@ panel[dimmed="true"] {
 
 #inspector-toolbar {
   -moz-appearance: none;
-  height: 32px;
+  padding: 4px 3px;
-  padding: 0 3px;
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
   background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
@@ -2573,17 +2572,21 @@ panel[dimmed="true"] {
 #inspector-inspect-toolbutton,
 #inspector-tools > toolbarbutton {
   -moz-appearance: none;
-  width: 78px;
+  min-width: 78px;
-  margin: 3px 5px;
+  min-height: 22px;
   color: hsl(210,30%,85%);
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
   border: 1px solid hsla(210,8%,5%,.45);
   border-radius: @toolbarbuttonCornerRadius@;
-  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1));
+  background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  background-clip: padding-box;
   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
 }
 
+#inspector-inspect-toolbutton > .toolbarbutton-text ,
+#inspector-tools > toolbarbutton  > .toolbarbutton-text {
+  margin: 1px 6px;
+}
+
 #inspector-inspect-toolbutton:not([checked]):hover:active,
 #inspector-tools > toolbarbutton:not([checked]):hover:active {
   border-color: hsla(210,8%,5%,.6);

browser/themes/winstripe/browser/browser.css

@@ -2665,6 +2665,54 @@ panel[dimmed="true"] {
   outline-color: white;
 }
 
+/* Highlighter toolbar */
+
+#inspector-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  border-top: 1px solid hsla(211,68%,6%,.65) !important;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
+}
+
+#inspector-inspect-toolbutton,
+#inspector-tools > toolbarbutton {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(211,68%,6%,.5);
+  border-radius: 3px;
+  background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+}
+
+#inspector-inspect-toolbutton > .toolbarbutton-icon,
+#inspector-tools > toolbarbutton  > .toolbarbutton-icon {
+  margin: 0;
+}
+
+#inspector-inspect-toolbutton:not([checked]):hover:active,
+#inspector-tools > toolbarbutton:not([checked]):hover:active {
+  background-color: hsla(210,18%,9%,.1);
+  background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
+  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+}
+
+#inspector-inspect-toolbutton[checked],
+#inspector-tools > toolbarbutton[checked] {
+  border-color: hsla(211,68%,6%,.6);
+  background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
+  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+  color: hsl(200,100%,60%) !important;
+}
+
+#inspector-inspect-toolbutton[checked]:hover:active,
+#inspector-tools > toolbarbutton[checked]:hover:active {
+  background-color: hsla(211,68%,6%,.2);
+}
+
 /*
  * need a "bumpy" background image for this!
  */

toolkit/content/widgets/videocontrols.xml

@@ -201,57 +201,66 @@
             </vbox>
 
             <vbox class="statsOverlay" hidden="true">
-                <html:table class="statsTable" xmlns="http://www.w3.org/1999/xhtml">
+                <html:div class="statsDiv" xmlns="http://www.w3.org/1999/xhtml">
-                    <tr>
+                    <table class="statsTable">
-                        <td class="statLabel">&stats.media;</td>
+                        <tr>
-                        <td colspan="3" class="statValue filename"><span class="statFilename"/></td>
+                            <td class="statLabel">&stats.media;</td>
-                    </tr>
+                            <td class="statValue filename"><span class="statFilename"/></td>
-                    <tr>
+                        </tr>
-                        <td class="statLabel">&stats.size;</td>
+                        <tr>
-                        <td colspan="3" class="statValue size"><span class="statSize"/></td>
+                            <td class="statLabel">&stats.size;</td>
-                    </tr>
+                            <td class="statValue size"><span class="statSize"/></td>
-                    <tr style="height: 1em;"/>
+                        </tr>
+                        <tr style="height: 1em;"/>
 
-                    <tr>
+                        <tr>
-                        <td class="statLabel">&stats.activity;</td> <td class="statValue activity">
+                            <td class="statLabel">&stats.activity;</td>
-                          <span class="statActivity">
+                            <td class="statValue activity">
-                            <span class="statActivityPaused">&stats.activityPaused;</span>
+                              <span class="statActivity">
-                            <span class="statActivityPlaying">&stats.activityPlaying;</span>
+                                <span class="statActivityPaused">&stats.activityPaused;</span>
-                            <span class="statActivityEnded">&stats.activityEnded;</span>
+                                <span class="statActivityPlaying">&stats.activityPlaying;</span>
-                            <span class="statActivitySeeking">&stats.activitySeeking;</span>
+                                <span class="statActivityEnded">&stats.activityEnded;</span>
-                          </span>
+                                <span class="statActivitySeeking">&stats.activitySeeking;</span>
-                        </td>
+                              </span>
-                        <td class="statLabel">&stats.volume;</td> <td class="statValue"><span class="statVolume"/></td>
+                            </td>
-                    </tr>
+                        </tr>
-                    <tr>
+                        <tr>
-                        <!-- Localization note: readyState is a HTML5 API MediaElement-specific attribute and should not be localized. -->
+                            <td class="statLabel">&stats.volume;</td> <td class="statValue"><span class="statVolume"/></td>
-                        <td class="statLabel">readyState</td> <td class="statValue"><span class="statReadyState"/></td>
+                        </tr>
-                        <td class="statLabel">&stats.channels;</td> <td class="statValue"><span class="statChannels"/></td>
+                        <tr>
-                    </tr>
+                            <!-- Localization note: readyState is a HTML5 API MediaElement-specific attribute and should not be localized. -->
-                    <tr>
+                            <td class="statLabel">readyState</td> <td class="statValue"><span class="statReadyState"/></td>
-                      <!-- Localization note: networkState is a HTML5 API MediaElement-specific attribute and should not be localized. -->
+                        </tr>
-                      <td class="statLabel">networkState</td> <td class="statValue"><span class="statNetState"/></td>
+                        <tr>
-                        <td class="statLabel">&stats.sampleRate;</td> <td class="statValue"><span class="statSampleRate"/></td>
+                            <td class="statLabel">&stats.channels;</td> <td class="statValue"><span class="statChannels"/></td>
-                    </tr>
+                        </tr>
-                    <tr style="height: 1em;"/>
+                        <tr>
+                          <!-- Localization note: networkState is a HTML5 API MediaElement-specific attribute and should not be localized. -->
+                          <td class="statLabel">networkState</td> <td class="statValue"><span class="statNetState"/></td>
+                        </tr>
+                        <tr>
+                          <td class="statLabel">&stats.sampleRate;</td> <td class="statValue"><span class="statSampleRate"/></td>
+                        </tr>
+                        <tr style="height: 1em;"/>
 
-                    <tr>
+                        <tr>
-                        <td class="statLabel">&stats.framesParsed;</td> <td class="statValue"><span class="statFramesParsed"/></td>
+                            <td class="statLabel">&stats.framesParsed;</td>
-                        <td class="statLabel"></td> <td class="statValue"></td>
+                            <td class="statValue"><span class="statFramesParsed"/></td>
-                    </tr>
+                        </tr>
-                    <tr>
+                        <tr>
-                        <td class="statLabel">&stats.framesDecoded;</td> <td class="statValue"><span class="statFramesDecoded"/></td>
+                            <td class="statLabel">&stats.framesDecoded;</td>
-                        <td class="statLabel"></td> <td class="statValue"></td>
+                            <td class="statValue"><span class="statFramesDecoded"/></td>
-                    </tr>
+                        </tr>
-                    <tr>
+                        <tr>
-                        <td class="statLabel">&stats.framesPresented;</td> <td class="statValue"><span class="statFramesPresented"/></td>
+                            <td class="statLabel">&stats.framesPresented;</td>
-                        <td class="statLabel"></td> <td class="statValue"></td>
+                            <td class="statValue"><span class="statFramesPresented"/></td>
-                    </tr>
+                        </tr>
-                    <tr>
+                        <tr>
-                        <td class="statLabel">&stats.framesPainted;</td> <td class="statValue"><span class="statFramesPainted"/></td>
+                            <td class="statLabel">&stats.framesPainted;</td>
-                        <td class="statLabel"></td> <td class="statValue"></td>
+                            <td class="statValue"><span class="statFramesPainted"/></td>
-                    </tr>
+                        </tr>
-                </html:table>
+                    </table>
+                </html:div>
             </vbox>
 
             <vbox class="controlsOverlay">

toolkit/themes/pinstripe/global/media/videocontrols.css

@@ -182,8 +182,13 @@
 }
 
 /* Statistics formatting */
+html|*.statsDiv {
+  position: relative;
+}
 html|td {
-  padding: 2px;
+  height: 1em;
+  max-height: 1em;
+  padding: 0 2px;
 }
 html|table {
   font-family: Helvetica, Ariel, sans-serif;
@@ -194,9 +199,11 @@ html|table {
     1px -1px 0 #000,
     -1px 1px 0 #000,
     1px 1px 0 #000;
-  width: 100%;
+  min-width: 100%;
   background: rgba(68,68,68,.7);
   table-layout: fixed;
+  border-collapse: collapse;
+  position: absolute;
 }
 
 /* CSS Transitions */

toolkit/themes/winstripe/global/media/videocontrols.css

@@ -191,8 +191,13 @@
 }
 
 /* Statistics formatting */
+html|*.statsDiv {
+  position: relative;
+}
 html|td {
-  padding: 2px;
+  height: 1em;
+  max-height: 1em;
+  padding: 0 2px;
 }
 html|table {
   font-family: Helvetica, Ariel, sans-serif;
@@ -203,9 +208,11 @@ html|table {
     1px -1px 0 #000,
     -1px 1px 0 #000,
     1px 1px 0 #000;
-  width: 100%;
+  min-width: 100%;
   background: rgba(68,68,68,.7);
   table-layout: fixed;
+  border-collapse: collapse;
+  position: absolute;
 }
 
 /* CSS Transitions */