Bug 717916 - Add an Inspect button and a node menu to the infobar; r=dao,dcamp

2012-04-04 20:40:48 +02:00 · 2012-04-04 20:40:48 +02:00 · 769e437e5f
--- a/browser/base/content/highlighter.css
+++ b/browser/base/content/highlighter.css
@ -49,20 +49,29 @@
  -moz-transition-timing-function: linear;
 }

-#highlighter-nodeinfobar {
-  display: block;
-  white-space: nowrap;
-  direction: ltr;
+#highlighter-nodeinfobar-text {
  overflow: hidden;
+  white-space: nowrap;
  text-overflow: ellipsis;
+  direction: ltr;
 }

-#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar {
+.highlighter-nodeinfobar-button > .toolbarbutton-text {
+  display: none;
+}
+
+#highlighter-nodeinfobar-container:not([locked]):not(:hover) > #highlighter-nodeinfobar > .highlighter-nodeinfobar-button {
+  visibility: hidden;
+}
+
+#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar,
+#highlighter-nodeinfobar-container:not([locked]):hover > #highlighter-nodeinfobar {
  pointer-events: auto;
 }

 html|*#highlighter-nodeinfobar-id,
 html|*#highlighter-nodeinfobar-classes,
+html|*#highlighter-nodeinfobar-pseudo-classes,
 html|*#highlighter-nodeinfobar-tagname {
  -moz-user-select: text;
  cursor: text;
--- a/browser/devtools/highlighter/highlighter.jsm
+++ b/browser/devtools/highlighter/highlighter.jsm
@ -46,6 +46,7 @@ const Cu = Components.utils;
 const Cc = Components.classes;
 const Ci = Components.interfaces;

+Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");

@ -77,7 +78,7 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
 *
 *   // Constructor and destructor.
 *   // @param aWindow - browser.xul window.
- *   Highlighter(aWindow); 
+ *   Highlighter(aWindow);
 *   void destroy();
 *
 *   // Highlight a node.
