Bug 938616 - webconsole UI updates while in split mode with other panels;r=msucan

browser/app/profile/firefox.js

@@ -1093,7 +1093,7 @@ pref("devtools.toolbox.footer.height", 250);
 pref("devtools.toolbox.sidebar.width", 500);
 pref("devtools.toolbox.host", "bottom");
 pref("devtools.toolbox.selectedTool", "webconsole");
-pref("devtools.toolbox.toolbarSpec", '["paintflashing toggle","tilt toggle","scratchpad","resize toggle"]');
+pref("devtools.toolbox.toolbarSpec", '["splitconsole", "paintflashing toggle","tilt toggle","scratchpad","resize toggle"]');
 pref("devtools.toolbox.sideEnabled", true);
 pref("devtools.toolbox.zoomValue", "1");
 

browser/devtools/commandline/BuiltinCommands.jsm

@@ -2272,3 +2272,68 @@ gcli.addCommand({
     }
   });
 }(this));
+
+/* CmdSplitConsole ------------------------------------------------------- */
+
+(function(module) {
+  /**
+   * 'splitconsole' command (hidden)
+   */
+
+  gcli.addCommand({
+    name: 'splitconsole',
+    hidden: true,
+    buttonId: "command-button-splitconsole",
+    buttonClass: "command-button",
+    tooltipText: gcli.lookup("splitconsoleTooltip"),
+    state: {
+      isChecked: function(aTarget) {
+        let toolbox = gDevTools.getToolbox(aTarget);
+        return toolbox &&
+          toolbox.splitConsole;
+      },
+      onChange: function(aTarget, aChangeHandler) {
+        eventEmitter.on("changed", aChangeHandler);
+      },
+      offChange: function(aTarget, aChangeHandler) {
+        eventEmitter.off("changed", aChangeHandler);
+      },
+    },
+    exec: function(args, context) {
+      toggleSplitConsole(context);
+    }
+  });
+
+  function toggleSplitConsole(context) {
+    let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
+    let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.getToolbox(target);
+
+    if (!toolbox) {
+      gDevTools.showToolbox(target, "inspector").then((toolbox) => {
+        toolbox.toggleSplitConsole();
+      });
+    } else {
+      toolbox.toggleSplitConsole();
+    }
+  }
+
+  let eventEmitter = new EventEmitter();
+  function fireChange(tab) {
+    eventEmitter.emit("changed", tab);
+  }
+
+  gDevTools.on("toolbox-ready", (e, toolbox) => {
+    if (!toolbox.target) {
+      return;
+    }
+    let fireChangeForTab = fireChange.bind(this, toolbox.target.tab);
+    toolbox.on("split-console", fireChangeForTab);
+    toolbox.on("select", fireChangeForTab);
+    toolbox.once("destroyed", () => {
+      toolbox.off("split-console", fireChangeForTab);
+      toolbox.off("select", fireChangeForTab);
+    });
+  });
+
+}(this));

browser/devtools/framework/toolbox.js

@@ -182,6 +182,13 @@ Toolbox.prototype = {
     return parseFloat(Services.prefs.getCharPref(ZOOM_PREF));
   },
 
+  /**
+   * Get the toggled state of the split console
+   */
+  get splitConsole() {
+    return this._splitConsole;
+  },
+
   /**
    * Open the toolbox
    */

browser/devtools/webconsole/test/browser_webconsole_split.js

@@ -63,22 +63,24 @@ function test()
   function getCurrentUIState()
   {
     let win = toolbox.doc.defaultView;
-    let deck = toolbox.doc.getElementById("toolbox-deck");
-    let webconsolePanel = toolbox.doc.getElementById("toolbox-panel-webconsole");
-    let splitter = toolbox.doc.getElementById("toolbox-console-splitter");
+    let deck = toolbox.doc.querySelector("#toolbox-deck");
+    let webconsolePanel = toolbox.doc.querySelector("#toolbox-panel-webconsole");
+    let splitter = toolbox.doc.querySelector("#toolbox-console-splitter");
 
     let containerHeight = parseFloat(win.getComputedStyle(deck.parentNode).getPropertyValue("height"));
     let deckHeight = parseFloat(win.getComputedStyle(deck).getPropertyValue("height"));
     let webconsoleHeight = parseFloat(win.getComputedStyle(webconsolePanel).getPropertyValue("height"));
     let splitterVisibility = !splitter.getAttribute("hidden");
     let openedConsolePanel = toolbox.currentToolId === "webconsole";
+    let cmdButton = toolbox.doc.querySelector("#command-button-splitconsole");
 
     return {
       deckHeight: deckHeight,
       containerHeight: containerHeight,
       webconsoleHeight: webconsoleHeight,
       splitterVisibility: splitterVisibility,
-      openedConsolePanel: openedConsolePanel
+      openedConsolePanel: openedConsolePanel,
+      buttonSelected: cmdButton.hasAttribute("checked")
     };
   }
 
@@ -97,6 +99,7 @@ function test()
     ok (currentUIState.deckHeight > 0, "Deck has a height > 0 when console is split");
     ok (currentUIState.webconsoleHeight > 0, "Web console has a height > 0 when console is split");
     ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");
