Bug 770818 - [inspector] highlighter v3. r=jwalker

browser/app/profile/firefox.js

@@ -1007,8 +1007,6 @@ pref("devtools.inspector.htmlHeight", 112);
 pref("devtools.inspector.htmlPanelOpen", false);
 pref("devtools.inspector.sidebarOpen", false);
 pref("devtools.inspector.activeSidebar", "ruleview");
-pref("devtools.inspector.highlighterShowVeil", true);
-pref("devtools.inspector.highlighterShowInfobar", true);
 
 // Enable the Layout View
 pref("devtools.layoutview.enabled", true);

browser/base/content/browser.xul

@@ -1106,24 +1106,6 @@
                      oncommand="InspectorUI.closeInspectorUI(false);"
                      tooltiptext="&inspectCloseButton.tooltiptext;"/>
 #endif
-      <toolbarbutton id="inspector-option-toolbarbutton"
-                     type="menu"
-                     tabindex="0"
-                     tooltiptext="&inspectOptionButton.tooltiptext;">
-        <menupopup id="inspector-option-popup"
-                   position="before_start">
-          <menuitem id="inspectorToggleVeil"
-                    type="checkbox"
-                    label="&inspectorToggleVeil.label;"
-                    accesskey="&inspectorToggleVeil.accesskey;"
-                    command="Inspector:ToggleVeil"/>
-          <menuitem id="inspectorToggleInfobar"
-                    type="checkbox"
-                    label="&inspectorToggleInfobar.label;"
-                    accesskey="&inspectorToggleInfobar.accesskey;"
-                    command="Inspector:ToggleInfobar"/>
-        </menupopup>
-      </toolbarbutton>
       <toolbarbutton id="inspector-inspect-toolbutton"
                      class="devtools-toolbarbutton"
                      command="Inspector:Inspect"/>

browser/base/content/highlighter.css

@@ -12,33 +12,27 @@
   left: 0;
 }
 
-#highlighter-veil-container {
+#highlighter-outline-container {
   overflow: hidden;
+  position: relative;
 }
 
-#highlighter-veil-container:not([dim]) > .highlighter-veil,
-#highlighter-veil-container:not([dim]) > hbox > .highlighter-veil {
-  visibility: hidden;
+#highlighter-outline {
+  position: absolute;
 }
 
-#highlighter-veil-container:not([disable-transitions]) > .highlighter-veil,
-#highlighter-veil-container:not([disable-transitions]) > #highlighter-veil-middlebox,
-#highlighter-veil-container:not([disable-transitions]) > #highlighter-veil-middlebox > .highlighter-veil,
-#highlighter-veil-container:not([disable-transitions]) > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
-  transition-property: width, height;
+#highlighter-outline[hidden] {
+  opacity: 0;
+  pointer-events: none;
+  display: -moz-box;
+}
+
+#highlighter-outline:not([disable-transitions]) {
+  transition-property: opacity, top, left, width, height;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
 
-#highlighter-veil-bottombox,
-#highlighter-veil-rightbox {
-  -moz-box-flex: 1;
-}
-
-#highlighter-veil-middlebox:-moz-locale-dir(rtl) {
-  -moz-box-direction: reverse;
-}
-
 .inspector-breadcrumbs-button {
   direction: ltr;
 }
@@ -52,8 +46,15 @@
   max-width: 95%;
 }
 
-#highlighter-nodeinfobar-container:not([disable-transitions]) {
-  transition-property: top, left;
+#highlighter-nodeinfobar-container[hidden] {
+  opacity: 0;
+  pointer-events: none;
+  display: -moz-box;
+}
+
+#highlighter-nodeinfobar-container:not([disable-transitions]),
+#highlighter-nodeinfobar-container[disable-transitions][force-transitions] {
+  transition-property: transform, opacity, top, left;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }

browser/devtools/highlighter/highlighter.jsm

@@ -66,11 +66,11 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  *   // Is a node highlightable.
  *   boolean isNodeHighlightable(aNode);
  *
- *   // Show/hide the veil and the infobar
+ *   // Show/hide the outline and the infobar
  *   void showInfobar();
  *   void hideInfobar();
- *   void showVeil();
- *   void hideVeil();
+ *   void showOutline();
+ *   void hideOutline();
  *
  *   // Add/Remove listeners
  *   // @param aEvent - event name
@@ -86,14 +86,24 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  *   "locked" - The selected node has been locked
  *   "unlocked" - The selected ndoe has been unlocked
  *   "pseudoclasstoggled" - A pseudo-class lock has changed on the selected node
