Backed out Bug 770818 (highlighter v3) for test failures.

browser/app/profile/firefox.js

@@ -1007,6 +1007,8 @@ 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,6 +1106,24 @@
                      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,27 +12,33 @@
   left: 0;
 }
 
-#highlighter-outline-container {
+#highlighter-veil-container {
   overflow: hidden;
-  position: relative;
 }
 
-#highlighter-outline {
-  position: absolute;
+#highlighter-veil-container:not([dim]) > .highlighter-veil,
+#highlighter-veil-container:not([dim]) > hbox > .highlighter-veil {
+  visibility: hidden;
 }
 
-#highlighter-outline[hidden] {
-  opacity: 0;
-  pointer-events: none;
-  display: -moz-box;
-}
-
-#highlighter-outline:not([disable-transitions]) {
-  transition-property: opacity, top, left, width, height;
+#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;
   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;
 }
@@ -46,15 +52,8 @@
   max-width: 95%;
 }
 
-#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;
+#highlighter-nodeinfobar-container:not([disable-transitions]) {
+  transition-property: 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 outline and the infobar
+ *   // Show/hide the veil and the infobar
  *   void showInfobar();
  *   void hideInfobar();
- *   void showOutline();
- *   void hideOutline();
+ *   void showVeil();
+ *   void hideVeil();
  *
  *   // Add/Remove listeners
  *   // @param aEvent - event name
@@ -86,24 +86,14 @@ 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">
- *    <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>
+ *
+ *   <stack id="highlighter-container">
+ *     <vbox id="highlighter-veil-container">...</vbox>
+ *     <box id="highlighter-controls>...</vbox>
+ *   </stack>
  *
  */
 
@@ -134,28 +124,26 @@ Highlighter.prototype = {
     this.highlighterContainer = this.chromeDoc.createElement("stack");
     this.highlighterContainer.id = "highlighter-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";
+    this.veilContainer = this.chromeDoc.createElement("vbox");
+    this.veilContainer.id = "highlighter-veil-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(outlineContainer);
+    this.highlighterContainer.appendChild(this.veilContainer);
     this.highlighterContainer.appendChild(controlsBox);
 
     stack.appendChild(this.highlighterContainer);
 
-    this.showOutline();
+    // The veil will make the whole page darker except
+    // for the region of the selected box.
+    this.buildVeil(this.veilContainer);
+    this.showVeil();
 
     this.buildInfobar(controlsBox);
 
     this.transitionDisabler = null;
-    this.pageEventsMuter = null;
 
     this.computeZoomFactor();
     this.unlock();
@@ -171,12 +159,15 @@ 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.outline = null;
+    this.veilTopBox = null;
+    this.veilLeftBox = null;
+    this.veilMiddleBox = null;
+    this.veilTransparentBox = null;
+    this.veilContainer = null;
     this.node = null;
     this.nodeInfo = null;
     this.highlighterContainer.parentNode.removeChild(this.highlighterContainer);
@@ -192,7 +183,7 @@ Highlighter.prototype = {
   },
 
   /**
-   * Show the outline, and select a node.
+   * Show the veil, 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.
    *
@@ -277,21 +268,20 @@ Highlighter.prototype = {
    */
   show: function() {
     if (!this.hidden) return;
-    this.showOutline();
-    this.showInfobar();
-    this.computeZoomFactor();
+    this.veilContainer.removeAttribute("hidden");
+    this.nodeInfo.container.removeAttribute("hidden");
     this.attachPageListeners();
     this.invalidateSize();
     this.hidden = false;
   },
 
   /**
-   * Hide the highlighter, the outline and the infobar.
+   * Hide the highlighter, the veil and the infobar.
    */
   hide: function() {
     if (this.hidden) return;
-    this.hideOutline();
-    this.hideInfobar();
+    this.veilContainer.setAttribute("hidden", "true");
+    this.nodeInfo.container.setAttribute("hidden", "true");
     this.detachPageListeners();
     this.hidden = true;
   },
@@ -310,7 +300,7 @@ Highlighter.prototype = {
    */
   lock: function() {
     if (this.locked === true) return;
-    this.outline.setAttribute("locked", "true");
+    this.veilContainer.setAttribute("locked", "true");
     this.nodeInfo.container.setAttribute("locked", "true");
     this.detachMouseListeners();
     this.locked = true;
@@ -323,11 +313,10 @@ Highlighter.prototype = {
    */
   unlock: function() {
     if (this.locked === false) return;
-    this.outline.removeAttribute("locked");
+    this.veilContainer.removeAttribute("locked");
     this.nodeInfo.container.removeAttribute("locked");
     this.attachMouseListeners();
     this.locked = false;
-    this.showOutline();
     this.emitEvent("unlocked");
   },
 
@@ -352,36 +341,88 @@ Highlighter.prototype = {
   },
 
   /**
-   * Hide the infobar
+   * Hide the veil
    */
-   hideInfobar: function Highlighter_hideInfobar() {
-     this.nodeInfo.container.setAttribute("force-transitions", "true");
-     this.nodeInfo.container.setAttribute("hidden", "true");
+   hideVeil: function Highlighter_hideVeil() {
+     this.veilContainer.removeAttribute("dim");
    },
 
   /**
-   * Show the infobar
+   * Show the veil
    */
-   showInfobar: function Highlighter_showInfobar() {
-     this.nodeInfo.container.removeAttribute("hidden");
-     this.moveInfobar();
-     this.nodeInfo.container.removeAttribute("force-transitions");
+   showVeil: function Highlighter_showVeil() {
+     this.veilContainer.setAttribute("dim", "true");
    },
 
-  /**
-   * Hide the outline
-   */
-   hideOutline: function Highlighter_hideOutline() {
-     this.outline.setAttribute("hidden", "true");
-   },
+   /**
+    * 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();
+    },
 
   /**
-   * Show the outline
+   * 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.
    */
-   showOutline: function Highlighter_showOutline() {
-     if (this._highlighting)
-       this.outline.removeAttribute("hidden");
-   },
+  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);
+  },
 
   /**
    * Build the node Infobar.
@@ -563,15 +604,14 @@ Highlighter.prototype = {
     if (aRectScaled.left >= 0 && aRectScaled.top >= 0 &&
         aRectScaled.width > 0 && aRectScaled.height > 0) {
 
-      this.showOutline();
+      this.veilTransparentBox.style.visibility = "visible";
 
       // The bottom div and the right div are flexibles (flex=1).
       // We don't need to resize them.
-      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.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";
 
       this._highlighting = true;
     } else {
@@ -590,7 +630,9 @@ Highlighter.prototype = {
   unhighlight: function Highlighter_unhighlight()
   {
     this._highlighting = false;
-    this.hideOutline();
+    this.veilMiddleBox.style.height = 0;
+    this.veilTransparentBox.style.width = 0;
+    this.veilTransparentBox.style.visibility = "hidden";
   },
 
   /**
@@ -784,7 +826,6 @@ Highlighter.prototype = {
         this.handleClick(aEvent);
         break;
       case "mousemove":
-        this.brieflyIgnorePageEvents();
         this.handleMouseMove(aEvent);
         break;
       case "resize":
@@ -810,46 +851,18 @@ Highlighter.prototype = {
    */
   brieflyDisableTransitions: function Highlighter_brieflyDisableTransitions()
   {
-    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);
+   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);
   },
 
   /**
@@ -898,7 +911,8 @@ 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,6 +600,38 @@ 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.
    */
@@ -680,11 +712,6 @@ 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) {
@@ -743,6 +770,12 @@ 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;
@@ -823,12 +856,10 @@ InspectorUI.prototype = {
       this._sidebar = 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.highlighter) {
+      this.highlighter.destroy();
+      this.highlighter = null;
+    }
 
     if (this.breadcrumbs) {
       this.breadcrumbs.destroy();
@@ -1029,6 +1060,23 @@ 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);
   },
@@ -1098,12 +1146,6 @@ InspectorUI.prototype = {
                                                          false);
         }
         break;
