Bug 723059 - Replace text with icons in the debugger toolbar; r=rcampbell

browser/devtools/debugger/debugger-view.js

@@ -484,12 +484,12 @@ StackFramesView.prototype = {
 
      // If we're paused, show a pause label and a resume label on the button.
      if (aState == "paused") {
-       resume.label = L10N.getStr("resumeLabel");
+       resume.setAttribute("tooltiptext", L10N.getStr("resumeTooltip"));
        resume.setAttribute("checked", true);
      }
      // If we're attached, do the opposite.
      else if (aState == "attached") {
-       resume.label = L10N.getStr("pauseLabel");
+       resume.setAttribute("tooltiptext", L10N.getStr("pauseTooltip"));
        resume.removeAttribute("checked");
      }
 

browser/devtools/debugger/debugger.css

@@ -31,3 +31,11 @@
 .details[open] {
   display: -moz-box;
 }
+
+/**
+ * Toolbar
+ */
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}

browser/devtools/debugger/debugger.xul

@@ -41,24 +41,29 @@
   <vbox id="body" flex="1">
     <toolbar id="dbg-toolbar" class="devtools-toolbar">
 #ifdef XP_MACOSX
-      <toolbarbutton id="close" class="devtools-closebutton"/>
+      <toolbarbutton id="close"
+                     tooltiptext="&debuggerUI.closeButton.tooltip;"
+                     class="devtools-closebutton"/>
 #endif
-      <toolbarbutton id="resume"
-              class="devtools-toolbarbutton"
-              type="checkbox"
-              tabindex="0"/>
-      <toolbarbutton id="step-over"
-              class="devtools-toolbarbutton"
-              label="&debuggerUI.stepOverButton;"
-              tabindex="0"/>
-      <toolbarbutton id="step-in"
-              class="devtools-toolbarbutton"
-              label="&debuggerUI.stepInButton;"
-              tabindex="0"/>
-      <toolbarbutton id="step-out"
-              class="devtools-toolbarbutton"
-              label="&debuggerUI.stepOutButton;"
-              tabindex="0"/>
+
+      <hbox id="debugger-controls">
+        <toolbarbutton id="resume"
+                       class="devtools-toolbarbutton"
+                       type="checkbox"
+                       tabindex="0"/>
+        <toolbarbutton id="step-over"
+                       class="devtools-toolbarbutton"
+                       tooltiptext="&debuggerUI.stepOverButton.tooltip;"
+                       tabindex="0"/>
+        <toolbarbutton id="step-in"
+                       class="devtools-toolbarbutton"
+                       tooltiptext="&debuggerUI.stepInButton.tooltip;"
+                       tabindex="0"/>
+        <toolbarbutton id="step-out"
+                       class="devtools-toolbarbutton"
+                       tooltiptext="&debuggerUI.stepOutButton.tooltip;"
+                       tabindex="0"/>
+      </hbox>
       <menulist id="scripts" class="devtools-menulist"
                 label="&debuggerUI.emptyScriptText;"/>
       <textbox id="scripts-search" type="search"
@@ -66,7 +71,9 @@
                emptytext="&debuggerUI.emptyFilterText;"/>
       <spacer flex="1"/>
 #ifndef XP_MACOSX
-      <toolbarbutton id="close" class="devtools-closebutton"/>
+      <toolbarbutton id="close"
+                     tooltiptext="&debuggerUI.closeButton.tooltip;"
+                     class="devtools-closebutton"/>
 #endif
     </toolbar>
     <hbox id="dbg-content" flex="1">

browser/devtools/debugger/test/browser_dbg_pause-resume.js

@@ -23,8 +23,8 @@ function testPause() {
     "Should be running after debug_tab_pane.");
 
   let button = gDebugger.document.getElementById("resume");