@ -253,7 +254,7 @@ Highlighter.prototype = {
   * @param aPseudo - The pseudo-class to toggle, e.g. ":hover".
   */
  pseudoClassLockToggled: function Highlighter_pseudoClassLockToggled(aPseudo)
-  {  
+  {
    this.emitEvent("pseudoclasstoggled", [aPseudo]);
    this.updateInfobar();
  },
@ -430,9 +431,14 @@ Highlighter.prototype = {
   * <box id="highlighter-nodeinfobar-container">
   *   <box id="Highlighter-nodeinfobar-arrow-top"/>
   *   <hbox id="highlighter-nodeinfobar">
-   *     <xhtml:span id="highlighter-nodeinfobar-tagname"/>
-   *     <xhtml:span id="highlighter-nodeinfobar-id"/>
-   *     <xhtml:span id="highlighter-nodeinfobar-classes"/>
+   *     <toolbarbutton class="highlighter-nodeinfobar-button" id="highlighter-nodeinfobar-inspectbutton"/>
+   *     <hbox id="highlighter-nodeinfobar-text">
+   *       <xhtml:span id="highlighter-nodeinfobar-tagname"/>
+   *       <xhtml:span id="highlighter-nodeinfobar-id"/>
+   *       <xhtml:span id="highlighter-nodeinfobar-classes"/>
+   *       <xhtml:span id="highlighter-nodeinfobar-pseudo-classes"/>
+   *     </hbox>
+   *     <toolbarbutton class="highlighter-nodeinfobar-button" id="highlighter-nodeinfobar-menu"/>
   *   </hbox>
   *   <box id="Highlighter-nodeinfobar-arrow-bottom"/>
   * </box>
@ -466,17 +472,52 @@ Highlighter.prototype = {

    let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
    classesBox.id = "highlighter-nodeinfobar-classes";
-    
+
    let pseudoClassesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
    pseudoClassesBox.id = "highlighter-nodeinfobar-pseudo-classes";
-    
+
    // Add some content to force a better boundingClientRect down below.
    pseudoClassesBox.textContent = "&nbsp;";

-    nodeInfobar.appendChild(tagNameLabel);
-    nodeInfobar.appendChild(idLabel);
-    nodeInfobar.appendChild(classesBox);
-    nodeInfobar.appendChild(pseudoClassesBox);
+    // Create buttons
+
+    let inspect = this.chromeDoc.createElement("toolbarbutton");
+    inspect.id = "highlighter-nodeinfobar-inspectbutton";
+    inspect.className = "highlighter-nodeinfobar-button"
+    let toolbarInspectButton =
+      this.chromeDoc.getElementById("inspector-inspect-toolbutton");
+    inspect.setAttribute("tooltiptext",
+                         toolbarInspectButton.getAttribute("tooltiptext"));
+    inspect.setAttribute("command", "Inspector:Inspect");
+
+    let nodemenu = this.chromeDoc.createElement("toolbarbutton");
+    nodemenu.setAttribute("type", "menu");
+    nodemenu.id = "highlighter-nodeinfobar-menu";
+    nodemenu.className = "highlighter-nodeinfobar-button"
+    nodemenu.setAttribute("tooltiptext",
+                          this.strings.GetStringFromName("nodeMenu.tooltiptext"));
+
+    let menu = this.chromeDoc.getElementById("inspector-node-popup");
+    menu = menu.cloneNode(true);
+    menu.id = "highlighter-node-menu";
+
+    nodemenu.appendChild(menu);
+
+    // <hbox id="highlighter-nodeinfobar-text"/>
+    let texthbox = this.chromeDoc.createElement("hbox");
+    texthbox.id = "highlighter-nodeinfobar-text";
+    texthbox.setAttribute("align", "center");
+    texthbox.setAttribute("flex", "1");
+
+    texthbox.appendChild(tagNameLabel);
+    texthbox.appendChild(idLabel);
+    texthbox.appendChild(classesBox);
+    texthbox.appendChild(pseudoClassesBox);
+
+    nodeInfobar.appendChild(inspect);
+    nodeInfobar.appendChild(texthbox);
+    nodeInfobar.appendChild(nodemenu);
+
    container.appendChild(arrowBoxTop);
    container.appendChild(nodeInfobar);
    container.appendChild(arrowBoxBottom);
@ -511,13 +552,13 @@ Highlighter.prototype = {

    let popupSet = this.chromeDoc.getElementById("mainPopupSet");
    popupSet.appendChild(menu);
-    
+
    let fragment = this.buildPseudoClassMenu();
    menu.appendChild(fragment);

    menu.openPopup(this.nodeInfo.pseudoClassesBox, "end_before", 0, 0, true, false);
-  },  
-  
+  },
+
  /**
   * Create the menuitems for toggling the selection's pseudo-class state
   *
@ -887,3 +928,9 @@ Highlighter.prototype = {
 XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils)
 });
+
+XPCOMUtils.defineLazyGetter(Highlighter.prototype, "strings",
+  function () {
+    return Services.strings.createBundle(
+            "chrome://browser/locale/devtools/inspector.properties");
+  });
--- a/browser/locales/en-US/chrome/browser/devtools/inspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/inspector.properties
@ -32,3 +32,9 @@ ruleView.tooltiptext=View and Edit CSS
 # "Return" key # changes that state. %S is the keyboard shortcut (VK_RETURN in
 # chrome://global/locale/keys.properties).
 inspectButton.tooltiptext=Select element with mouse (%S)
+
+
+# LOCALIZATION NOTE (nodeMenu.tooltiptext)
+# This menu appears in the Infobar (on top of the highlighted node) once
+# the node is selected.
+nodeMenu.tooltiptext=Node operations
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@ -2027,8 +2027,21 @@ panel[dimmed="true"] {

 /* Highlighter - Node Infobar */

+#highlighter-nodeinfobar {
+  color: hsl(200, 100%, 65%);
+  border: 1px solid hsla(210, 19%, 63%, .5);
+  border-radius: 3px;
+  background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
+}
+
 /* Highlighter - Node Infobar - text */

+#highlighter-nodeinfobar-text {
+  /* 100% - size of the buttons and margins */
+  max-width: -moz-calc(100% - 2 * (26px + 6px));
+  padding-bottom: 1px;
+}
+
 html|*#highlighter-nodeinfobar-tagname {
  color: white;
 }
