Bug 868163 - Add toolbox tab highlighting API, r=robcee, r=vporof, r=paul
authorGirish Sharma <scrapmachines@gmail.com>
Sat, 25 May 2013 13:35:34 +0530
changeset 147665 ddf46f192e463f1f302c46bb20117d86b270d46f
parent 147664 8d8330b65f2684005a263eb5ea709b45c493763b
child 147666 de9bcd3c8e6c41b43c3b7e7510abd03faaf92174
push id2697
push userbbajaj@mozilla.com
push dateMon, 05 Aug 2013 18:49:53 +0000
treeherdermozilla-beta@dfec938c7b63 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrobcee, vporof, paul
bugs868163
milestone24.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 868163 - Add toolbox tab highlighting API, r=robcee, r=vporof, r=paul
browser/devtools/debugger/DebuggerPanel.jsm
browser/devtools/debugger/test/Makefile.in
browser/devtools/debugger/test/browser_dbg_bug868163_highight_on_pause.js
browser/devtools/framework/test/Makefile.in
browser/devtools/framework/test/browser_toolbox_highlight.js
browser/devtools/framework/toolbox.js
browser/devtools/main.js
browser/themes/linux/devtools/tool-debugger-paused.png
browser/themes/linux/devtools/toolbox.css
browser/themes/linux/jar.mn
browser/themes/osx/devtools/tool-debugger-paused.png
browser/themes/osx/devtools/toolbox.css
browser/themes/osx/jar.mn
browser/themes/windows/devtools/tool-debugger-paused.png
browser/themes/windows/devtools/toolbox.css
browser/themes/windows/jar.mn
--- a/browser/devtools/debugger/DebuggerPanel.jsm
+++ b/browser/devtools/debugger/DebuggerPanel.jsm
@@ -19,16 +19,19 @@ this.DebuggerPanel = function DebuggerPa
   this.panelWin = iframeWindow;
   this._toolbox = toolbox;
 
   this._view = this.panelWin.DebuggerView;
   this._controller = this.panelWin.DebuggerController;
   this._controller._target = this.target;
   this._bkp = this._controller.Breakpoints;
 
