Bug 817579 - Command buttons in toolbox do not have tooltip; r=msucan,jwalker

browser/devtools/responsivedesign/CmdResize.jsm

@@ -32,6 +32,7 @@ gcli.addCommand({
   name: 'resize toggle',
   buttonId: "command-button-responsive",
   buttonClass: "command-button devtools-toolbarbutton",
+  tooltipText: gcli.lookup("resizeModeToggleTooltip"),
   description: gcli.lookup('resizeModeToggleDesc'),
   manual: gcli.lookup('resizeModeManual'),
   exec: gcli_cmd_resize

browser/devtools/scratchpad/CmdScratchpad.jsm

@@ -13,6 +13,7 @@ gcli.addCommand({
   name: "scratchpad",
   buttonId: "command-button-scratchpad",
   buttonClass: "command-button devtools-toolbarbutton",
+  tooltipText: gcli.lookup("scratchpadOpenTooltip"),
   hidden: true,
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;

browser/devtools/shared/DeveloperToolbar.jsm

@@ -81,6 +81,12 @@ this.CommandUtils = {
         if (command.buttonClass != null) {
           button.className = command.buttonClass;
         }
+        if (command.tooltipText != null) {
+          button.setAttribute("tooltiptext", command.tooltipText);
+        }
+        else if (command.description != null) {
+          button.setAttribute("tooltiptext", command.description);
+        }
 
         button.addEventListener("click", function() {
           requisition.update(buttonSpec.typed);

browser/devtools/tilt/CmdTilt.jsm

@@ -44,6 +44,7 @@ gcli.addCommand({
   name: "tilt toggle",
   buttonId: "command-button-tilt",
   buttonClass: "command-button  devtools-toolbarbutton",
+  tooltipText: gcli.lookup("tiltToggleTooltip"),
   hidden: true,
   exec: function(args, context) {
     let chromeWindow = context.environment.chromeDocument.defaultView;

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

@@ -189,6 +189,10 @@ tiltOpenDesc=Open the Inspector 3D view
 # command, displayed when the user asks for help on what it does.
 tiltOpenManual=Initialize the 3D page inspector and optionally highlight a node using a CSS selector
 
+# LOCALIZATION NOTE (tiltToggleTooltip) A string displayed as the
+# tooltip of button in devtools toolbox which toggles Tilt 3D View.
+tiltToggleTooltip=3D View
+
 # LOCALIZATION NOTE (tiltTranslateDesc) A very short description of the 'tilt translate'
 # command. See tiltTranslateManual for a fuller description of what it does. This
 # string is designed to be shown in a menu alongside the command name, which
@@ -476,6 +480,10 @@ resizeModeOffDesc=Exit Responsive Design Mode
 # alongside the command name, which is why it should be as short as possible.
 resizeModeToggleDesc=Toggle Responsive Design Mode
 
+# LOCALIZATION NOTE (resizeModeToggleTooltip) A string displayed as the
+# tooltip of button in devtools toolbox which toggles Responsive Design Mode.
+resizeModeToggleTooltip=Responsive Design Mode
+
 # LOCALIZATION NOTE (resizeModeToDesc) A very short string to describe the
 # 'resize to' command. This string is designed to be shown in a menu
 # alongside the command name, which is why it should be as short as possible.
@@ -977,3 +985,7 @@ callLogChromeEvalException=Evaluated JavaScript threw the following exception
 # result of passing a non-JavaScript object creating source via the
 # 'calllog chromestart javascript' command.
 callLogChromeEvalNeedsObject=The JavaScript source must evaluate to an object whose method calls are to be logged e.g. "({a1: function() {this.a2()},a2: function() {}});"
+
+# LOCALIZATION NOTE (scratchpadOpenTooltip) A string displayed as the
+# tooltip of button in devtools toolbox which opens Scratchpad.
+scratchpadOpenTooltip=Scratchpad