-
  *
  * Structure:
- *
- *   <stack id="highlighter-container">
- *     <vbox id="highlighter-veil-container">...</vbox>
- *     <box id="highlighter-controls>...</vbox>
- *   </stack>
+ *  <stack id="highlighter-container">
+ *    <box id="highlighter-outline-container">
+ *      <box id="highlighter-outline" locked="true/false"/>
+ *    </box>
+ *    <box id="highlighter-controls">
+ *      <box id="highlighter-nodeinfobar-container" position="top/bottom" locked="true/false">
+ *        <box class="highlighter-nodeinfobar-arrow" id="highlighter-nodeinfobar-arrow-top"/>
+ *        <hbox id="highlighter-nodeinfobar">
+ *          <toolbarbutton id="highlighter-nodeinfobar-inspectbutton" class="highlighter-nodeinfobar-button"/>
+ *          <hbox id="highlighter-nodeinfobar-text">tagname#id.class1.class2</hbox>
+ *          <toolbarbutton id="highlighter-nodeinfobar-menu" class="highlighter-nodeinfobar-button">…</toolbarbutton>
+ *        </hbox>
+ *        <box class="highlighter-nodeinfobar-arrow" id="highlighter-nodeinfobar-arrow-bottom"/>
+ *      </box>
+ *    </box>
+ *  </stack>
  *
  */
 
