Bug 868163 - Add toolbox tab highlighting API, r=robcee, r=vporof, r=paul

browser/devtools/debugger/DebuggerPanel.jsm

@@ -24,6 +24,9 @@ this.DebuggerPanel = function DebuggerPanel(iframeWindow, toolbox) {
   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);
 }
 
@@ -48,6 +51,8 @@ DebuggerPanel.prototype = {
       .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;
@@ -62,6 +67,8 @@ DebuggerPanel.prototype = {
   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);
   },
@@ -82,5 +89,13 @@ DebuggerPanel.prototype = {
 
   getAllBreakpoints: function() {
     return this._bkp.store;
+  },
+
+  highlightWhenPaused: function() {
+    this._toolbox.highlightTool("jsdebugger");
+  },
+
+  unhighlightWhenResumed: function() {
+    this._toolbox.unhighlightTool("jsdebugger");
   }
 };

browser/devtools/debugger/test/Makefile.in

@@ -94,6 +94,7 @@ MOCHITEST_BROWSER_TESTS = \
 	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/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;
+});

browser/devtools/framework/test/Makefile.in

@@ -27,6 +27,7 @@ MOCHITEST_BROWSER_FILES = \
 		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

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");
+}

browser/devtools/framework/toolbox.js

@@ -371,7 +371,15 @@ Toolbox.prototype = {
 
     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);
     }
 
@@ -528,6 +536,28 @@ Toolbox.prototype = {
     });
   },
 
+  /**
+   * 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.
    */

browser/devtools/main.js

@@ -113,6 +113,7 @@ Tools.jsdebugger = {
   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),

browser/themes/linux/devtools/toolbox.css

@@ -222,6 +222,32 @@
   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");
 }

browser/themes/linux/jar.mn

@@ -204,6 +204,7 @@ browser.jar:
   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)

browser/themes/osx/devtools/toolbox.css

@@ -208,6 +208,32 @@
   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");
 }

browser/themes/osx/jar.mn

@@ -290,6 +290,7 @@ browser.jar:
   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)

browser/themes/windows/devtools/toolbox.css

@@ -217,6 +217,32 @@
   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");
 }

browser/themes/windows/jar.mn

@@ -230,6 +230,7 @@ browser.jar:
         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)
@@ -482,6 +483,7 @@ browser.jar:
         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)