-  is(button.label, gDebugger.L10N.getStr("pauseLabel"),
-    "Button label should be pause when running.");
+  is(button.getAttribute("tooltiptext"), gDebugger.L10N.getStr("pauseTooltip"),
+    "Button tooltip should be pause when running.");
 
   gDebugger.DebuggerController.activeThread.addOneTimeListener("paused", function() {
     Services.tm.currentThread.dispatch({ run: function() {
@@ -35,8 +35,8 @@ function testPause() {
       is(gDebugger.DebuggerController.activeThread.paused, true,
         "Should be paused after an interrupt request.");
 
-      is(button.label, gDebugger.L10N.getStr("resumeLabel"),
-        "Button label should be resume when paused.");
+      is(button.getAttribute("tooltiptext"), gDebugger.L10N.getStr("resumeTooltip"),
+        "Button tooltip should be resume when paused.");
 
       is(frames.querySelectorAll(".dbg-stackframe").length, 0,
         "Should have no frames when paused in the main loop.");
@@ -58,8 +58,8 @@ function testResume() {
         "Should be paused after an interrupt request.");
 
       let button = gDebugger.document.getElementById("resume");
-      is(button.label, gDebugger.L10N.getStr("pauseLabel"),
-        "Button label should be pause when running.");
+      is(button.getAttribute("tooltiptext"), gDebugger.L10N.getStr("pauseTooltip"),
+        "Button tooltip should be pause when running.");
 
       closeDebuggerAndFinish(gTab);
     }}, 0);

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

@@ -27,21 +27,21 @@
   -  launches the debugger UI. Do not translate this one! -->
 <!ENTITY debuggerMenu.commandkey     "S">
 
-<!-- LOCALIZATION NOTE (debuggerUI.closeButton): This is the label for the
-  -  button that closes the debugger UI. -->
-<!ENTITY debuggerUI.closeButton      "Close">
+<!-- LOCALIZATION NOTE (debuggerUI.closeButton.tooltip): This is the tooltip for
+  -  the button that closes the debugger UI. -->
+<!ENTITY debuggerUI.closeButton.tooltip        "Close">
 
-<!-- LOCALIZATION NOTE (debuggerUI.stepOverButton): This is the label for the
-  -  button that steps over a function call. -->
-<!ENTITY debuggerUI.stepOverButton   "Step Over">
+<!-- LOCALIZATION NOTE (debuggerUI.stepOverButton.tooltip): This is the tooltip for
+  -  the button that steps over a function call. -->
+<!ENTITY debuggerUI.stepOverButton.tooltip   "Step Over">
 
-<!-- LOCALIZATION NOTE (debuggerUI.stepInButton): This is the label for the
+<!-- LOCALIZATION NOTE (debuggerUI.stepInButton): This is the tooltip for the
   -  button that steps into a function call. -->
-<!ENTITY debuggerUI.stepInButton     "Step In">
+<!ENTITY debuggerUI.stepInButton.tooltip     "Step In">
 
-<!-- LOCALIZATION NOTE (debuggerUI.stepOutButton): This is the label for the
+<!-- LOCALIZATION NOTE (debuggerUI.stepOutButton): This is the tooltip for the
   -  button that steps out of a function call. -->
-<!ENTITY debuggerUI.stepOutButton    "Step Out">
+<!ENTITY debuggerUI.stepOutButton.tooltip    "Step Out">
 
 <!-- LOCALIZATION NOTE (debuggerUI.stackTitle): This is the label for the
   -  widget that displays the call stack frames in the debugger. -->

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

@@ -36,19 +36,11 @@ remoteDebuggerConnectionFailedMessage=Could not find a server at the specified h
 
 # LOCALIZATION NOTE (pauseLabel): The label that is displayed on the pause
 # button when the debugger is in a running state.
-pauseLabel=Pause
+pauseTooltip=Click to pause
 
 # LOCALIZATION NOTE (resumeLabel): The label that is displayed on the pause
 # button when the debugger is in a paused state.
-resumeLabel=Resume
-
-# LOCALIZATION NOTE (pausedState): The label that is displayed when the
-# debugger is in a paused state.
-pausedState=Paused
-
-# LOCALIZATION NOTE (runningState): The label that is displayed when the
-# debugger is in a running state.
-runningState=Running
+resumeTooltip=Click to resume
 
 # LOCALIZATION NOTE (localScope): The label that is displayed in the variables
 # pane as a header on the local scope container.

browser/themes/gnomestripe/devtools/debugger.css

@@ -213,3 +213,52 @@
     -moz-transform: scaleY(1);
   }
 }
+
+/**
+ * Toolbar Controls
+ */
+
+#resume {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#resume[checked=true] {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#step-over {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
+}
+
+#step-in {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
+}
+
+#step-out {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
+}
+
+#step-over {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
+}
+
+#debugger-controls > toolbarbutton {
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+  outline-offset: -3px;
+}
+
+#debugger-controls > toolbarbutton:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+#debugger-controls {
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 3px;
+}

browser/themes/gnomestripe/jar.mn

@@ -150,6 +150,10 @@ 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/debugger-pause.png     (devtools/debugger-pause.png)
+  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)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png

browser/themes/pinstripe/devtools/debugger.css

@@ -4,6 +4,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+%include ../shared.inc
+
 #body {
   background: -moz-dialog;
 }
@@ -210,3 +212,52 @@
     -moz-transform: scaleY(1);
   }
 }
+
+/**
+ * Toolbar Controls
+ */
+
+#resume {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#resume[checked=true] {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#step-over {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
+}
+
+#step-in {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
+}
+
+#step-out {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
+}
+
+#step-over {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
+}
+
+#debugger-controls > toolbarbutton {
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+  outline-offset: -3px;
+}
+
+#debugger-controls > toolbarbutton:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+#debugger-controls {
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: @toolbarbuttonCornerRadius@;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 3px;
+}

browser/themes/pinstripe/jar.mn

@@ -179,7 +179,7 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
   skin/classic/browser/devtools/splitview.css               (devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css             (devtools/styleeditor.css)
-  skin/classic/browser/devtools/debugger.css                (devtools/debugger.css)
+* skin/classic/browser/devtools/debugger.css                (devtools/debugger.css)
   skin/classic/browser/devtools/magnifying-glass.png        (devtools/magnifying-glass.png)
   skin/classic/browser/devtools/itemToggle.png              (devtools/itemToggle.png)
   skin/classic/browser/devtools/itemArrow-rtl.png           (devtools/itemArrow-rtl.png)
@@ -191,6 +191,10 @@ 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/debugger-pause.png          (devtools/debugger-pause.png)
+  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)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png

browser/themes/winstripe/devtools/debugger.css

@@ -216,3 +216,52 @@
     -moz-transform: scaleY(1);
   }
 }
+
+/**
+ * Toolbar Controls
+ */
+
+#resume {
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#resume[checked=true] {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
+}
+
+#step-over {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
+}
+
+#step-in {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
+}
+
+#step-out {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
+}
+
+#step-over {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
+}
+
+#debugger-controls > toolbarbutton {
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+  outline-offset: -3px;
+}
+
+#debugger-controls > toolbarbutton:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+#debugger-controls {
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+  margin: 0 3px;
+}

browser/themes/winstripe/jar.mn

@@ -177,7 +177,11 @@ 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)
+        skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
+        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)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -366,6 +370,10 @@ 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/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)
+        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)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png