Bug 734664 - Devtools toolbox should display the actual target url when detached. r=paul

browser/devtools/framework/Toolbox.jsm

@@ -19,11 +19,15 @@ XPCOMUtils.defineLazyModuleGetter(this, "CommandUtils",
 
 XPCOMUtils.defineLazyGetter(this, "toolboxStrings", function() {
   let bundle = Services.strings.createBundle("chrome://browser/locale/devtools/toolbox.properties");
-  let l10n = function(name) {
+  let l10n = function(aName, ...aArgs) {
     try {
-      return bundle.GetStringFromName(name);
+      if (aArgs.length == 0) {
+        return bundle.GetStringFromName(aName);
+      } else {
+        return bundle.formatStringFromName(aName, aArgs, aArgs.length);
+      }
     } catch (ex) {
-      Services.console.logStringMessage("Error reading '" + name + "'");
+      Services.console.logStringMessage("Error reading '" + aName + "'");
     }
   };
   return l10n;
@@ -140,6 +144,11 @@ this.Toolbox = function Toolbox(target, selectedTool, hostType) {
 
   EventEmitter.decorate(this);
 
+  this._refreshHostTitle = this._refreshHostTitle.bind(this);
+  this._target.on("navigate", this._refreshHostTitle);
+  this.on("host-changed", this._refreshHostTitle);
+  this.on("select", this._refreshHostTitle);
+
   gDevTools.on("tool-registered", this._toolRegistered);
   gDevTools.on("tool-unregistered", this._toolUnregistered);
 }
@@ -508,6 +517,24 @@ Toolbox.prototype = {
     this._host.raise();
   },
 
+  /**
+   * Refresh the host's title.
+   */
+  _refreshHostTitle: function TBOX_refreshHostTitle() {
+    let toolName;
+    let toolId = this.currentToolId;
+    if (toolId) {
+      let toolDef = gDevTools.getToolDefinitionMap().get(toolId);
+      toolName = toolDef.label;
+    } else {
+      // no tool is selected
+      toolName = toolboxStrings("toolbox.defaultTitle");
+    }
+    let title = toolboxStrings("toolbox.titleTemplate",
+                               toolName, this.target.url);
+    this._host.setTitle(title);
+  },
+
   /**
    * Create a host object based on the given host type.
    *
@@ -649,6 +676,10 @@ Toolbox.prototype = {
       return this._destroyer;
     }
 
+    this._target.off("navigate", this._refreshHostTitle);
+    this.off("select", this._refreshHostTitle);
+    this.off("host-changed", this._refreshHostTitle);
+
     let outstanding = [];
 
     // Remote targets need to be notified that the toolbox is being torn down.

browser/devtools/framework/ToolboxHosts.jsm

@@ -85,6 +85,13 @@ BottomHost.prototype = {
     focusTab(this.hostTab);
   },
 
+  /**
+   * Set the toolbox title.
+   */
+  setTitle: function BH_setTitle(title) {
+    // Nothing to do for this host type.
+  },
+
   /**
    * Destroy the bottom dock.
    */
@@ -158,6 +165,13 @@ SidebarHost.prototype = {
     focusTab(this.hostTab);
   },
 
+  /**
+   * Set the toolbox title.
+   */
+  setTitle: function SH_setTitle(title) {
+    // Nothing to do for this host type.
+  },
+
   /**
    * Destroy the sidebar.
    */
@@ -235,6 +249,13 @@ WindowHost.prototype = {
     this._window.focus();
   },
 
+  /**
+   * Set the toolbox title.
+   */
+  setTitle: function WH_setTitle(title) {
+    this._window.document.title = title;
+  },
+
   /**
    * Destroy the window.
    */

browser/devtools/framework/test/Makefile.in

@@ -22,6 +22,7 @@ MOCHITEST_BROWSER_FILES = \
 		browser_toolbox_tool_ready.js \
 		browser_toolbox_sidebar.js \
 		browser_toolbox_window_shortcuts.js \
+		browser_toolbox_window_title_changes.js \
 		$(NULL)
 
 include $(topsrcdir)/config/rules.mk

browser/devtools/framework/test/browser_toolbox_window_title_changes.js

@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let temp = {};
+Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
+let Toolbox = temp.Toolbox;
+temp = null;
+
+function test() {
+  waitForExplicitFinish();
+
+  const URL_1 = "data:text/plain;charset=UTF-8,abcde";
+  const URL_2 = "data:text/plain;charset=UTF-8,12345";
+
+  const TOOL_ID_1 = "webconsole";
+  const TOOL_ID_2 = "jsdebugger";
+
+  const LABEL_1 = "Web Console";
+  const LABEL_2 = "Debugger";
+
+  let toolbox;
+
+  addTab(URL_1, function () {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, null, Toolbox.HostType.BOTTOM)
+      .then(function (aToolbox) { toolbox = aToolbox; })
+      .then(function () toolbox.selectTool(TOOL_ID_1))
+
+    // undock toolbox and check title
+      .then(function () toolbox.switchHost(Toolbox.HostType.WINDOW))
+      .then(checkTitle.bind(null, LABEL_1, URL_1, "toolbox undocked"))
+
+    // switch to different tool and check title
+      .then(function () toolbox.selectTool(TOOL_ID_2))
+      .then(checkTitle.bind(null, LABEL_2, URL_1, "tool changed"))
+
+    // navigate to different url and check title
+      .then(function () {
+        let deferred = Promise.defer();
+        target.once("navigate", function () deferred.resolve());
+        gBrowser.loadURI(URL_2);
+        return deferred.promise;
+      })
+      .then(checkTitle.bind(null, LABEL_2, URL_2, "url changed"))
+
+    // destroy toolbox, create new one hosted in a window (with a
+    // different tool id), and check title
+      .then(function () toolbox.destroy())
+      .then(function () gDevTools.showToolbox(target, null,
+                                              Toolbox.HostType.WINDOW))
+      .then(function (aToolbox) { toolbox = aToolbox; })
+      .then(function () toolbox.selectTool(TOOL_ID_1))
+      .then(checkTitle.bind(null, LABEL_1, URL_2,
+                            "toolbox destroyed and recreated"))
+
+      .then(function cleanUp() {
+        toolbox.destroy();
+        gBrowser.removeCurrentTab();
+        finish();
+      });
+  });
+}
+
+function checkTitle(toolLabel, url, context) {
+  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  let definitions = gDevTools.getToolDefinitionMap();
+  let expectedTitle = toolLabel + " - " + url;
+  is(win.document.title, expectedTitle, context);
+}

browser/devtools/framework/toolbox-window.xul

@@ -11,7 +11,6 @@
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         id="devtools-toolbox-window"
-        title="&window.title;"
         macanimationtype="document"
         fullscreenbutton="true"
         windowtype="devtools:toolbox"

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

@@ -2,8 +2,6 @@
    - 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/. -->
 
-<!ENTITY window.title  "Developer Tools">
-
 <!ENTITY closeCmd.key  "W">
 
 <!ENTITY toolboxCloseButton.tooltip  "Close Developer Tools">

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

@@ -20,3 +20,13 @@ toolboxToggleButton.warnings=#1 warning;#1 warnings
 # toolboxToggleButton.warnings as second argument to show the number of errors
 # and warnings.
 toolboxToggleButton.tooltip=%1$S, %2$S\nClick to toggle the developer tools.
+
+# LOCALIZATION NOTE (toolbox.titleTemplate): This is the template
+# used to format the title of the toolbox.
+# The name of the selected tool: %1$S.
+# The url of the page being tooled: %2$S.
+toolbox.titleTemplate=%1$S - %2$S
+
+# LOCALIZATION NOTE (toolbox.defaultTitle): This is used as the tool
+# name when no tool is selected.
+toolbox.defaultTitle=Developer Tools