@ -2041,16 +2054,52 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
  color: hsl(20, 100%, 70%);
 }

-/* Highlighter - Node Infobar - box & arrow */
+/* Highlighter - Node Infobar - buttons */

-#highlighter-nodeinfobar {
-  color: hsl(200, 100%, 65%);
-  border: 1px solid hsla(210, 19%, 63%, .5);
-  border-radius: 3px;
-  padding: 8px 16px;
-  background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
+.highlighter-nodeinfobar-button {
+  -moz-appearance: none;
+  border: 0 solid hsla(210,8%,5%,.45);
+  padding: 0;
+  width: 26px;
+  min-height: 26px;
 }

+#highlighter-nodeinfobar-inspectbutton {
+  -moz-border-end-width: 1px;
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
+  -moz-margin-end: 6px;
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
+}
+
+#highlighter-nodeinfobar-inspectbutton:active:hover,
+#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#highlighter-nodeinfobar-menu {
+  -moz-border-start-width: 1px;
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
+  -moz-margin-start: 6px;
+}
+
+#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
+}
+
+#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+  -moz-margin-start: -1px;
+}
+
+/* Highlighter - Node Infobar - box & arrow */
+
 .highlighter-nodeinfobar-arrow {
  width: 14px;
  height: 14px;
--- a/browser/themes/gnomestripe/devtools/dropmarker.png
+++ b/browser/themes/gnomestripe/devtools/dropmarker.png
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@ -131,6 +131,7 @@ browser.jar:
  skin/classic/browser/devtools/itemArrow-rtl.png     (devtools/itemArrow-rtl.png)
  skin/classic/browser/devtools/itemArrow-ltr.png     (devtools/itemArrow-ltr.png)
  skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
+  skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.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
@ -2772,8 +2772,21 @@ panel[dimmed="true"] {

 /* Highlighter - Node Infobar */

+#highlighter-nodeinfobar {
+  color: hsl(200, 100%, 65%);
+  border: 1px solid hsla(210, 19%, 63%, .5);
+  border-radius: 3px;
+  background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
+}
+
 /* Highlighter - Node Infobar - text */

+#highlighter-nodeinfobar-text {
+  /* 100% - size of the buttons + margins */
+  max-width: -moz-calc(100% - 2 * (26px + 6px));
+  padding-bottom: 1px;
+}
+
 html|*#highlighter-nodeinfobar-tagname {
  color: white;
 }
@ -2786,16 +2799,52 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
  color: hsl(20, 100%, 70%);
 }

-/* Highlighter - Node Infobar - box & arrow */
+/* Highlighter - Node Infobar - buttons */

-#highlighter-nodeinfobar {
-  color: hsl(200, 100%, 65%);
-  border: 1px solid hsla(210, 19%, 63%, .5);
-  border-radius: 3px;
-  padding: 8px 16px;
-  background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
+.highlighter-nodeinfobar-button {
+  -moz-appearance: none;
+  border: 0 solid hsla(210,8%,5%,.45);
+  padding: 0;
+  width: 26px;
+  min-height: 26px;
 }