-      case "mouseleave":
-        this.highlighter.show();
-        break;
-      case "mouseenter":
-        this.highlighter.hide();
-        break;
     }
   },
 

browser/devtools/highlighter/test/Makefile.in

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

browser/devtools/highlighter/test/browser_inspector_highlighter_autohide.js

@@ -1,59 +0,0 @@
-/* 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,12 +23,13 @@ function runTest(subject)
   InspectorUI.highlighter.highlight(div);
 
   executeSoon(function() {
-    let outline = InspectorUI.highlighter.outline;
-    is(outline.style.width, "100px", "selection has the right width");
+    let veilBoxDims = InspectorUI.highlighter.veilTransparentBox;
+    is(veilBoxDims.style.width, "100px", "selection has the right width");
 
     div.style.width = "200px";
     setTimeout(function () {
-      is(outline.style.width, "200px", "selection updated");
+      let veilBoxDims = InspectorUI.highlighter.veilTransparentBox;
+      is(veilBoxDims.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 outline = InspectorUI.highlighter.outline;
-  return !(outline.getAttribute("hidden") == "true");
+  let veil = InspectorUI.highlighter.veilTransparentBox;
+  return !(veil.style.visibility == "hidden");
 }
 
 function getHighlitNode()

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

@@ -255,6 +255,16 @@ 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,15 +1973,19 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 /* Highlighter */
 
-#highlighter-outline {
-  box-shadow: 0 0 0 1px black;
-  outline: 1px dashed white;
+.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);
   outline-offset: -1px;
 }
 
-#highlighter-outline[locked]  {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
-  outline-color: rgba(255,255,255,0.7);
+#highlighter-veil-container[locked] > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
+  box-shadow: 0 0 0 1px black;
+  outline-color: white;
 }
 
 /* Highlighter toolbar */
@@ -1995,6 +1999,18 @@ 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,6 +161,7 @@ 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,15 +2666,19 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
 
 /* Highlighter */
 
-#highlighter-outline {
-  box-shadow: 0 0 0 1px black;
-  outline: 1px dashed white;
+.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);
   outline-offset: -1px;
 }
 
-#highlighter-outline[locked]  {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
-  outline-color: rgba(255,255,255,0.7);
+#highlighter-veil-container[locked] > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
+  box-shadow: 0 0 0 1px black;
+  outline-color: white;
 }
 
 /* Highlighter toolbar */
@@ -2688,6 +2692,18 @@ 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,6 +202,7 @@ 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,15 +2652,19 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Highlighter */
 
-#highlighter-outline {
-  box-shadow: 0 0 0 1px black;
-  outline: 1px dashed white;
+.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);
   outline-offset: -1px;
 }
 
-#highlighter-outline[locked]  {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
-  outline-color: rgba(255,255,255,0.7);
+#highlighter-veil-container[locked] > #highlighter-veil-middlebox > #highlighter-veil-transparentbox {
+  box-shadow: 0 0 0 1px black;
+  outline-color: white;
 }
 
 /* Highlighter toolbar */
@@ -2674,6 +2678,18 @@ 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,6 +189,7 @@ 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)
@@ -393,6 +394,7 @@ 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)