Bug 679753 - Remove status bar in Scratchpad. Make Browser context more discoverable and notify user more visibly. Based on patch by Clochix. r=robcee

browser/devtools/scratchpad/scratchpad.js

@@ -84,10 +84,10 @@ var Scratchpad = {
   executionContext: SCRATCHPAD_CONTEXT_CONTENT,
 
   /**
-   * Retrieve the xul:statusbarpanel DOM element. The status bar tells the
-   * current code execution context.
+   * Retrieve the xul:notificationbox DOM element. It notifies the user when
+   * the current code execution context is SCRATCHPAD_CONTEXT_BROWSER.
    */
-  get statusbarStatus() document.getElementById("scratchpad-status"),
+  get notificationBox() document.getElementById("scratchpad-notificationbox"),
 
   /**
    * Get the selected text from the editor.
@@ -599,11 +599,15 @@ var Scratchpad = {
    */
   setContentContext: function SP_setContentContext()
   {
+    if (this.executionContext == SCRATCHPAD_CONTEXT_CONTENT) {
+      return;
+    }
+
     let content = document.getElementById("sp-menu-content");
     document.getElementById("sp-menu-browser").removeAttribute("checked");
     content.setAttribute("checked", true);
     this.executionContext = SCRATCHPAD_CONTEXT_CONTENT;
-    this.statusbarStatus.label = content.getAttribute("label");
+    this.notificationBox.removeAllNotifications(false);
     this.resetContext();
   },
 
@@ -612,11 +616,20 @@ var Scratchpad = {
    */
   setBrowserContext: function SP_setBrowserContext()
   {
+    if (this.executionContext == SCRATCHPAD_CONTEXT_BROWSER) {
+      return;
+    }
+
     let browser = document.getElementById("sp-menu-browser");
     document.getElementById("sp-menu-content").removeAttribute("checked");
     browser.setAttribute("checked", true);
     this.executionContext = SCRATCHPAD_CONTEXT_BROWSER;
-    this.statusbarStatus.label = browser.getAttribute("label");
+    this.notificationBox.appendNotification(
+      this.strings.GetStringFromName("browserContext.notification"),
+      SCRATCHPAD_CONTEXT_BROWSER,
+      null,
+      this.notificationBox.PRIORITY_WARNING_HIGH,
+      null);
     this.resetContext();
   },
 
@@ -664,8 +677,9 @@ var Scratchpad = {
 
     let chrome = Services.prefs.getBoolPref(DEVTOOLS_CHROME_ENABLED);
     if (chrome) {
-      chromeContextMenu.removeAttribute("hidden");
-      errorConsoleMenu.removeAttribute("hidden");
+      chromeContextMenu.removeAttribute("disabled");
+      chromeContextMenu.removeAttribute("tooltiptext");
+      errorConsoleMenu.removeAttribute("disabled");
       errorConsoleCommand.removeAttribute("disabled");
       chromeContextCommand.removeAttribute("disabled");
     }

browser/devtools/scratchpad/scratchpad.xul

@@ -274,9 +274,10 @@
                 command="sp-cmd-contentContext"
                 checked="true"
                 type="radio"/>
-      <menuitem id="sp-menu-browser" hidden="true"
+      <menuitem id="sp-menu-browser" disabled="true"
                 command="sp-cmd-browserContext"
                 label="&browserContext.label;"
+                tooltiptext="&browserContext.tooltiptext;"
                 accesskey="&browserContext.accesskey;"
                 type="radio"/>
       <menuseparator/>
@@ -291,7 +292,7 @@
         label="&toolsMenu.label;"
         accesskey="&toolsMenu.accesskey;">
     <menupopup id="sp-menu-tools">
-      <menuitem id="sp-menu-errorConsole" hidden="true"
+      <menuitem id="sp-menu-errorConsole" disabled="true"
                 label="&errorConsoleCmd.label;"
                 accesskey="&errorConsoleCmd.accesskey;"
                 key="sp-key-errorConsole"
@@ -332,12 +333,8 @@
   </menupopup>
 </popupset>
 
-<hbox id="scratchpad-editor" flex="1" context="scratchpad-text-popup" />
+<notificationbox id="scratchpad-notificationbox" flex="1">
+  <hbox id="scratchpad-editor" flex="1" context="scratchpad-text-popup" />
+</notificationbox>
 
-<statusbar id="scratchpad-statusbar" align="end">
-  <statusbarpanel id="scratchpad-status"
-                  label="&contentContext.label;"
-                  class="statusbarpanel-iconic-text"/>
-  <spacer flex="1"/>
-</statusbar>
 </window>

browser/devtools/scratchpad/test/browser_scratchpad_contexts.js

@@ -28,11 +28,11 @@ function runTests()
 
   let contentMenu = gScratchpadWindow.document.getElementById("sp-menu-content");
   let chromeMenu = gScratchpadWindow.document.getElementById("sp-menu-browser");
-  let statusbar = sp.statusbarStatus;
+  let notificationBox = sp.notificationBox;
 
   ok(contentMenu, "found #sp-menu-content");
   ok(chromeMenu, "found #sp-menu-browser");
-  ok(statusbar, "found Scratchpad.statusbarStatus");
+  ok(notificationBox, "found Scratchpad.notificationBox");
 
   sp.setContentContext();
 
@@ -45,8 +45,8 @@ function runTests()
   ok(!chromeMenu.hasAttribute("checked"),
      "chrome menuitem is not checked");
 
-  is(statusbar.getAttribute("label"), contentMenu.getAttribute("label"),
-     "statusbar label is correct");
+  ok(!notificationBox.currentNotification,
+     "there is no notification in content context");
 
   sp.setText("window.foobarBug636725 = 'aloha';");
 
@@ -69,8 +69,8 @@ function runTests()
   ok(!contentMenu.hasAttribute("checked"),
      "content menuitem is not checked");
 
-  is(statusbar.getAttribute("label"), chromeMenu.getAttribute("label"),
-     "statusbar label is correct");
+  ok(notificationBox.currentNotification,
+     "there is a notification in browser context");
 
   sp.setText("2'", 31, 33);
 

browser/devtools/scratchpad/test/browser_scratchpad_tab_switch.js

@@ -38,11 +38,11 @@ function runTests()
 
   let contentMenu = gScratchpadWindow.document.getElementById("sp-menu-content");
   let browserMenu = gScratchpadWindow.document.getElementById("sp-menu-browser");
-  let statusbar = sp.statusbarStatus;
+  let notificationBox = sp.notificationBox;
 
   ok(contentMenu, "found #sp-menu-content");
   ok(browserMenu, "found #sp-menu-browser");
-  ok(statusbar, "found Scratchpad.statusbarStatus");
+  ok(notificationBox, "found Scratchpad.notificationBox");
 
   sp.setContentContext();
 
@@ -55,8 +55,8 @@ function runTests()
   ok(!browserMenu.hasAttribute("checked"),
      "chrome menuitem is not checked");
 
-  is(statusbar.getAttribute("label"), contentMenu.getAttribute("label"),
-     "statusbar label is correct");
+  ok(!notificationBox,
+     "there is no notification in content context");
 
   sp.setText("window.foosbug653108 = 'aloha';");
 

browser/locales/en-US/chrome/browser/scratchpad.dtd

@@ -93,6 +93,7 @@
   -  was called "Chrome".
   -->
 <!ENTITY browserContext.label         "Browser">
+<!ENTITY browserContext.tooltiptext   "To enable this, set devtools.chrome.enabled preference to true in about:config">
 <!ENTITY browserContext.accesskey     "B">
 
 <!-- LOCALIZATION NOTE (resetContext.label): This command allows the developer

browser/locales/en-US/chrome/browser/scratchpad.properties

@@ -33,3 +33,7 @@ saveFile.failed=The file save operation failed.
 # how to use the Scratchpad. Note that this should be a valid JavaScript
 # comment inside /* and */.
 scratchpadIntro=/*\n * This is a JavaScript Scratchpad.\n *\n * Enter some JavaScript, then Right Click or choose from the Execute Menu:\n * 1. Run to evaluate the selected text,\n * 2. Inspect to bring up an Object Inspector on the result, or,\n * 3. Display to insert the result in a comment after the selection.\n */\n\n
+
+# LOCALIZATION NOTE  (notification.browserContext): This is the message displayed
+# over the top of the editor when the user has switched to browser context.
+browserContext.notification=This scratchpad executes in the Browser context.