@@ -124,26 +134,28 @@ Highlighter.prototype = {
     this.highlighterContainer = this.chromeDoc.createElement("stack");
     this.highlighterContainer.id = "highlighter-container";
 
-    this.veilContainer = this.chromeDoc.createElement("vbox");
-    this.veilContainer.id = "highlighter-veil-container";
+    this.outline = this.chromeDoc.createElement("box");
+    this.outline.id = "highlighter-outline";
+
+    let outlineContainer = this.chromeDoc.createElement("box");
+    outlineContainer.appendChild(this.outline);
+    outlineContainer.id = "highlighter-outline-container";
 
     // The controlsBox will host the different interactive
     // elements of the highlighter (buttons, toolbars, ...).
     let controlsBox = this.chromeDoc.createElement("box");
     controlsBox.id = "highlighter-controls";
-    this.highlighterContainer.appendChild(this.veilContainer);
+    this.highlighterContainer.appendChild(outlineContainer);
     this.highlighterContainer.appendChild(controlsBox);
 
     stack.appendChild(this.highlighterContainer);
 
-    // The veil will make the whole page darker except
-    // for the region of the selected box.
-    this.buildVeil(this.veilContainer);
-    this.showVeil();
+    this.showOutline();
 
     this.buildInfobar(controlsBox);
 
     this.transitionDisabler = null;
+    this.pageEventsMuter = null;
 
     this.computeZoomFactor();
     this.unlock();
@@ -159,15 +171,12 @@ Highlighter.prototype = {
     this.detachPageListeners();
 
     this.chromeWin.clearTimeout(this.transitionDisabler);
+    this.chromeWin.clearTimeout(this.pageEventsMuter);
     this.boundCloseEventHandler = null;
     this._contentRect = null;
     this._highlightRect = null;
     this._highlighting = false;
-    this.veilTopBox = null;
-    this.veilLeftBox = null;
-    this.veilMiddleBox = null;
-    this.veilTransparentBox = null;
-    this.veilContainer = null;
+    this.outline = null;
     this.node = null;
     this.nodeInfo = null;
     this.highlighterContainer.parentNode.removeChild(this.highlighterContainer);
@@ -183,7 +192,7 @@ Highlighter.prototype = {
   },
 
   /**
-   * Show the veil, and select a node.
+   * Show the outline, and select a node.
    * If no node is specified, the previous selected node is highlighted if any.
    * If no node was selected, the root element is selected.
    *
@@ -268,20 +277,21 @@ Highlighter.prototype = {
    */
   show: function() {
     if (!this.hidden) return;
-    this.veilContainer.removeAttribute("hidden");
-    this.nodeInfo.container.removeAttribute("hidden");
+    this.showOutline();
+    this.showInfobar();
+    this.computeZoomFactor();
     this.attachPageListeners();
     this.invalidateSize();
     this.hidden = false;
   },
 
   /**
-   * Hide the highlighter, the veil and the infobar.
+   * Hide the highlighter, the outline and the infobar.
    */
   hide: function() {
     if (this.hidden) return;
-    this.veilContainer.setAttribute("hidden", "true");
-    this.nodeInfo.container.setAttribute("hidden", "true");
+    this.hideOutline();
+    this.hideInfobar();
     this.detachPageListeners();
     this.hidden = true;
   },
@@ -300,7 +310,7 @@ Highlighter.prototype = {
    */
   lock: function() {
     if (this.locked === true) return;
-    this.veilContainer.setAttribute("locked", "true");
+    this.outline.setAttribute("locked", "true");
     this.nodeInfo.container.setAttribute("locked", "true");
     this.detachMouseListeners();
     this.locked = true;
@@ -313,10 +323,11 @@ Highlighter.prototype = {
    */
   unlock: function() {
     if (this.locked === false) return;
-    this.veilContainer.removeAttribute("locked");
+    this.outline.removeAttribute("locked");
     this.nodeInfo.container.removeAttribute("locked");
     this.attachMouseListeners();
     this.locked = false;
+    this.showOutline();
     this.emitEvent("unlocked");
   },
 
@@ -341,88 +352,36 @@ Highlighter.prototype = {
   },
 
   /**
-   * Hide the veil
+   * Hide the infobar
    */
-   hideVeil: function Highlighter_hideVeil() {
-     this.veilContainer.removeAttribute("dim");
+   hideInfobar: function Highlighter_hideInfobar() {
+     this.nodeInfo.container.setAttribute("force-transitions", "true");
+     this.nodeInfo.container.setAttribute("hidden", "true");
    },
 
   /**
-   * Show the veil
+   * Show the infobar
    */
-   showVeil: function Highlighter_showVeil() {
-     this.veilContainer.setAttribute("dim", "true");
+   showInfobar: function Highlighter_showInfobar() {
+     this.nodeInfo.container.removeAttribute("hidden");
+     this.moveInfobar();
+     this.nodeInfo.container.removeAttribute("force-transitions");
    },
 
-   /**
-    * Hide the infobar
-    */
-    hideInfobar: function Highlighter_hideInfobar() {
-      this.nodeInfo.container.setAttribute("hidden", "true");
-    },
-
-   /**
-    * Show the infobar
-    */
-    showInfobar: function Highlighter_showInfobar() {
-      this.nodeInfo.container.removeAttribute("hidden");
-      this.moveInfobar();
-    },
+  /**
+   * Hide the outline
+   */
+   hideOutline: function Highlighter_hideOutline() {
+     this.outline.setAttribute("hidden", "true");
+   },
 
   /**
-   * Build the veil:
-   *
-   * <vbox id="highlighter-veil-container">
-   *   <box id="highlighter-veil-topbox" class="highlighter-veil"/>
-   *   <hbox id="highlighter-veil-middlebox">
-   *     <box id="highlighter-veil-leftbox" class="highlighter-veil"/>
-   *     <box id="highlighter-veil-transparentbox"/>
-   *     <box id="highlighter-veil-rightbox" class="highlighter-veil"/>
-   *   </hbox>
-   *   <box id="highlighter-veil-bottombox" class="highlighter-veil"/>
-   * </vbox>
-   *
-   * @param nsIDOMElement aParent
-   *        The container of the veil boxes.
+   * Show the outline
    */
-  buildVeil: function Highlighter_buildVeil(aParent)
-  {
-    // We will need to resize these boxes to surround a node.
-    // See highlightRectangle().
-
-    this.veilTopBox = this.chromeDoc.createElement("box");
-    this.veilTopBox.id = "highlighter-veil-topbox";
-    this.veilTopBox.className = "highlighter-veil";
-
-    this.veilMiddleBox = this.chromeDoc.createElement("hbox");
-    this.veilMiddleBox.id = "highlighter-veil-middlebox";
-
-    this.veilLeftBox = this.chromeDoc.createElement("box");
-    this.veilLeftBox.id = "highlighter-veil-leftbox";
-    this.veilLeftBox.className = "highlighter-veil";
-
-    this.veilTransparentBox = this.chromeDoc.createElement("box");
-    this.veilTransparentBox.id = "highlighter-veil-transparentbox";
-
-    // We don't need any references to veilRightBox and veilBottomBox.
-    // These boxes are automatically resized (flex=1)
-
-    let veilRightBox = this.chromeDoc.createElement("box");
-    veilRightBox.id = "highlighter-veil-rightbox";
-    veilRightBox.className = "highlighter-veil";
-
-    let veilBottomBox = this.chromeDoc.createElement("box");
-    veilBottomBox.id = "highlighter-veil-bottombox";
-    veilBottomBox.className = "highlighter-veil";
-
-    this.veilMiddleBox.appendChild(this.veilLeftBox);
-    this.veilMiddleBox.appendChild(this.veilTransparentBox);
-    this.veilMiddleBox.appendChild(veilRightBox);
-
-    aParent.appendChild(this.veilTopBox);
-    aParent.appendChild(this.veilMiddleBox);
-    aParent.appendChild(veilBottomBox);
-  },
+   showOutline: function Highlighter_showOutline() {
+     if (this._highlighting)
+       this.outline.removeAttribute("hidden");
+   },
 
   /**
    * Build the node Infobar.
@@ -604,14 +563,15 @@ Highlighter.prototype = {
     if (aRectScaled.left >= 0 && aRectScaled.top >= 0 &&
         aRectScaled.width > 0 && aRectScaled.height > 0) {
 
-      this.veilTransparentBox.style.visibility = "visible";
+      this.showOutline();
 
       // 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";
-      this.veilLeftBox.style.width = aRectScaled.left + "px";
-      this.veilMiddleBox.style.height = aRectScaled.height + "px";
-      this.veilTransparentBox.style.width = aRectScaled.width + "px";
+      let top = "top:" + aRectScaled.top + "px;";
+      let left = "left:" + aRectScaled.left + "px;";
+      let width = "width:" + aRectScaled.width + "px;";
+      let height = "height:" + aRectScaled.height + "px;";
+      this.outline.setAttribute("style", top + left + width + height);
 
       this._highlighting = true;
     } else {
@@ -630,9 +590,7 @@ Highlighter.prototype = {
   unhighlight: function Highlighter_unhighlight()
   {
     this._highlighting = false;
-    this.veilMiddleBox.style.height = 0;
-    this.veilTransparentBox.style.width = 0;
-    this.veilTransparentBox.style.visibility = "hidden";
+    this.hideOutline();
   },
 
   /**
@@ -826,6 +784,7 @@ Highlighter.prototype = {
         this.handleClick(aEvent);
         break;
       case "mousemove":
+        this.brieflyIgnorePageEvents();
         this.handleMouseMove(aEvent);
         break;
       case "resize":
@@ -851,18 +810,46 @@ Highlighter.prototype = {
    */
   brieflyDisableTransitions: function Highlighter_brieflyDisableTransitions()
   {
-   if (this.transitionDisabler) {
-     this.chromeWin.clearTimeout(this.transitionDisabler);
-   } else {
-     this.veilContainer.setAttribute("disable-transitions", "true");
-     this.nodeInfo.container.setAttribute("disable-transitions", "true");
-   }
-   this.transitionDisabler =
-     this.chromeWin.setTimeout(function() {
-       this.veilContainer.removeAttribute("disable-transitions");
-       this.nodeInfo.container.removeAttribute("disable-transitions");
-       this.transitionDisabler = null;
-     }.bind(this), 500);
+    if (this.transitionDisabler) {
+      this.chromeWin.clearTimeout(this.transitionDisabler);
+    } else {
+      this.outline.setAttribute("disable-transitions", "true");
+      this.nodeInfo.container.setAttribute("disable-transitions", "true");
+    }
+    this.transitionDisabler =
+      this.chromeWin.setTimeout(function() {
+        this.outline.removeAttribute("disable-transitions");
+        this.nodeInfo.container.removeAttribute("disable-transitions");
+        this.transitionDisabler = null;
+      }.bind(this), 500);
+  },
+
+  /**
+   * Don't listen to page events while inspecting with the mouse.
+   */
+  brieflyIgnorePageEvents: function Highlighter_brieflyIgnorePageEvents()
+  {
+    // The goal is to keep smooth animations while inspecting.
+    // CSS Transitions might be interrupted because of a MozAfterPaint
+    // event that would triger an invalidateSize() call.
+    // So we don't listen to events that would trigger an invalidateSize()
+    // call.
+    //
+    // Side effect, zoom levels are not updated during this short period.
+    // It's very unlikely this would happen, but just in case, we call
+    // computeZoomFactor() when reattaching the events.
+    if (this.pageEventsMuter) {
+      this.chromeWin.clearTimeout(this.pageEventsMuter);
+    } else {
+      this.detachPageListeners();
+    }
+    this.pageEventsMuter =
+      this.chromeWin.setTimeout(function() {
+        this.attachPageListeners();
+        // Just in case the zoom level changed while ignoring the paint events
+        this.computeZoomFactor();
+        this.pageEventsMuter = null;
+      }.bind(this), 500);
   },
 
   /**
@@ -911,8 +898,7 @@ XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils)
 });
 
-XPCOMUtils.defineLazyGetter(Highlighter.prototype, "strings",
-  function () {
+XPCOMUtils.defineLazyGetter(Highlighter.prototype, "strings", function () {
     return Services.strings.createBundle(
             "chrome://browser/locale/devtools/inspector.properties");
-  });
+});

browser/devtools/highlighter/inspector.jsm

@@ -600,38 +600,6 @@ InspectorUI.prototype = {
     return !!(this.toolbar && !this.toolbar.hidden && this.highlighter);
   },
 
-  /**
-   * Toggle highlighter veil.
-   */
-  toggleVeil: function IUI_toggleVeil()
-  {
-    if (this.currentInspector._highlighterShowVeil) {
-      this.highlighter.hideVeil();
-      this.currentInspector._highlighterShowVeil = false;
-      Services.prefs.setBoolPref("devtools.inspector.highlighterShowVeil", false);
-    } else {
-      this.highlighter.showVeil();
-      this.currentInspector._highlighterShowVeil = true;
-      Services.prefs.setBoolPref("devtools.inspector.highlighterShowVeil", true);
-    }
-  },
-
-  /**
-   * Toggle highlighter infobar.
-   */
-  toggleInfobar: function IUI_toggleInfobar()
-  {
-    if (this.currentInspector._highlighterShowInfobar) {
-      this.highlighter.hideInfobar();
-      this.currentInspector._highlighterShowInfobar = false;
-      Services.prefs.setBoolPref("devtools.inspector.highlighterShowInfobar", false);
-    } else {
-      this.highlighter.showInfobar();
-      this.currentInspector._highlighterShowInfobar = true;
-      Services.prefs.setBoolPref("devtools.inspector.highlighterShowInfobar", true);
-    }
-  },
-
   /**
    * Return the default selection element for the inspected document.
    */
@@ -712,6 +680,11 @@ InspectorUI.prototype = {
       inspector: this._currentInspector,
     });
 
+    // Fade out the highlighter when needed
+    let deck = this.chromeDoc.getElementById("devtools-sidebar-deck");
+    deck.addEventListener("mouseenter", this, true);
+    deck.addEventListener("mouseleave", this, true);
+
     // Create UI for any sidebars registered with
     // InspectorUI.registerSidebar()
     for each (let tool in InspectorUI._registeredSidebars) {
@@ -770,12 +743,6 @@ InspectorUI.prototype = {
       inspector._activeSidebar =
         Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
-      inspector._highlighterShowVeil =
-        Services.prefs.getBoolPref("devtools.inspector.highlighterShowVeil");
-
-      inspector._highlighterShowInfobar =
-        Services.prefs.getBoolPref("devtools.inspector.highlighterShowInfobar");
-
       this.win.addEventListener("pagehide", this, true);
 
       this._currentInspector = inspector;
@@ -856,10 +823,12 @@ InspectorUI.prototype = {
       this._sidebar = null;
     }
 
-    if (this.highlighter) {
-      this.highlighter.destroy();
-      this.highlighter = null;
-    }
+    let deck = this.chromeDoc.getElementById("devtools-sidebar-deck");
+    deck.removeEventListener("mouseenter", this, true);
+    deck.removeEventListener("mouseleave", this, true);
+
+    this.highlighter.destroy();
+    this.highlighter = null;
 
     if (this.breadcrumbs) {
       this.breadcrumbs.destroy();
@@ -1060,23 +1029,6 @@ InspectorUI.prototype = {
       this._sidebar.show();
     }
 
-    let menu = this.chromeDoc.getElementById("inspectorToggleVeil");
-    if (this.currentInspector._highlighterShowVeil) {
-      menu.setAttribute("checked", "true");
-    } else {
-      menu.removeAttribute("checked");
-      this.highlighter.hideVeil();
-    }
-
-    menu = this.chromeDoc.getElementById("inspectorToggleInfobar");
-    if (this.currentInspector._highlighterShowInfobar) {
-      menu.setAttribute("checked", "true");
-      this.highlighter.showInfobar();
-    } else {
-      menu.removeAttribute("checked");
-      this.highlighter.hideInfobar();
-    }
-
     Services.obs.notifyObservers({wrappedJSObject: this},
                                  INSPECTOR_NOTIFICATIONS.OPENED, null);
   },
@@ -1146,6 +1098,12 @@ InspectorUI.prototype = {
                                                          false);
         }
         break;
+      case "mouseleave":
+        this.highlighter.show();
+        break;
+      case "mouseenter":
+        this.highlighter.hide();
+        break;
     }
   },
 

browser/devtools/highlighter/test/Makefile.in

@@ -15,6 +15,7 @@ _BROWSER_FILES = \
 		browser_inspector_initialization.js \
 		browser_inspector_treeSelection.js \
 		browser_inspector_highlighter.js \
+		browser_inspector_highlighter_autohide.js \
 		browser_inspector_iframeTest.js \
 		browser_inspector_scrolling.js \
 		browser_inspector_tab_switch.js \

browser/devtools/highlighter/test/browser_inspector_highlighter.js

@@ -68,7 +68,7 @@ function runSelectionTests(subject)
   is(subject.wrappedJSObject, InspectorUI,
      "InspectorUI accessible in the observer");
 
-  InspectorUI.highlighter.veilContainer.setAttribute("disable-transitions", "true");
+  InspectorUI.highlighter.outline.setAttribute("disable-transitions", "true");
 
   executeSoon(function() {
     InspectorUI.highlighter.addListener("nodeselected", performTestComparisons);
@@ -104,22 +104,25 @@ function finishTestComparisons()
   let divWidth = divDims.width;
   let divHeight = divDims.height;
 
-  // get dimensions of transparent veil box over element
-  let veilBoxDims = 
-    InspectorUI.highlighter.veilTransparentBox.getBoundingClientRect();
-  let veilBoxWidth = veilBoxDims.width;
-  let veilBoxHeight = veilBoxDims.height;
+  // get dimensions of the outline
+  let outlineDims = 
+    InspectorUI.highlighter.outline.getBoundingClientRect();
+  let outlineWidth = outlineDims.width;
+  let outlineHeight = outlineDims.height;
 
   // Disabled due to bug 716245
-  //is(veilBoxWidth, divWidth, "transparent veil box width matches dimensions of element (no zoom)");
-  //is(veilBoxHeight, divHeight, "transparent veil box height matches dimensions of element (no zoom)");
+  //is(outlineWidth, divWidth, "outline width matches dimensions of element (no zoom)");
+  //is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
 
   // zoom the page by a factor of 2
   let contentViewer = InspectorUI.browser.docShell.contentViewer
                              .QueryInterface(Ci.nsIMarkupDocumentViewer);
   contentViewer.fullZoom = 2;
 
-  executeSoon(function() {
+  // We wait at least 500ms to make sure the highlighter is not "mutting" the
+  // resize event
+
+  window.setTimeout(function() {
     // check what zoom factor we're at, should be 2
     let zoom = InspectorUI.highlighter.zoom;
     is(zoom, 2, "zoom is 2?");
@@ -129,18 +132,19 @@ function finishTestComparisons()
     let divWidth = divDims.width * zoom;
     let divHeight = divDims.height * zoom;
 
-    // now zoomed, get new dimensions of transparent veil box over element
-    let veilBoxDims = InspectorUI.highlighter.veilTransparentBox.getBoundingClientRect();
-    let veilBoxWidth = veilBoxDims.width;
-    let veilBoxHeight = veilBoxDims.height;
+    // now zoomed, get new dimensions the outline
+    let outlineDims = 
+      InspectorUI.highlighter.outline.getBoundingClientRect();
+    let outlineWidth = outlineDims.width;
+    let outlineHeight = outlineDims.height;
 
     // Disabled due to bug 716245
-    //is(veilBoxWidth, divWidth, "transparent veil box width matches width of element (2x zoom)");
-    //is(veilBoxHeight, divHeight, "transparent veil box height matches width of element (2x zoom)");
+    //is(outlineWidth, divWidth, "outline width matches dimensions of element (no zoom)");
+    //is(outlineHeight, divHeight, "outline height matches dimensions of element (no zoom)");
 
     doc = h1 = div = null;
     executeSoon(finishUp);
-  });
+  }, 500);
 }
 
 function finishUp() {

browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js

@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let doc;
+
+function createDocument() {
+  doc.body.innerHTML = '<h1>highlighter autohide test</h1>';
+
+  InspectorUI.openInspectorUI(doc.querySelector("h1"));
+
+  // Open the sidebar and wait for the default view (the rule view) to show.
+  InspectorUI.currentInspector.once("sidebaractivated-ruleview", inspectorRuleViewOpened);
+
+  InspectorUI.sidebar.show();
+  InspectorUI.sidebar.activatePanel("ruleview");
+}
+
+function inspectorRuleViewOpened() {
+  let deck = InspectorUI.sidebar._deck;
+
+  EventUtils.synthesizeMouse(InspectorUI.highlighter.highlighterContainer, 2, 2, {type: "mousemove"}, window);
+
+  executeSoon(function() {
+    ok(!InspectorUI.highlighter.hidden, "Outline visible (1)");
+
+    EventUtils.synthesizeMouse(deck, 10, 2, {type: "mouseover"}, window);
+
+    executeSoon(function() {
+      ok(InspectorUI.highlighter.hidden, "Outline not visible");
+
+      EventUtils.synthesizeMouse(deck, -10, 2, {type: "mouseover"}, window);
+
+      executeSoon(function() {
+        ok(!InspectorUI.highlighter.hidden, "Outline visible (2)");
+        finishTest();
+      });
+    });
+  });
+}
+
+function finishTest() {
+  InspectorUI.closeInspectorUI();
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test() {
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for highlighter";
+}
+
+

browser/devtools/highlighter/test/browser_inspector_invalidate.js

@@ -23,13 +23,12 @@ function runTest(subject)
   InspectorUI.highlighter.highlight(div);
 
   executeSoon(function() {
-    let veilBoxDims = InspectorUI.highlighter.veilTransparentBox;
-    is(veilBoxDims.style.width, "100px", "selection has the right width");
+    let outline = InspectorUI.highlighter.outline;
+    is(outline.style.width, "100px", "selection has the right width");
 
     div.style.width = "200px";
     setTimeout(function () {
-      let veilBoxDims = InspectorUI.highlighter.veilTransparentBox;
-      is(veilBoxDims.style.width, "200px", "selection updated");
+      is(outline.style.width, "200px", "selection updated");
       InspectorUI.closeInspectorUI();
       gBrowser.removeCurrentTab();
       finish();

browser/devtools/highlighter/test/head.js

@@ -23,8 +23,8 @@ registerCleanupFunction(clearUserPrefs);
 
 function isHighlighting()
 {
-  let veil = InspectorUI.highlighter.veilTransparentBox;
-  return !(veil.style.visibility == "hidden");
+  let outline = InspectorUI.highlighter.outline;
+  return !(outline.getAttribute("hidden") == "true");
 }
 
 function getHighlitNode()

browser/locales/en-US/chrome/browser/browser.dtd

@@ -255,16 +255,6 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY inspectorHTMLDelete.label          "Delete Node">
 <!ENTITY inspectorHTMLDelete.accesskey      "D">
 
-<!-- LOCALIZATION NOTE (inspectOptionButton.*): The menu in the Inspector
-  -  toolbar.  -->
-<!ENTITY inspectOptionButton.tooltiptext    "Inspector Options">
-
-<!-- LOCALIZATION NOTE: These are for the menu in the Inspector Toolbar -->
-<!ENTITY inspectorToggleVeil.label          "Dim The Page">
-<!ENTITY inspectorToggleVeil.accesskey      "D">
-<!ENTITY inspectorToggleInfobar.label       "Show Node Info">
-<!ENTITY inspectorToggleInfobar.accesskey   "S">
-
 <!-- LOCALIZATION NOTE (inspect3DViewButton.label): This button shows an
   -  alternate view for the Inspector, creating a 3D visualization of the
   -  webpage. -->

browser/themes/gnomestripe/browser.css

@@ -1973,19 +1973,15 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 /* Highlighter */
 
-.highlighter-veil {
-  background-color: rgba(25, 25, 25, 0.5);
-}
-
-#highlighter-veil-transparentbox {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
-  outline: 1px dashed rgba(255,255,255,0.5);
+#highlighter-outline {
+  box-shadow: 0 0 0 1px black;
+  outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-#highlighter-veil-container[locked] > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
-  box-shadow: 0 0 0 1px black;
-  outline-color: white;
+#highlighter-outline[locked]  {
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
+  outline-color: rgba(255,255,255,0.7);
 }
 
 /* Highlighter toolbar */
@@ -1999,18 +1995,6 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#inspector-option-toolbarbutton {
-  -moz-appearance: none;
-  -moz-margin-end: 6px;
-  list-style-image: url("chrome://browser/skin/devtools/inspector-option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  border: none;
-}
-
-#inspector-option-toolbarbutton[open] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
 #inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);

browser/themes/gnomestripe/jar.mn

@@ -161,7 +161,6 @@ browser.jar:
   skin/classic/browser/devtools/debugger-step-in.png   (devtools/debugger-step-in.png)
   skin/classic/browser/devtools/debugger-step-out.png  (devtools/debugger-step-out.png)
   skin/classic/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
-  skin/classic/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
   skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)

browser/themes/pinstripe/browser.css

@@ -2666,19 +2666,15 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* Highlighter */
 
-.highlighter-veil {
-  background-color: rgba(25, 25, 25, 0.5);
-}
-
-#highlighter-veil-transparentbox {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
-  outline: 1px dashed rgba(255,255,255,0.5);
+#highlighter-outline {
+  box-shadow: 0 0 0 1px black;
+  outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-#highlighter-veil-container[locked] > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
-  box-shadow: 0 0 0 1px black;
-  outline-color: white;
+#highlighter-outline[locked]  {
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
+  outline-color: rgba(255,255,255,0.7);
 }
 
 /* Highlighter toolbar */
@@ -2692,18 +2688,6 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#inspector-option-toolbarbutton {
-  -moz-appearance: none;
-  -moz-margin-end: 6px;
-  list-style-image: url("chrome://browser/skin/devtools/inspector-option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  border: none;
-}
-
-#inspector-option-toolbarbutton[open] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
 #inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);

browser/themes/pinstripe/jar.mn

@@ -202,7 +202,6 @@ browser.jar:
   skin/classic/browser/devtools/debugger-step-in.png        (devtools/debugger-step-in.png)
   skin/classic/browser/devtools/debugger-step-out.png       (devtools/debugger-step-out.png)
   skin/classic/browser/devtools/debugger-step-over.png      (devtools/debugger-step-over.png)
-  skin/classic/browser/devtools/inspector-option-icon.png   (devtools/inspector-option-icon.png)
   skin/classic/browser/devtools/responsive-se-resizer.png   (devtools/responsive-se-resizer.png)
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png   (devtools/responsive-background.png)

browser/themes/winstripe/browser.css

@@ -2652,19 +2652,15 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Highlighter */
 
-.highlighter-veil {
-  background-color: rgba(25, 25, 25, 0.5);
-}
-
-#highlighter-veil-transparentbox {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
-  outline: 1px dashed rgba(255,255,255,0.5);
+#highlighter-outline {
+  box-shadow: 0 0 0 1px black;
+  outline: 1px dashed white;
   outline-offset: -1px;
 }
 
-#highlighter-veil-container[locked] > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
-  box-shadow: 0 0 0 1px black;
-  outline-color: white;
+#highlighter-outline[locked]  {
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
+  outline-color: rgba(255,255,255,0.7);
 }
 
 /* Highlighter toolbar */
@@ -2678,18 +2674,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-#inspector-option-toolbarbutton {
-  -moz-appearance: none;
-  -moz-margin-end: 6px;
-  list-style-image: url("chrome://browser/skin/devtools/inspector-option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  border: none;
-}
-
-#inspector-option-toolbarbutton[open] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
 #inspector-toolbar,
 #developer-toolbar {
   border-top: 1px solid hsla(211,68%,6%,.65) !important;

browser/themes/winstripe/jar.mn

@@ -189,7 +189,6 @@ browser.jar:
         skin/classic/browser/devtools/debugger-step-in.png          (devtools/debugger-step-in.png)
         skin/classic/browser/devtools/debugger-step-out.png         (devtools/debugger-step-out.png)
         skin/classic/browser/devtools/debugger-step-over.png        (devtools/debugger-step-over.png)
-        skin/classic/browser/devtools/inspector-option-icon.png     (devtools/inspector-option-icon.png)
         skin/classic/browser/devtools/responsive-se-resizer.png     (devtools/responsive-se-resizer.png)
         skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
@@ -394,7 +393,6 @@ browser.jar:
         skin/classic/aero/browser/devtools/debugger-step-in.png      (devtools/debugger-step-in.png)
         skin/classic/aero/browser/devtools/debugger-step-out.png     (devtools/debugger-step-out.png)
         skin/classic/aero/browser/devtools/debugger-step-over.png    (devtools/debugger-step-over.png)
-        skin/classic/aero/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
         skin/classic/aero/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
         skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)