+#highlighter-nodeinfobar-inspectbutton {
+  -moz-border-end-width: 1px;
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
+  -moz-margin-end: 6px;
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
+}
+
+#highlighter-nodeinfobar-inspectbutton:active:hover,
+#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#highlighter-nodeinfobar-menu {
+  -moz-border-start-width: 1px;
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
+  -moz-margin-start: 6px;
+}
+
+#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
+}
+
+#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+  -moz-margin-start: -1px;
+}
+
+/* Highlighter - Node Infobar - box & arrow */
+
 .highlighter-nodeinfobar-arrow {
  width: 14px;
  height: 14px;
--- a/browser/themes/pinstripe/devtools/dropmarker.png
+++ b/browser/themes/pinstripe/devtools/dropmarker.png
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@ -172,6 +172,7 @@ browser.jar:
  skin/classic/browser/devtools/itemArrow-ltr.png           (devtools/itemArrow-ltr.png)
  skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
  skin/classic/browser/devtools/inspect-button.png          (devtools/inspect-button.png)
+  skin/classic/browser/devtools/dropmarker.png              (devtools/dropmarker.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
@ -2694,8 +2694,21 @@ panel[dimmed="true"] {

 /* Highlighter - Node Infobar */

+#highlighter-nodeinfobar {
+  color: hsl(200, 100%, 65%);
+  border: 1px solid hsla(210, 19%, 63%, .5);
+  border-radius: 3px;
+  background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
+}
+
 /* Highlighter - Node Infobar - text */

+#highlighter-nodeinfobar-text {
+  /* 100% - size of the buttons and margins */
+  max-width: -moz-calc(100% - 2 * (26px + 6px));
+  padding-bottom: 1px;
+}
+
 html|*#highlighter-nodeinfobar-tagname {
  color: white;
 }
@ -2708,16 +2721,52 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
  color: hsl(20, 100%, 70%);
 }

-/* Highlighter - Node Infobar - box & arrow */
+/* Highlighter - Node Infobar - buttons */

-#highlighter-nodeinfobar {
-  color: hsl(200, 100%, 65%);
-  border: 1px solid hsla(210, 19%, 63%, .5);
-  border-radius: 3px;
-  padding: 8px 16px;
-  background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
+.highlighter-nodeinfobar-button {
+  -moz-appearance: none;
+  border: 0 solid hsla(210,8%,5%,.45);
+  padding: 0;
+  width: 26px;
+  min-height: 26px;
 }

+#highlighter-nodeinfobar-inspectbutton {
+  -moz-border-end-width: 1px;
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
+  -moz-margin-end: 6px;
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
+}
+
+#highlighter-nodeinfobar-inspectbutton:active:hover,
+#highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
+#highlighter-nodeinfobar-menu {
+  -moz-border-start-width: 1px;
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
+  -moz-margin-start: 6px;
+}
+
+#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
+}
+
+#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
+  -moz-box-align: center;
+  -moz-margin-start: -1px;
+}
+
+/* Highlighter - Node Infobar - box & arrow */
+
 .highlighter-nodeinfobar-arrow {
  width: 14px;
  height: 14px;
--- a/browser/themes/winstripe/devtools/dropmarker.png
+++ b/browser/themes/winstripe/devtools/dropmarker.png
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@ -158,6 +158,7 @@ browser.jar:
        skin/classic/browser/devtools/itemArrow-rtl.png             (devtools/itemArrow-rtl.png)
        skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
        skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
+        skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
 #ifdef MOZ_SERVICES_SYNC
        skin/classic/browser/sync-throbber.png
        skin/classic/browser/sync-16.png
@ -331,6 +332,7 @@ browser.jar:
        skin/classic/aero/browser/devtools/itemArrow-rtl.png         (devtools/itemArrow-rtl.png)
        skin/classic/aero/browser/devtools/itemArrow-ltr.png         (devtools/itemArrow-ltr.png)
        skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
+        skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)
 #ifdef MOZ_SERVICES_SYNC
        skin/classic/aero/browser/sync-throbber.png
        skin/classic/aero/browser/sync-16.png