Bug 717923 - Use an icon for the inspect button; r=dao

browser/base/content/browser.xul

@@ -1003,8 +1003,6 @@
 #endif
       <toolbarbutton id="inspector-inspect-toolbutton"
                      class="devtools-toolbarbutton"
-                     label="&inspectButton.label;"
-                     accesskey="&inspectButton.accesskey;"
                      command="Inspector:Inspect"/>
       <toolbarbutton id="inspector-treepanel-toolbutton"
                      class="devtools-toolbarbutton"

browser/base/content/highlighter.css

@@ -87,3 +87,7 @@ html|*#highlighter-nodeinfobar-tagname {
 html|*#highlighter-nodeinfobar-tagname {
   text-transform: lowercase;
 }
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}

browser/devtools/highlighter/inspector.jsm

@@ -104,6 +104,15 @@ function InspectorUI(aWindow)
   this.toolEvents = {};
   this.store = new InspectorStore();
   this.INSPECTOR_NOTIFICATIONS = INSPECTOR_NOTIFICATIONS;
+
+  // Set the tooltip of the inspect button.
+  let keysbundle = Services.strings.createBundle(
+    "chrome://global/locale/keys.properties");
+  let returnString = keysbundle.GetStringFromName("VK_RETURN");
+  let tooltip = this.strings.formatStringFromName("inspectButton.tooltiptext",
+    [returnString], 1);
+  let button = this.chromeDoc.getElementById("inspector-inspect-toolbutton");
+  button.setAttribute("tooltiptext", tooltip);
 }
 
 InspectorUI.prototype = {

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

@@ -213,8 +213,6 @@ can reach it easily. -->
 <!ENTITY scratchpad.keycode           "VK_F4">
 <!ENTITY scratchpad.keytext           "F4">
 
-<!ENTITY inspectButton.label            "Inspect">
-<!ENTITY inspectButton.accesskey        "I">
 <!ENTITY inspectCloseButton.tooltiptext "Close Inspector">
 
 <!ENTITY inspectorHTMLCopyInner.label       "Copy Inner HTML">

browser/locales/en-US/chrome/browser/devtools/inspector.properties

@@ -25,3 +25,10 @@ breadcrumbs.siblings=Siblings
 ruleView.label=Rules
 ruleView.accesskey=R
 ruleView.tooltiptext=View and Edit CSS
+
+# LOCALIZATION NOTE (inspectButton.tooltiptext):
+# This button appears in the Inspector Toolbar. inspectButton is stateful,
+# if it's pressed users can select an element with the mouse. Pressing the
+# "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)

browser/themes/gnomestripe/browser.css

@@ -1988,6 +1988,15 @@ panel[dimmed="true"] {
 
 /* Highlighter toolbar */
 
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
 #inspector-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
 }

browser/themes/gnomestripe/devtools/common.css

@@ -57,6 +57,10 @@
   margin: 0 3px;
 }
 
+.devtools-toolbarbutton:not([label]) {
+  min-width: 32px;
+}
+
 .devtools-toolbarbutton:not([checked]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));

browser/themes/gnomestripe/jar.mn

@@ -129,6 +129,7 @@ browser.jar:
   skin/classic/browser/devtools/itemToggle.png        (devtools/itemToggle.png)
   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)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png

browser/themes/pinstripe/browser.css

@@ -2721,6 +2721,15 @@ panel[dimmed="true"] {
 
 /* Highlighter toolbar */
 
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
 #inspector-toolbar {
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   padding-top: 4px;

browser/themes/pinstripe/devtools/common.css

@@ -62,6 +62,10 @@
   margin: 1px 6px;
 }
 
+.devtools-toolbarbutton:not([label]) {
+  min-width: 32px;
+}
+
 .devtools-toolbarbutton:not([checked]):hover:active {
   border-color: hsla(210,8%,5%,.6);
   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));

browser/themes/pinstripe/jar.mn

@@ -170,6 +170,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/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
+  skin/classic/browser/devtools/inspect-button.png          (devtools/inspect-button.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png

browser/themes/winstripe/browser.css

@@ -2683,6 +2683,15 @@ panel[dimmed="true"] {
 
 /* Highlighter toolbar */
 
+#inspector-inspect-toolbutton {
+  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+}
+
+#inspector-inspect-toolbutton[checked] {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
 #inspector-toolbar {
   border-top: 1px solid hsla(211,68%,6%,.65) !important;
 }

browser/themes/winstripe/devtools/common.css

@@ -61,6 +61,10 @@
   margin: 0;
 }
 
+.devtools-toolbarbutton:not([label]) {
+  min-width: 32px;
+}
+
 .devtools-toolbarbutton:not([checked]):hover:active {
   background-color: hsla(210,18%,9%,.1);
   background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));

browser/themes/winstripe/jar.mn

@@ -154,6 +154,7 @@ browser.jar:
         skin/classic/browser/devtools/itemToggle.png                (devtools/itemToggle.png)
         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)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -323,6 +324,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/itemToggle.png            (devtools/itemToggle.png)
         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)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png