+  this.highlightWhenPaused = this.highlightWhenPaused.bind(this);
+  this.unhighlightWhenResumed = this.unhighlightWhenResumed.bind(this);
+
   EventEmitter.decorate(this);
 }
 
 DebuggerPanel.prototype = {
   /**
    * Open is effectively an asynchronous constructor.
    *
    * @return object
@@ -43,30 +46,34 @@ DebuggerPanel.prototype = {
     } else {
       promise = Promise.resolve(this.target);
     }
 
     return promise
       .then(() => this._controller.startupDebugger())
       .then(() => this._controller.connect())
       .then(() => {
+        this.target.on("thread-paused", this.highlightWhenPaused);
+        this.target.on("thread-resumed", this.unhighlightWhenResumed);
         this.isReady = true;
         this.emit("ready");
         return this;
       })
       .then(null, function onError(aReason) {
         Cu.reportError("DebuggerPanel open failed. " +
                        reason.error + ": " + reason.message);
       });
   },
 
   // DevToolPanel API
   get target() this._toolbox.target,
 
   destroy: function() {
+    this.target.off("thread-paused", this.highlightWhenPaused);
+    this.target.off("thread-resumed", this.unhighlightWhenResumed);
     this.emit("destroyed");
     return Promise.resolve(null);
   },
 
   // DebuggerPanel API
 
   addBreakpoint: function() {
     this._bkp.addBreakpoint.apply(this._bkp, arguments);
@@ -77,10 +84,18 @@ DebuggerPanel.prototype = {
   },
 
   getBreakpoint: function() {
     return this._bkp.getBreakpoint.apply(this._bkp, arguments);
   },
 
   getAllBreakpoints: function() {
     return this._bkp.store;
+  },
+
+  highlightWhenPaused: function() {
+    this._toolbox.highlightTool("jsdebugger");
+  },
+
+  unhighlightWhenResumed: function() {
+    this._toolbox.unhighlightTool("jsdebugger");
   }
 };
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@@ -89,16 +89,17 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_bug723071_editor-breakpoints-contextmenu.js \
 	browser_dbg_bug740825_conditional-breakpoints-01.js \
 	browser_dbg_bug740825_conditional-breakpoints-02.js \
 	browser_dbg_bug727429_watch-expressions-01.js \
 	browser_dbg_bug727429_watch-expressions-02.js \
 	browser_dbg_bug731394_editor-contextmenu.js \
 	browser_dbg_bug737803_editor_actual_location.js \
 	browser_dbg_bug786070_hide_nonenums.js \
+	browser_dbg_bug868163_highight_on_pause.js \
 	browser_dbg_displayName.js \
 	browser_dbg_pause-exceptions.js \
 	browser_dbg_multiple-windows.js \
 	browser_dbg_iframes.js \
 	browser_dbg_bfcache.js \
 	browser_dbg_progress-listener-bug.js \
 	browser_dbg_chrome-debugging.js \
 	browser_dbg_source_maps-01.js \
new file mode 100644
--- /dev/null
+++ b/browser/devtools/debugger/test/browser_dbg_bug868163_highight_on_pause.js
@@ -0,0 +1,78 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Tests that debugger's tab is highlighted when it is paused and not the
+// currently selected tool.
+
+var gTab = null;
+var gDebugger = null;
+var gToolbox = null;
+var gToolboxTab = null;
+
+function test() {
+  debug_tab_pane(STACK_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebugger = aPane.panelWin;
+    gToolbox = aPane._toolbox;
+    gToolboxTab = gToolbox.doc.getElementById("toolbox-tab-jsdebugger");
+    testPause();
+  });
+}
+
+function testPause() {
+  is(gDebugger.DebuggerController.activeThread.paused, false,
+    "Should be running after debug_tab_pane.");
+
+  gDebugger.DebuggerController.activeThread.addOneTimeListener("paused", function() {
+    Services.tm.currentThread.dispatch({ run: function() {
+
+      gToolbox.selectTool("webconsole").then(() => {
+        ok(gToolboxTab.classList.contains("highlighted"),
+           "The highlighted class is present");
+        ok(!gToolboxTab.hasAttribute("selected") ||
+           gToolboxTab.getAttribute("selected") != "true",
+           "The tab is not selected");
+      }).then(() => gToolbox.selectTool("jsdebugger")).then(() => {
+        ok(gToolboxTab.classList.contains("highlighted"),
+           "The highlighted class is present");
+        ok(gToolboxTab.hasAttribute("selected") &&
+           gToolboxTab.getAttribute("selected") == "true",
+           "and the tab is selected, so the orange glow will not be present.");
+      }).then(testResume);
+    }}, 0);
+  });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    gDebugger.document.getElementById("resume"),
+    gDebugger);
+}
+
+function testResume() {
+  gDebugger.DebuggerController.activeThread.addOneTimeListener("resumed", function() {
+    Services.tm.currentThread.dispatch({ run: function() {
+
+      gToolbox.selectTool("webconsole").then(() => {
+        ok(!gToolboxTab.classList.contains("highlighted"),
+           "The highlighted class is not present now after the resume");
+        ok(!gToolboxTab.hasAttribute("selected") ||
+           gToolboxTab.getAttribute("selected") != "true",
+           "The tab is not selected");
+      }).then(closeDebuggerAndFinish);
+    }}, 0);
+  });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    gDebugger.document.getElementById("resume"),
+    gDebugger);
+}
+
+registerCleanupFunction(function() {
+  removeTab(gTab);
+  gTab = null;
+  gDebugger = null;
+  gToolbox = null;
+  gToolboxTab = null;
+});
--- a/browser/devtools/framework/test/Makefile.in
+++ b/browser/devtools/framework/test/Makefile.in
@@ -22,11 +22,12 @@ MOCHITEST_BROWSER_FILES = \
 		browser_toolbox_tool_ready.js \
 		browser_toolbox_sidebar.js \
 		browser_toolbox_window_shortcuts.js \
 		browser_toolbox_window_title_changes.js \
 		browser_toolbox_options.js \
 		browser_toolbox_options_disablejs.js \
 		browser_toolbox_options_disablejs.html \
 		browser_toolbox_options_disablejs_iframe.html \
+		browser_toolbox_highlight.js \
 		$(NULL)
 
 include $(topsrcdir)/config/rules.mk
new file mode 100644
--- /dev/null
+++ b/browser/devtools/framework/test/browser_toolbox_highlight.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let Toolbox = devtools.Toolbox;
+let temp = {};
+Cu.import("resource://gre/modules/Services.jsm", temp);
+let Services = temp.Services;
+temp = null;
+let toolbox = null;
+
+function test() {
+  waitForExplicitFinish();
+
+  const URL = "data:text/plain;charset=UTF-8,Nothing to see here, move along";
+
+  const TOOL_ID_1 = "jsdebugger";
+  const TOOL_ID_2 = "webconsole";
+
+  addTab(URL, () => {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, TOOL_ID_1, Toolbox.HostType.BOTTOM)
+             .then(aToolbox => {
+                toolbox = aToolbox;
+                // select tool 2
+                toolbox.selectTool(TOOL_ID_2)
+                       // and highlight the first one
+                       .then(highlightTab.bind(null, TOOL_ID_1))
+                       // to see if it has the proper class.
+                       .then(checkHighlighted.bind(null, TOOL_ID_1))
+                       // Now switch back to first tool
+                       .then(() => toolbox.selectTool(TOOL_ID_1))
+                       // to check again. But there is no easy way to test if
+                       // it is showing orange or not.
+                       .then(checkNoHighlightWhenSelected.bind(null, TOOL_ID_1))
+                       // Switch to tool 2 again
+                       .then(() => toolbox.selectTool(TOOL_ID_2))
+                       // and check again.
+                       .then(checkHighlighted.bind(null, TOOL_ID_1))
+                       // Now unhighlight the tool
+                       .then(unhighlightTab.bind(null, TOOL_ID_1))
+                       // to see the classes gone.
+                       .then(checkNoHighlight.bind(null, TOOL_ID_1))
+                       // Now close the toolbox and exit.
+                       .then(() => executeSoon(() => {
+                          toolbox.destroy()
+                                 .then(() => {
+                                   toolbox = null;
+                                   gBrowser.removeCurrentTab();
+                                   finish();
+                                 });
+                        }));
+              });
+  });
+}
+
+function highlightTab(toolId) {
+  info("Highlighting tool " + toolId + "'s tab.");
+  toolbox.highlightTool(toolId);
+}
+
+function unhighlightTab(toolId) {
+  info("Unhighlighting tool " + toolId + "'s tab.");
+  toolbox.unhighlightTool(toolId);
+}
+
+function checkHighlighted(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab.classList.contains("highlighted"), "The highlighted class is present");
+  ok(!tab.hasAttribute("selected") || tab.getAttribute("selected") != "true",
+     "The tab is not selected");
+}
+
+function checkNoHighlightWhenSelected(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab.classList.contains("highlighted"), "The highlighted class is present");
+  ok(tab.hasAttribute("selected") && tab.getAttribute("selected") == "true",
+     "and the tab is selected, so the orange glow will not be present.");
+}
+
+function checkNoHighlight(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(!tab.classList.contains("highlighted"),
+     "The highlighted class is not present");
+}
--- a/browser/devtools/framework/toolbox.js
+++ b/browser/devtools/framework/toolbox.js
@@ -366,17 +366,25 @@ Toolbox.prototype = {
 
     // spacer lets us center the image and label, while allowing cropping
     let spacer = this.doc.createElement("spacer");
     spacer.setAttribute("flex", "1");
     radio.appendChild(spacer);
 
     if (toolDefinition.icon) {
       let image = this.doc.createElement("image");
-      image.setAttribute("src", toolDefinition.icon);
+      image.className = "default-icon";
+      image.setAttribute("src",
+                         toolDefinition.icon || toolDefinition.highlightedicon);
+      radio.appendChild(image);
+      // Adding the highlighted icon image
+      image = this.doc.createElement("image");
+      image.className = "highlighted-icon";
+      image.setAttribute("src",
+                         toolDefinition.highlightedicon || toolDefinition.icon);
       radio.appendChild(image);
     }
 
     if (toolDefinition.label) {
       let label = this.doc.createElement("label");
       label.setAttribute("value", toolDefinition.label)
       label.setAttribute("crop", "end");
       label.setAttribute("flex", "1");
@@ -524,16 +532,38 @@ Toolbox.prototype = {
     return this.loadTool(id).then((panel) => {
       this.emit("select", id);
       this.emit(id + "-selected", panel);
       return panel;
     });
   },
 
   /**
+   * Highlights the tool's tab if it is not the currently selected tool.
+   *
+   * @param {string} id
+   *        The id of the tool to highlight
+   */
+  highlightTool: function TBOX_highlightTool(id) {
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab && tab.classList.add("highlighted");
+  },
+
+  /**
+   * De-highlights the tool's tab.
+   *
+   * @param {string} id
+   *        The id of the tool to unhighlight
+   */
+  unhighlightTool: function TBOX_unhighlightTool(id) {
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab && tab.classList.remove("highlighted");
+  },
+
+  /**
    * Raise the toolbox host.
    */
   raise: function TBOX_raise() {
     this._host.raise();
   },
 
   /**
    * Refresh the host's title.
--- a/browser/devtools/main.js
+++ b/browser/devtools/main.js
@@ -108,16 +108,17 @@ Tools.inspector = {
 Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("debuggerMenu.commandkey", debuggerStrings),
   accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 3,
   visibilityswitch: "devtools.debugger.enabled",
   icon: "chrome://browser/skin/devtools/tool-debugger.png",
+  highlightedicon: "chrome://browser/skin/devtools/tool-debugger-paused.png",
   url: "chrome://browser/content/devtools/debugger.xul",
   label: l10n("ToolboxDebugger.label", debuggerStrings),
   tooltip: l10n("ToolboxDebugger.tooltip", debuggerStrings),
 
   isTargetSupported: function(target) {
     return true;
   },
 
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4c968f542d8f8ef351fe4dc16370082a28c4fdf6
GIT binary patch
literal 441
zc$@*b0Y?6bP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0004iNkl<Zc-p0t
z&nv@W9LL{DisnE#a911%2Ze*vF4STN$u3KgF|FojBVw@{MT==kl&inMZgQ8%Y-Y2u
zaYH7f_V|1jPcz@y%Hj1reBbZ)>$yA+gb@EC`6(zWmbe~JMl2Dh#M>7q!~$n2-QR+(
zduWMAXB1*14gN>j6L%B^n^9<~m~ccO{(?K){ULBfQNA9*bMG4ZDQHq+_yDtOBw)Bp
zn+hpd4Z~``gP@{{Kn6-XEa>4LLmQhEEC+CIyG;s^g+lEL^xUP*g%m7?5VwY<ARDSK
zJM^@9mxB2l#OFgf3t)7kc`k^U6ij+>IdhYnfDTd<f;L_$7&?M;DwthBho~)d5O)p7
za7jU{33X;aUZ#U+%QU7;$HTDz1b16TQJ;E|^1Jt8HV2U4f)ZxJbe$x@UEZW$<r2*v
zCPsXS8T}ASaHiSCICmA_0teNddF?tkb_UOIHSEKO!Hd^{Q+WCgvCY}{SV17kC#r~A
jqLFAIYKThC(qH2zvCVaN4v|;$00000NkvXXu0mjfz_+~V
--- a/browser/themes/linux/devtools/toolbox.css
+++ b/browser/themes/linux/devtools/toolbox.css
@@ -217,16 +217,42 @@
                      no-repeat,
                      no-repeat,
                      no-repeat,
                      repeat-x;
   background-position: top right, top left, left, right;
   box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }
 
+.devtools-tab:not([selected=true]).highlighted {
+  color: #f5f7fa;
+  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
+                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
+  background-size: 100% 1px,
+                   100% 5px,
+                   1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: top right, top left, left, right;
+}
+
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab[selected=true] > .highlighted-icon,
+.devtools-tab:not([selected=true]).highlighted > .default-icon {
+  visibility: collapse;
+}
+
 #options-panel {
   background-image: url("chrome://browser/skin/newtab/noise.png");
 }
 
 .options-vertical-pane {
   margin: 15px;
   width: calc(50% - 30px);
   min-width: 400px;
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -199,16 +199,17 @@ browser.jar:
   skin/classic/browser/devtools/dock-side.png             (devtools/dock-side.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/inspector.css             (devtools/inspector.css)
   skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
   skin/classic/browser/devtools/tool-options.png          (devtools/tool-options.png)
   skin/classic/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
   skin/classic/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
+  skin/classic/browser/devtools/tool-debugger-paused.png  (devtools/tool-debugger-paused.png)
   skin/classic/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)
   skin/classic/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
   skin/classic/browser/devtools/tool-profiler.png         (devtools/tool-profiler.png)
   skin/classic/browser/devtools/tool-network.png          (devtools/tool-network.png)
   skin/classic/browser/devtools/close.png                 (devtools/close.png)
   skin/classic/browser/devtools/vview-delete.png          (devtools/vview-delete.png)
   skin/classic/browser/devtools/vview-edit.png            (devtools/vview-edit.png)
   skin/classic/browser/devtools/undock.png                (devtools/undock.png)
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4c968f542d8f8ef351fe4dc16370082a28c4fdf6
GIT binary patch
literal 441
zc$@*b0Y?6bP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0004iNkl<Zc-p0t
z&nv@W9LL{DisnE#a911%2Ze*vF4STN$u3KgF|FojBVw@{MT==kl&inMZgQ8%Y-Y2u
zaYH7f_V|1jPcz@y%Hj1reBbZ)>$yA+gb@EC`6(zWmbe~JMl2Dh#M>7q!~$n2-QR+(
zduWMAXB1*14gN>j6L%B^n^9<~m~ccO{(?K){ULBfQNA9*bMG4ZDQHq+_yDtOBw)Bp
zn+hpd4Z~``gP@{{Kn6-XEa>4LLmQhEEC+CIyG;s^g+lEL^xUP*g%m7?5VwY<ARDSK
zJM^@9mxB2l#OFgf3t)7kc`k^U6ij+>IdhYnfDTd<f;L_$7&?M;DwthBho~)d5O)p7
za7jU{33X;aUZ#U+%QU7;$HTDz1b16TQJ;E|^1Jt8HV2U4f)ZxJbe$x@UEZW$<r2*v
zCPsXS8T}ASaHiSCICmA_0teNddF?tkb_UOIHSEKO!Hd^{Q+WCgvCY}{SV17kC#r~A
jqLFAIYKThC(qH2zvCVaN4v|;$00000NkvXXu0mjfz_+~V
--- a/browser/themes/osx/devtools/toolbox.css
+++ b/browser/themes/osx/devtools/toolbox.css
@@ -203,16 +203,42 @@
                      no-repeat,
                      no-repeat,
                      no-repeat,
                      repeat-x;
   background-position: top right, top left, left, right;
   box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }
 
+.devtools-tab:not([selected=true]).highlighted {
+  color: #f5f7fa;
+  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
+                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
+  background-size: 100% 1px,
+                   100% 5px,
+                   1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: top right, top left, left, right;
+}
+
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab[selected=true] > .highlighted-icon,
+.devtools-tab:not([selected=true]).highlighted > .default-icon {
+  visibility: collapse;
+}
+
 #options-panel {
   background-image: url("chrome://browser/skin/newtab/noise.png");
 }
 
 .options-vertical-pane {
   margin: 15px;
   width: calc(50% - 30px);
   min-width: 400px;
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -285,16 +285,17 @@ browser.jar:
   skin/classic/browser/devtools/toggle-tools.png            (devtools/toggle-tools.png)
   skin/classic/browser/devtools/dock-bottom.png             (devtools/dock-bottom.png)
   skin/classic/browser/devtools/dock-side.png               (devtools/dock-side.png)
 * skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
   skin/classic/browser/devtools/toolbox.css                 (devtools/toolbox.css)
   skin/classic/browser/devtools/tool-options.png            (devtools/tool-options.png)
   skin/classic/browser/devtools/tool-webconsole.png         (devtools/tool-webconsole.png)
   skin/classic/browser/devtools/tool-debugger.png           (devtools/tool-debugger.png)
+  skin/classic/browser/devtools/tool-debugger-paused.png    (devtools/tool-debugger-paused.png)
   skin/classic/browser/devtools/tool-inspector.png          (devtools/tool-inspector.png)
   skin/classic/browser/devtools/tool-styleeditor.png        (devtools/tool-styleeditor.png)
   skin/classic/browser/devtools/tool-profiler.png           (devtools/tool-profiler.png)
   skin/classic/browser/devtools/tool-network.png            (devtools/tool-network.png)
   skin/classic/browser/devtools/close.png                   (devtools/close.png)
   skin/classic/browser/devtools/vview-delete.png            (devtools/vview-delete.png)
   skin/classic/browser/devtools/vview-edit.png              (devtools/vview-edit.png)
   skin/classic/browser/devtools/undock.png                  (devtools/undock.png)
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4c968f542d8f8ef351fe4dc16370082a28c4fdf6
GIT binary patch
literal 441
zc$@*b0Y?6bP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0004iNkl<Zc-p0t
z&nv@W9LL{DisnE#a911%2Ze*vF4STN$u3KgF|FojBVw@{MT==kl&inMZgQ8%Y-Y2u
zaYH7f_V|1jPcz@y%Hj1reBbZ)>$yA+gb@EC`6(zWmbe~JMl2Dh#M>7q!~$n2-QR+(
zduWMAXB1*14gN>j6L%B^n^9<~m~ccO{(?K){ULBfQNA9*bMG4ZDQHq+_yDtOBw)Bp
zn+hpd4Z~``gP@{{Kn6-XEa>4LLmQhEEC+CIyG;s^g+lEL^xUP*g%m7?5VwY<ARDSK
zJM^@9mxB2l#OFgf3t)7kc`k^U6ij+>IdhYnfDTd<f;L_$7&?M;DwthBho~)d5O)p7
za7jU{33X;aUZ#U+%QU7;$HTDz1b16TQJ;E|^1Jt8HV2U4f)ZxJbe$x@UEZW$<r2*v
zCPsXS8T}ASaHiSCICmA_0teNddF?tkb_UOIHSEKO!Hd^{Q+WCgvCY}{SV17kC#r~A
jqLFAIYKThC(qH2zvCVaN4v|;$00000NkvXXu0mjfz_+~V
--- a/browser/themes/windows/devtools/toolbox.css
+++ b/browser/themes/windows/devtools/toolbox.css
@@ -212,16 +212,42 @@
                      no-repeat,
                      no-repeat,
                      no-repeat,
                      repeat-x;
   background-position: top right, top left, left, right;
   box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }
 
+.devtools-tab:not([selected=true]).highlighted {
+  color: #f5f7fa;
+  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
+                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
+  background-size: 100% 1px,
+                   100% 5px,
+                   1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: top right, top left, left, right;
+}
+
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab[selected=true] > .highlighted-icon,
+.devtools-tab:not([selected=true]).highlighted > .default-icon {
+  visibility: collapse;
+}
+
 #options-panel {
   background-image: url("chrome://browser/skin/newtab/noise.png");
 }
 
 .options-vertical-pane {
   margin: 15px;
   width: calc(50% - 30px);
   min-width: 400px;
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -225,16 +225,17 @@ browser.jar:
         skin/classic/browser/devtools/dock-side.png                 (devtools/dock-side.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/inspector.css                 (devtools/inspector.css)
         skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
         skin/classic/browser/devtools/tool-options.png              (devtools/tool-options.png)
         skin/classic/browser/devtools/tool-webconsole.png           (devtools/tool-webconsole.png)
         skin/classic/browser/devtools/tool-debugger.png             (devtools/tool-debugger.png)
+        skin/classic/browser/devtools/tool-debugger-paused.png      (devtools/tool-debugger-paused.png)
         skin/classic/browser/devtools/tool-inspector.png            (devtools/tool-inspector.png)
         skin/classic/browser/devtools/tool-styleeditor.png          (devtools/tool-styleeditor.png)
         skin/classic/browser/devtools/tool-profiler.png             (devtools/tool-profiler.png)
         skin/classic/browser/devtools/tool-network.png              (devtools/tool-network.png)
         skin/classic/browser/devtools/close.png                     (devtools/close.png)
         skin/classic/browser/devtools/vview-delete.png              (devtools/vview-delete.png)
         skin/classic/browser/devtools/vview-edit.png                (devtools/vview-edit.png)
         skin/classic/browser/devtools/undock.png                    (devtools/undock.png)
@@ -477,16 +478,17 @@ browser.jar:
         skin/classic/aero/browser/devtools/dock-side.png             (devtools/dock-side.png)
         skin/classic/aero/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
         skin/classic/aero/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
         skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
         skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
         skin/classic/aero/browser/devtools/tool-options.png          (devtools/tool-options.png)
         skin/classic/aero/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
         skin/classic/aero/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
+        skin/classic/aero/browser/devtools/tool-debugger-paused.png  (devtools/tool-debugger-paused.png)
         skin/classic/aero/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)
         skin/classic/aero/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
         skin/classic/aero/browser/devtools/tool-profiler.png         (devtools/tool-profiler.png)
         skin/classic/aero/browser/devtools/tool-network.png          (devtools/tool-network.png)
         skin/classic/aero/browser/devtools/close.png                 (devtools/close.png)
         skin/classic/aero/browser/devtools/vview-delete.png          (devtools/vview-delete.png)
         skin/classic/aero/browser/devtools/vview-edit.png            (devtools/vview-edit.png)
         skin/classic/aero/browser/devtools/undock.png                (devtools/undock.png)