Bug 815280 - Add a enable/disable all breakpoints button to the sources toolbar, r=rcampbell

--HG--
rename : browser/themes/linux/devtools/blackBoxMessageEye.png => browser/themes/linux/devtools/debugger-blackboxMessageEye.png
rename : browser/themes/osx/devtools/blackBoxMessageEye.png => browser/themes/osx/devtools/debugger-blackboxMessageEye.png
rename : browser/themes/windows/devtools/blackBoxMessageEye.png => browser/themes/windows/devtools/debugger-blackboxMessageEye.png

browser/devtools/debugger/debugger-controller.js

@@ -1228,7 +1228,7 @@ SourceScripts.prototype = {
    *          A promize that resolves to [aSource, isBlackBoxed] or rejects to
    *          [aSource, error].
    */
-  blackBox: function(aSource, aBlackBoxFlag) {
+  setBlackBoxing: function(aSource, aBlackBoxFlag) {
     const sourceClient = this.activeThread.source(aSource);
     const deferred = promise.defer();
 
@@ -1282,11 +1282,9 @@ SourceScripts.prototype = {
         // Revert the rejected promise from the cache, so that the original
         // source's text may be shown when the source is selected.
         this._cache.set(aSource.url, textPromise);
-
         deferred.reject([aSource, message || error]);
         return;
       }
-
       deferred.resolve([aSource, text]);
     };
 
@@ -1455,10 +1453,10 @@ EventListeners.prototype = {
         return;
       }
 
-      promise.all(aResponse.listeners.map(listener => {
+      let outstandingListenersDefinitionSite = aResponse.listeners.map(aListener => {
         const deferred = promise.defer();
 
-        gThreadClient.pauseGrip(listener.function).getDefinitionSite(aResponse => {
+        gThreadClient.pauseGrip(aListener.function).getDefinitionSite(aResponse => {
           if (aResponse.error) {
             const msg = "Error getting function definition site: " + aResponse.message;
             DevToolsUtils.reportException("scheduleEventListenersFetch", msg);
@@ -1466,13 +1464,15 @@ EventListeners.prototype = {
             return;
           }
 
-          listener.function.url = aResponse.url;
-          deferred.resolve(listener);
+          aListener.function.url = aResponse.url;
+          deferred.resolve(aListener);
         });
 
         return deferred.promise;
-      })).then(listeners => {
-        this._onEventListeners(listeners);
+      });
+
+      promise.all(outstandingListenersDefinitionSite).then(aListeners => {
+        this._onEventListeners(aListeners);
 
         // Notify that event listeners were fetched and shown in the view,
         // and callback to resume the active thread if necessary.

browser/devtools/debugger/debugger-panes.js

@@ -12,14 +12,16 @@ function SourcesView() {
   dumpn("SourcesView was instantiated");
 
   this.togglePrettyPrint = this.togglePrettyPrint.bind(this);
+  this.toggleBlackBoxing = this.toggleBlackBoxing.bind(this);
+  this.toggleBreakpoints = this.toggleBreakpoints.bind(this);
+
   this._onEditorLoad = this._onEditorLoad.bind(this);
   this._onEditorUnload = this._onEditorUnload.bind(this);
   this._onEditorCursorActivity = this._onEditorCursorActivity.bind(this);
   this._onSourceSelect = this._onSourceSelect.bind(this);
   this._onSourceClick = this._onSourceClick.bind(this);
-  this._onBreakpointRemoved = this._onBreakpointRemoved.bind(this);
-  this.toggleBlackBoxing = this.toggleBlackBoxing.bind(this);
   this._onStopBlackBoxing = this._onStopBlackBoxing.bind(this);
+  this._onBreakpointRemoved = this._onBreakpointRemoved.bind(this);
   this._onBreakpointClick = this._onBreakpointClick.bind(this);
   this._onBreakpointCheckboxClick = this._onBreakpointCheckboxClick.bind(this);
   this._onConditionalPopupShowing = this._onConditionalPopupShowing.bind(this);
@@ -27,6 +29,7 @@ function SourcesView() {
   this._onConditionalPopupHiding = this._onConditionalPopupHiding.bind(this);
   this._onConditionalTextboxInput = this._onConditionalTextboxInput.bind(this);
   this._onConditionalTextboxKeyPress = this._onConditionalTextboxKeyPress.bind(this);
+
   this.updateToolbarButtonsState = this.updateToolbarButtonsState.bind(this);
 }
 
@@ -52,6 +55,7 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     this._blackBoxButton = document.getElementById("black-box");
     this._stopBlackBoxButton = document.getElementById("black-boxed-message-button");
     this._prettyPrintButton = document.getElementById("pretty-print");
+    this._toggleBreakpointsButton = document.getElementById("toggle-breakpoints");
 
     if (Prefs.prettyPrintEnabled) {
       this._prettyPrintButton.removeAttribute("hidden");
@@ -220,6 +224,16 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
       aItem.attachment.line == aLocation.line);
   },
 
+  /**
+   * Returns all breakpoints for all sources.
+   *
+   * @return array
+   *         The breakpoints for all sources if any, an empty array otherwise.
+   */
+  getAllBreakpoints: function(aStore = []) {
+    return this.getOtherBreakpoints(undefined, aStore);
+  },
+
   /**
    * Returns all breakpoints which are not at the specified source url and line.
    *
@@ -274,6 +288,9 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     document.getElementById(enableSelfId).setAttribute("hidden", "true");
     document.getElementById(disableSelfId).removeAttribute("hidden");
 
+    // Update the breakpoint toggle button checked state.
+    this._toggleBreakpointsButton.removeAttribute("checked");
+
     // Update the checkbox state if necessary.
     if (!aOptions.silent) {
       attachment.view.checkbox.setAttribute("checked", "true");
@@ -374,6 +391,29 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     this._hideConditionalPopup();
   },
 
+  /**
+   * Update the checked/unchecked and enabled/disabled states of the buttons in
+   * the sources toolbar based on the currently selected source's state.
+   */
+  updateToolbarButtonsState: function() {
+    const { source } = this.selectedItem.attachment;
+    const sourceClient = gThreadClient.source(source);
+
+    if (sourceClient.isBlackBoxed) {
+      this._prettyPrintButton.setAttribute("disabled", true);
+      this._blackBoxButton.setAttribute("checked", true);
+    } else {
+      this._prettyPrintButton.removeAttribute("disabled");
+      this._blackBoxButton.removeAttribute("checked");
+    }
+
+    if (sourceClient.isPrettyPrinted) {
+      this._prettyPrintButton.setAttribute("checked", true);
+    } else {
+      this._prettyPrintButton.removeAttribute("checked");
+    }
+  },
+
   /**
    * Toggle the pretty printing of the selected source.
    */
@@ -395,11 +435,13 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
 
     DebuggerView.showProgressBar();
     const { source } = this.selectedItem.attachment;
+    const sourceClient = gThreadClient.source(source);
+    const shouldPrettyPrint = !sourceClient.isPrettyPrinted;
 
-    if (gThreadClient.source(source).isPrettyPrinted) {
-      this._prettyPrintButton.removeAttribute("checked");
-    } else {
+    if (shouldPrettyPrint) {
       this._prettyPrintButton.setAttribute("checked", true);
+    } else {
+      this._prettyPrintButton.removeAttribute("checked");
     }
 
     DebuggerController.SourceScripts.togglePrettyPrint(source)
@@ -408,6 +450,50 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
       .then(this.updateToolbarButtonsState);
   },
 
+  /**
+   * Toggle the black boxed state of the selected source.
+   */
+  toggleBlackBoxing: function() {
+    const { source } = this.selectedItem.attachment;
+    const sourceClient = gThreadClient.source(source);
+    const shouldBlackBox = !sourceClient.isBlackBoxed;
+
+    // Be optimistic that the (un-)black boxing will succeed, so enable/disable
+    // the pretty print button and check/uncheck the black box button
+    // immediately. Then, once we actually get the results from the server, make
+    // sure that it is in the correct state again by calling
+    // `updateToolbarButtonsState`.
+
+    if (shouldBlackBox) {
+      this._prettyPrintButton.setAttribute("disabled", true);
+      this._blackBoxButton.setAttribute("checked", true);
+    } else {
+      this._prettyPrintButton.removeAttribute("disabled");
+      this._blackBoxButton.removeAttribute("checked");
+    }
+
+    DebuggerController.SourceScripts.setBlackBoxing(source, shouldBlackBox)
+      .then(this.updateToolbarButtonsState,
+            this.updateToolbarButtonsState);
+  },
+
+  /**
+   * Toggles all breakpoints enabled/disabled.
+   */
+  toggleBreakpoints: function() {
+    let breakpoints = this.getAllBreakpoints();
+    let hasBreakpoints = breakpoints.length > 0;
+    let hasEnabledBreakpoints = breakpoints.some(e => !e.attachment.disabled);
+
+    if (hasBreakpoints && hasEnabledBreakpoints) {
+      this._toggleBreakpointsButton.setAttribute("checked", true);
+      this._onDisableAll();
+    } else {
+      this._toggleBreakpointsButton.removeAttribute("checked");
+      this._onEnableAll();
+    }
+  },
+
   /**
    * Marks a breakpoint as selected in this sources container.
    *
@@ -694,29 +780,6 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     this.updateToolbarButtonsState();
   },
 
-  /**
-   * Update the checked/unchecked and enabled/disabled states of the buttons in
-   * the sources toolbar based on the currently selected source's state.
-   */
-  updateToolbarButtonsState: function() {
-    const { source } = this.selectedItem.attachment;
-    const sourceClient = gThreadClient.source(source);
-
-    if (sourceClient.isBlackBoxed) {
-      this._prettyPrintButton.setAttribute("disabled", true);
-      this._blackBoxButton.setAttribute("checked", true);
-    } else {
-      this._prettyPrintButton.removeAttribute("disabled");
-      this._blackBoxButton.removeAttribute("checked");
-    }
-
-    if (sourceClient.isPrettyPrinted) {
-      this._prettyPrintButton.setAttribute("checked", true);
-    } else {
-      this._prettyPrintButton.removeAttribute("checked");
-    }
-  },
-
   /**
    * The click listener for the sources container.
    */
@@ -725,39 +788,13 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     DebuggerView.Filtering.target = this;
   },
 
-  /**
-   * Toggle the black boxed state of the selected source.
-   */
-  toggleBlackBoxing: function() {
-    const { source } = this.selectedItem.attachment;
-    const sourceClient = gThreadClient.source(source);
-    const shouldBlackBox = !sourceClient.isBlackBoxed;
-
-    // Be optimistic that the (un-)black boxing will succeed, so enable/disable
-    // the pretty print button and check/uncheck the black box button
-    // immediately. Then, once we actually get the results from the server, make
-    // sure that it is in the correct state again by calling
-    // `updateToolbarButtonsState`.
-
-    if (shouldBlackBox) {
-      this._prettyPrintButton.setAttribute("disabled", true);
-      this._blackBoxButton.setAttribute("checked", true);
-    } else {
-      this._prettyPrintButton.removeAttribute("disabled");
-      this._blackBoxButton.removeAttribute("checked");
-    }
-
-    DebuggerController.SourceScripts.blackBox(source, shouldBlackBox)
-      .then(this.updateToolbarButtonsState,
-            this.updateToolbarButtonsState);
-  },
-
   /**
    * The click listener for the "stop black boxing" button.
    */
   _onStopBlackBoxing: function() {
-    let sourceForm = this.selectedItem.attachment.source;
-    DebuggerController.SourceScripts.blackBox(sourceForm, false)
+    const { source } = this.selectedItem.attachment;
+
+    DebuggerController.SourceScripts.setBlackBoxing(source, false)
       .then(this.updateToolbarButtonsState,
             this.updateToolbarButtonsState);
   },

browser/devtools/debugger/debugger.xul

@@ -32,12 +32,14 @@
   <commandset id="editMenuCommands"/>
 
   <commandset id="debuggerCommands">
-    <command id="prettyPrintCommand"
-             oncommand="DebuggerView.Sources.togglePrettyPrint()"/>
     <command id="blackBoxCommand"
              oncommand="DebuggerView.Sources.toggleBlackBoxing()"/>
     <command id="unBlackBoxButton"
              oncommand="DebuggerView.Sources._onStopBlackBoxing()"/>
+    <command id="prettyPrintCommand"
+             oncommand="DebuggerView.Sources.togglePrettyPrint()"/>
+    <command id="toggleBreakpointsCommand"
+             oncommand="DebuggerView.Sources.toggleBreakpoints()"/>
     <command id="nextSourceCommand"
              oncommand="DebuggerView.Sources.selectNextItem()"/>
     <command id="prevSourceCommand"
@@ -333,16 +335,20 @@
             <toolbar id="sources-toolbar" class="devtools-toolbar">
               <hbox id="sources-controls">
                 <toolbarbutton id="black-box"
+                               class="devtools-toolbarbutton"
                                tooltiptext="&debuggerUI.sources.blackBoxTooltip;"
-                               command="blackBoxCommand"
-                               class="devtools-toolbarbutton"/>
+                               command="blackBoxCommand"/>
                 <toolbarbutton id="pretty-print"
+                               class="devtools-toolbarbutton devtools-monospace"
                                label="{}"
                                tooltiptext="&debuggerUI.sources.prettyPrint;"
-                               class="devtools-toolbarbutton devtools-monospace"
                                command="prettyPrintCommand"
                                hidden="true"/>
               </hbox>
+              <toolbarbutton id="toggle-breakpoints"
+                             class="devtools-toolbarbutton"
+                             tooltiptext="&debuggerUI.sources.toggleBreakpoints;"
+                             command="toggleBreakpointsCommand"/>
             </toolbar>
           </tabpanel>
           <tabpanel id="callstack-tabpanel">
@@ -361,7 +367,7 @@
           <button id="black-boxed-message-button"
                   class="devtools-toolbarbutton"
                   label="&debuggerUI.blackBoxMessage.unBlackBoxButton;"
-                  image="chrome://browser/skin/devtools/blackBoxMessageEye.png"
+                  image="chrome://browser/skin/devtools/debugger-blackboxMessageEye.png"
                   command="unBlackBoxCommand"/>
         </vbox>
         <vbox id="source-progress-container" align="center" pack="center">

browser/devtools/debugger/test/browser.ini

@@ -77,6 +77,8 @@ support-files =
 [browser_dbg_break-on-dom-06.js]
 [browser_dbg_break-on-dom-07.js]
 [browser_dbg_breakpoints-actual-location.js]
+[browser_dbg_breakpoints-button-01.js]
+[browser_dbg_breakpoints-button-02.js]
 [browser_dbg_breakpoints-contextmenu.js]
 [browser_dbg_breakpoints-disabled-reload.js]
 [browser_dbg_breakpoints-editor.js]

browser/devtools/debugger/test/browser_dbg_breakpoints-button-01.js

@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test if the breakpoints toggle button works as advertised.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_script-switching-01.html";
+
+function test() {
+  let gTab, gDebuggee, gPanel, gDebugger;
+  let gSources, gBreakpoints;
+
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPanel = aPanel;
+    gDebugger = gPanel.panelWin;
+    gSources = gDebugger.DebuggerView.Sources;
+    gBreakpoints = gDebugger.DebuggerController.Breakpoints;
+
+    waitForSourceShown(gPanel, "-01.js")
+      .then(addBreakpoints)
+      .then(testDisableBreakpoints)
+      .then(testEnableBreakpoints)
+      .then(() => ensureThreadClientState(gPanel, "resumed"))
+      .then(() => closeDebuggerAndFinish(gPanel))
+      .then(null, aError => {
+        ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+      });
+  });
+
+  function addBreakpoints() {
+    return promise.resolve(null)
+      .then(() => gPanel.addBreakpoint({ url: gSources.values[0], line: 5 }))
+      .then(() => gPanel.addBreakpoint({ url: gSources.values[1], line: 6 }))
+      .then(() => gPanel.addBreakpoint({ url: gSources.values[1], line: 7 }))
+      .then(() => ensureThreadClientState(gPanel, "resumed"));
+  }
+
+  function testDisableBreakpoints() {
+    let finished = waitForDebuggerEvents(gPanel, gDebugger.EVENTS.BREAKPOINT_REMOVED, 3);
+    gSources.toggleBreakpoints();
+    return finished.then(() => checkBreakpointsDisabled(true));
+  }
+
+  function testEnableBreakpoints() {
+    let finished = waitForDebuggerEvents(gPanel, gDebugger.EVENTS.BREAKPOINT_ADDED, 3);
+    gSources.toggleBreakpoints();
+    return finished.then(() => checkBreakpointsDisabled(false));
+  }
+
+  function checkBreakpointsDisabled(aState, aTotal = 3) {
+    let breakpoints = gSources.getAllBreakpoints();
+
+    is(breakpoints.length, aTotal,
+      "Breakpoints should still be set.");
+    is(breakpoints.filter(e => e.attachment.disabled == aState).length, aTotal,
+      "Breakpoints should be " + (aState ? "disabled" : "enabled") + ".");
+  }
+}

browser/devtools/debugger/test/browser_dbg_breakpoints-button-02.js

@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test if the breakpoints toggle button works as advertised when there are
+ * some breakpoints already disabled.
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_script-switching-01.html";
+
+function test() {
+  let gTab, gDebuggee, gPanel, gDebugger;
+  let gSources, gBreakpoints;
+
+  initDebugger(TAB_URL).then(([aTab, aDebuggee, aPanel]) => {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPanel = aPanel;
+    gDebugger = gPanel.panelWin;
+    gSources = gDebugger.DebuggerView.Sources;
+    gBreakpoints = gDebugger.DebuggerController.Breakpoints;
+
+    waitForSourceShown(gPanel, "-01.js")
+      .then(addBreakpoints)
+      .then(disableSomeBreakpoints)
+      .then(testToggleBreakpoints)
+      .then(testEnableBreakpoints)
+      .then(() => ensureThreadClientState(gPanel, "resumed"))
+      .then(() => closeDebuggerAndFinish(gPanel))
+      .then(null, aError => {
+        ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+      });
+  });
+
+  function addBreakpoints() {
+    return promise.resolve(null)
+      .then(() => gPanel.addBreakpoint({ url: gSources.values[0], line: 5 }))
+      .then(() => gPanel.addBreakpoint({ url: gSources.values[1], line: 6 }))
+      .then(() => gPanel.addBreakpoint({ url: gSources.values[1], line: 7 }))
+      .then(() => ensureThreadClientState(gPanel, "resumed"));
+  }
+
+  function disableSomeBreakpoints() {
+    return promise.all([
+      gSources.disableBreakpoint({ url: gSources.values[0], line: 5 }),
+      gSources.disableBreakpoint({ url: gSources.values[1], line: 6 })
+    ]);
+  }
+
+  function testToggleBreakpoints() {
+    let finished = waitForDebuggerEvents(gPanel, gDebugger.EVENTS.BREAKPOINT_REMOVED, 1);
+    gSources.toggleBreakpoints();
+    return finished.then(() => checkBreakpointsDisabled(true));
+  }
+
+  function testEnableBreakpoints() {
+    let finished = waitForDebuggerEvents(gPanel, gDebugger.EVENTS.BREAKPOINT_ADDED, 3);
+    gSources.toggleBreakpoints();
+    return finished.then(() => checkBreakpointsDisabled(false));
+  }
+
+  function checkBreakpointsDisabled(aState, aTotal = 3) {
+    let breakpoints = gSources.getAllBreakpoints();
+
+    is(breakpoints.length, aTotal,
+      "Breakpoints should still be set.");
+    is(breakpoints.filter(e => e.attachment.disabled == aState).length, aTotal,
+      "Breakpoints should be " + (aState ? "disabled" : "enabled") + ".");
+  }
+}

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

@@ -41,6 +41,10 @@
   -  button that pretty prints the selected source. -->
 <!ENTITY debuggerUI.sources.prettyPrint "Prettify Source">
 
+<!-- LOCALIZATION NOTE (debuggerUI.sources.toggleBreakpoints): This is the tooltip for the
+  -  button that toggles all breakpoints for all sources. -->
+<!ENTITY debuggerUI.sources.toggleBreakpoints "Enable/disable all breakpoints">
+
 <!-- LOCALIZATION NOTE (debuggerUI.pauseExceptions): This is the label for the
   -  checkbox that toggles pausing on exceptions. -->
 <!ENTITY debuggerUI.pauseExceptions     "Pause on exceptions">

browser/themes/linux/devtools/debugger.css

@@ -24,20 +24,28 @@
   -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
 }
 
-#sources-toolbar > #sources-controls > .devtools-toolbarbutton {
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
   min-width: 32px;
 }
 
+#black-box {
+  list-style-image: url(debugger-blackbox.png);
+}
+
 #pretty-print {
   font-weight: bold;
 }
 
-#black-box {
-  list-style-image: url(debugger-blackbox.png);
+#toggle-breakpoints {
+  list-style-image: url(debugger-toggleBreakpoints.png);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
-#black-box[checked] {
+#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 

browser/themes/linux/jar.mn

@@ -202,7 +202,6 @@ browser.jar:
   skin/classic/browser/devtools/magnifying-glass.png  (devtools/magnifying-glass.png)
   skin/classic/browser/devtools/option-icon.png       (devtools/option-icon.png)
   skin/classic/browser/devtools/itemToggle.png        (devtools/itemToggle.png)
-  skin/classic/browser/devtools/blackBoxMessageEye.png (devtools/blackBoxMessageEye.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/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
@@ -219,6 +218,8 @@ browser.jar:
   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/debugger-blackbox.png  (devtools/debugger-blackbox.png)
+  skin/classic/browser/devtools/debugger-blackboxMessageEye.png (devtools/debugger-blackboxMessageEye.png)
+  skin/classic/browser/devtools/debugger-toggleBreakpoints.png (devtools/debugger-toggleBreakpoints.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-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)

browser/themes/osx/devtools/debugger.css

@@ -26,20 +26,28 @@
   -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
 }
 
-#sources-toolbar > #sources-controls > .devtools-toolbarbutton {
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
   min-width: 32px;
 }
 
+#black-box {
+  list-style-image: url(debugger-blackbox.png);
+}
+
 #pretty-print {
   font-weight: bold;
 }
 