+    ok (currentUIState.buttonSelected, "The command button is selected");
 
     openPanel("webconsole").then(() => {
 
@@ -106,6 +109,7 @@ function test()
       is (currentUIState.deckHeight, 0, "Deck has a height == 0 when console is opened.");
       is (currentUIState.webconsoleHeight, currentUIState.containerHeight, "Web console is full height.");
       ok (currentUIState.openedConsolePanel, "The console panel is the current tool");
+      ok (currentUIState.buttonSelected, "The command button is still selected.");
 
       // Make sure splitting console does nothing while webconsole is opened
       toolbox.toggleSplitConsole();
@@ -116,6 +120,7 @@ function test()
       is (currentUIState.deckHeight, 0, "Deck has a height == 0 when console is opened.");
       is (currentUIState.webconsoleHeight, currentUIState.containerHeight, "Web console is full height.");
       ok (currentUIState.openedConsolePanel, "The console panel is the current tool");
+      ok (currentUIState.buttonSelected, "The command button is still selected.");
 
       // Make sure that split state is saved after opening another panel
       openPanel("inspector").then(() => {
@@ -124,6 +129,7 @@ function test()
         ok (currentUIState.deckHeight > 0, "Deck has a height > 0 when console is split");
         ok (currentUIState.webconsoleHeight > 0, "Web console has a height > 0 when console is split");
         ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");
+        ok (currentUIState.buttonSelected, "The command button is still selected.");
 
         toolbox.toggleSplitConsole();
         deferred.resolve();
@@ -163,6 +169,7 @@ function test()
     is (currentUIState.deckHeight, currentUIState.containerHeight, "Deck has a height > 0 by default");
     is (currentUIState.webconsoleHeight, 0, "Web console is collapsed by default");
     ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");
+    ok (!currentUIState.buttonSelected, "The command button is not selected.");
 
     toolbox.toggleSplitConsole();
 
@@ -175,6 +182,7 @@ function test()
           currentUIState.containerHeight,
         "Everything adds up to container height");
     ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");
+    ok (currentUIState.buttonSelected, "The command button is selected.");
 
     toolbox.toggleSplitConsole();
 
@@ -184,9 +192,9 @@ function test()
     is (currentUIState.deckHeight, currentUIState.containerHeight, "Deck has a height > 0 after toggling");
     is (currentUIState.webconsoleHeight, 0, "Web console is collapsed after toggling");
     ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");
+    ok (!currentUIState.buttonSelected, "The command button is not selected.");
   }
 
-
   function testBottomHost()
   {
     checkHostType(Toolbox.HostType.BOTTOM);

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

@@ -1187,10 +1187,14 @@ paintflashingManual=Draw repainted areas in different colors
 # tooltip of button in devtools toolbox which toggles paint flashing.
 paintflashingTooltip=Highlight painted area
 
-# LOCALIZATION NOTE (paintflashingOnDesc) A very short string used to describe the
-# function of the "paintflashing on" command.
+# LOCALIZATION NOTE (paintflashingToggleDesc) A very short string used to describe the
+# function of the "paintflashing toggle" command.
 paintflashingToggleDesc=Toggle paint flashing
 
+# LOCALIZATION NOTE (splitconsoleTooltip) A string displayed as the
+# tooltip of button in devtools toolbox which toggles the split webconsole.
+splitconsoleTooltip=Toggle split console
+
 # LOCALIZATION NOTE (appCacheDesc) A very short string used to describe the
 # function of the "appcache" command
 appCacheDesc=Application cache utilities

browser/themes/linux/jar.mn

@@ -156,6 +156,7 @@ browser.jar:
   skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
   skin/classic/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
   skin/classic/browser/devtools/command-tilt.png      (devtools/command-tilt.png)
+  skin/classic/browser/devtools/command-console.png   (devtools/command-console.png)
   skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/ruleview.css          (devtools/ruleview.css)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)

browser/themes/osx/jar.mn

@@ -258,6 +258,7 @@ browser.jar:
   skin/classic/browser/devtools/command-responsivemode.png  (devtools/command-responsivemode.png)
   skin/classic/browser/devtools/command-scratchpad.png      (devtools/command-scratchpad.png)
   skin/classic/browser/devtools/command-tilt.png            (devtools/command-tilt.png)
+  skin/classic/browser/devtools/command-console.png         (devtools/command-console.png)
   skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/ruleview.css                (devtools/ruleview.css)
   skin/classic/browser/devtools/commandline.css             (devtools/commandline.css)

browser/themes/shared/devtools/toolbars.inc.css

@@ -441,6 +441,23 @@
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
 
+#command-button-splitconsole {
+  list-style-image: url("chrome://browser/skin/devtools/command-console.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#command-button-splitconsole:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-splitconsole:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#command-button-splitconsole[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
 /* Tabs */
 
 .devtools-tabbar {

browser/themes/windows/jar.mn

@@ -186,6 +186,7 @@ browser.jar:
         skin/classic/browser/devtools/command-responsivemode.png    (devtools/command-responsivemode.png)
         skin/classic/browser/devtools/command-scratchpad.png        (devtools/command-scratchpad.png)
         skin/classic/browser/devtools/command-tilt.png              (devtools/command-tilt.png)
+        skin/classic/browser/devtools/command-console.png           (devtools/command-console.png)
         skin/classic/browser/devtools/markup-view.css               (../shared/devtools/markup-view.css)
         skin/classic/browser/devtools/editor-error.png               (devtools/editor-error.png)
         skin/classic/browser/devtools/editor-breakpoint.png          (devtools/editor-breakpoint.png)
@@ -487,6 +488,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
         skin/classic/aero/browser/devtools/command-scratchpad.png    (devtools/command-scratchpad.png)
         skin/classic/aero/browser/devtools/command-tilt.png          (devtools/command-tilt.png)
+        skin/classic/aero/browser/devtools/command-console.png       (devtools/command-console.png)
         skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
         skin/classic/aero/browser/devtools/ruleview.css              (devtools/ruleview.css)
         skin/classic/aero/browser/devtools/commandline.css           (devtools/commandline.css)