Bug 724509 - Add an Option menu in the Inspector Toolbar. r=dao r=dcamp

2012-05-11 16:54:47 +02:00 · 2012-05-11 16:54:47 +02:00 · 0acea15220
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@ -1051,6 +1051,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", false);
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@ -165,6 +165,10 @@
             oncommand="InspectorUI.copyOuterHTML();"/>
    <command id="Inspector:DeleteNode"
             oncommand="InspectorUI.deleteNode();"/>
+    <command id="Inspector:ToggleVeil"
+             oncommand="InspectorUI.toggleVeil();"/>
+    <command id="Inspector:ToggleInfobar"
+             oncommand="InspectorUI.toggleInfobar();"/>
  </commandset>

  <broadcasterset id="mainBroadcasterSet">
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -1019,6 +1019,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"/>
--- a/browser/base/content/highlighter.css
+++ b/browser/base/content/highlighter.css
@ -12,6 +12,11 @@
  overflow: hidden;
 }

+#highlighter-veil-container:not([dim]) > .highlighter-veil,
+#highlighter-veil-container:not([dim]) > hbox > .highlighter-veil {
+  visibility: hidden;
+}
+
 #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,
@ -101,6 +106,10 @@ html|*#highlighter-nodeinfobar-tagname {
  display: none;
 }

+#inspector-option-toolbarbutton > .toolbarbutton-menu-dropmarker {
+  display: none;
+}
+
 #inspector-layoutview-container > iframe {
  -moz-transition-property: height;
  -moz-transition-duration: 0.1s;
--- a/browser/devtools/highlighter/highlighter.jsm
+++ b/browser/devtools/highlighter/highlighter.jsm
@ -104,7 +104,13 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
 *   // Is a node highlightable.
 *   boolean isNodeHighlightable(aNode);
 *
- *   // Add/Remove lsiteners
+ *   // Show/hide the veil and the infobar
+ *   void showInfobar();
+ *   void hideInfobar();
+ *   void showVeil();
+ *   void hideVeil();
+ *
+ *   // Add/Remove listeners
 *   // @param aEvent - event name
 *   // @param aListener - function callback
 *   void addListener(aEvent, aListener);
@ -171,6 +177,7 @@ Highlighter.prototype = {
    // 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);

@ -367,6 +374,36 @@ Highlighter.prototype = {
    let nodeName = aNode.nodeName.toLowerCase();
    return !INSPECTOR_INVISIBLE_ELEMENTS[nodeName];
  },
+
+  /**
+   * Hide the veil
+   */
+   hideVeil: function Highlighter_hideVeil() {
+     this.veilContainer.removeAttribute("dim");
+   },
+
+  /**
+   * Show the veil
+   */
+   showVeil: function Highlighter_showVeil() {
+     this.veilContainer.setAttribute("dim", "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();
+    },
+
  /**
   * Build the veil:
   *
@ -383,7 +420,6 @@ Highlighter.prototype = {
   * @param nsIDOMElement aParent
   *        The container of the veil boxes.
   */
-
  buildVeil: function Highlighter_buildVeil(aParent)
  {
    // We will need to resize these boxes to surround a node.
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@ -383,7 +383,7 @@ InspectorUI.prototype = {
  /**
   * Toggle the TreePanel.
   */
-  toggleHTMLPanel: function TP_toggle()
+  toggleHTMLPanel: function TP_toggleHTMLPanel()
  {
    if (this.treePanel.isOpen()) {
      this.treePanel.close();
@ -406,6 +406,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.
   */
@ -502,7 +534,7 @@ InspectorUI.prototype = {
    // is limited to some specific elements and has moved the focus somewhere else.
    // So in this case, we want to focus the content window.
    // See: https://developer.mozilla.org/en/XUL_Tutorial/Focus_and_Selection#Platform_Specific_Behaviors
-    if (!this.toolbar.querySelector("-moz-focusring")) {
+    if (!this.toolbar.querySelector(":-moz-focusring")) {
      this.win.focus();
    }

@ -543,6 +575,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;
@ -849,6 +887,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);
  },
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -236,6 +236,16 @@ can reach it easily. -->
 <!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. -->
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@ -2012,6 +2012,18 @@ panel[dimmed="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 {
  border-top: 1px solid hsla(210, 8%, 5%, .65);
 }
@ -2479,3 +2491,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
 .gcli-in-closebrace {
  color: hsl(0,0%,80%);
 }
+
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
--- a/browser/themes/gnomestripe/devtools/inspector-option-icon.png
+++ b/browser/themes/gnomestripe/devtools/inspector-option-icon.png
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@ -146,6 +146,7 @@ browser.jar:
  skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
  skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
  skin/classic/browser/devtools/layout-buttons.png    (devtools/layout-buttons.png)
+  skin/classic/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
 #ifdef MOZ_SERVICES_SYNC
  skin/classic/browser/sync-16-throbber.png
  skin/classic/browser/sync-16.png
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@ -2741,6 +2741,18 @@ panel[dimmed="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 {
  border-top: 1px solid hsla(210, 8%, 5%, .65);
  padding-top: 4px;
@ -3214,3 +3226,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
 .gcli-in-closebrace {
  color: hsl(0,0%,80%);
 }
+
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
--- a/browser/themes/pinstripe/devtools/inspector-option-icon.png
+++ b/browser/themes/pinstripe/devtools/inspector-option-icon.png
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@ -187,6 +187,7 @@ browser.jar:
  skin/classic/browser/devtools/layout-background.png       (devtools/layout-background.png)
  skin/classic/browser/devtools/layoutview.css              (devtools/layoutview.css)
  skin/classic/browser/devtools/layout-buttons.png          (devtools/layout-buttons.png)
+  skin/classic/browser/devtools/inspector-option-icon.png     (devtools/inspector-option-icon.png)
 #ifdef MOZ_SERVICES_SYNC
  skin/classic/browser/sync-throbber.png
  skin/classic/browser/sync-16.png
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@ -2678,6 +2678,18 @@ panel[dimmed="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 {
  border-top: 1px solid hsla(211,68%,6%,.65) !important;
 }
@ -3146,3 +3158,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
 .gcli-in-closebrace {
  color: hsl(0,0%,80%);
 }
+
+/* Highlight toolbar - Option menu */
+
+#inspector-option-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline-offset: -2px;
+}
--- a/browser/themes/winstripe/devtools/inspector-option-icon.png
+++ b/browser/themes/winstripe/devtools/inspector-option-icon.png
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@ -173,6 +173,7 @@ browser.jar:
        skin/classic/browser/devtools/layout-background.png         (devtools/layout-background.png)
        skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
        skin/classic/browser/devtools/layout-buttons.png            (devtools/layout-buttons.png)
+        skin/classic/browser/devtools/inspector-option-icon.png       (devtools/inspector-option-icon.png)
 #ifdef MOZ_SERVICES_SYNC
        skin/classic/browser/sync-throbber.png
        skin/classic/browser/sync-16.png
@ -361,6 +362,7 @@ browser.jar:
        skin/classic/aero/browser/devtools/layout-background.png     (devtools/layout-background.png)
        skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
        skin/classic/aero/browser/devtools/layout-buttons.png        (devtools/layout-buttons.png)
+        skin/classic/aera/browser/devtools/inspector-option-icon.png   (devtools/inspector-option-icon.png)
 #ifdef MOZ_SERVICES_SYNC
        skin/classic/aero/browser/sync-throbber.png
        skin/classic/aero/browser/sync-16.png