-#black-box {
-  list-style-image: url(debugger-blackbox.png);
+#toggle-breakpoints {
+  list-style-image: url(debugger-toggleBreakpoints.png);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
-#black-box[checked] {
+#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 

browser/themes/osx/jar.mn

@@ -304,7 +304,6 @@ browser.jar:
   skin/classic/browser/devtools/magnifying-glass.png        (devtools/magnifying-glass.png)
   skin/classic/browser/devtools/option-icon.png             (devtools/option-icon.png)
   skin/classic/browser/devtools/itemToggle.png              (devtools/itemToggle.png)
-  skin/classic/browser/devtools/blackBoxMessageEye.png      (devtools/blackBoxMessageEye.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/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
@@ -321,6 +320,8 @@ browser.jar:
   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/debugger-blackbox.png       (devtools/debugger-blackbox.png)
+  skin/classic/browser/devtools/debugger-blackboxMessageEye.png (devtools/debugger-blackboxMessageEye.png)
+  skin/classic/browser/devtools/debugger-toggleBreakpoints.png (devtools/debugger-toggleBreakpoints.png)
   skin/classic/browser/devtools/floating-scrollbars.css     (devtools/floating-scrollbars.css)
   skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
   skin/classic/browser/devtools/responsive-se-resizer.png   (devtools/responsive-se-resizer.png)

browser/themes/windows/devtools/debugger.css

@@ -24,20 +24,28 @@
   -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
 }
 
-#sources-toolbar > #sources-controls > .devtools-toolbarbutton {
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
   min-width: 32px;
 }
 
+#black-box {
+  list-style-image: url(debugger-blackbox.png);
+}
+
 #pretty-print {
   font-weight: bold;
 }
 
-#black-box {
-  list-style-image: url(debugger-blackbox.png);
+#toggle-breakpoints {
+  list-style-image: url(debugger-toggleBreakpoints.png);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
-#black-box[checked] {
+#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 

browser/themes/windows/jar.mn

@@ -229,7 +229,6 @@ browser.jar:
         skin/classic/browser/devtools/magnifying-glass.png          (devtools/magnifying-glass.png)
         skin/classic/browser/devtools/option-icon.png               (devtools/option-icon.png)
         skin/classic/browser/devtools/itemToggle.png                (devtools/itemToggle.png)
-        skin/classic/browser/devtools/blackBoxMessageEye.png        (devtools/blackBoxMessageEye.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/background-noise-toolbar.png  (devtools/background-noise-toolbar.png)
@@ -246,6 +245,8 @@ browser.jar:
         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/debugger-blackbox.png         (devtools/debugger-blackbox.png)
+        skin/classic/browser/devtools/debugger-blackboxMessageEye.png (devtools/debugger-blackboxMessageEye.png)
+        skin/classic/browser/devtools/debugger-toggleBreakpoints.png (devtools/debugger-toggleBreakpoints.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-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)
@@ -534,7 +535,6 @@ browser.jar:
         skin/classic/aero/browser/devtools/magnifying-glass.png      (devtools/magnifying-glass.png)
         skin/classic/aero/browser/devtools/option-icon.png           (devtools/option-icon.png)
         skin/classic/aero/browser/devtools/itemToggle.png            (devtools/itemToggle.png)
-        skin/classic/aero/browser/devtools/blackBoxMessageEye.png    (devtools/blackBoxMessageEye.png)
         skin/classic/aero/browser/devtools/itemArrow-rtl.png         (devtools/itemArrow-rtl.png)
         skin/classic/aero/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
         skin/classic/aero/browser/devtools/noise.png                 (devtools/noise.png)
@@ -551,6 +551,8 @@ browser.jar:
         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/debugger-blackbox.png     (devtools/debugger-blackbox.png)
+        skin/classic/aero/browser/devtools/debugger-blackboxMessageEye.png (devtools/debugger-blackboxMessageEye.png)
+        skin/classic/aero/browser/devtools/debugger-toggleBreakpoints.png (devtools/debugger-toggleBreakpoints.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-horizontal-resizer.png (devtools/responsive-horizontal-resizer.png)