Disable UI and show a throbber when the Style Editor is opened while …

…the page is still loading. b=701635
neonux · Nov 11, 2011 · cb91c59 · cb91c59
1 parent 96823b5
commit cb91c59
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git a/content/StyleEditorChrome.jsm b/content/StyleEditorChrome.jsm
@@ -156,11 +156,14 @@ StyleEditorChrome.prototype = {
     aContentWindow.addEventListener("unload", onContentUnload, false);
 
     if (aContentWindow.document.readyState == "complete") {
+      this._root.classList.remove("loading");
       this._populateChrome();
       return;
     } else {
+      this._root.classList.add("loading");
       let onContentReady = function () {
         aContentWindow.removeEventListener("load", onContentReady, false);
+        this._root.classList.remove("loading");
         this._populateChrome();
       }.bind(this);
       aContentWindow.addEventListener("load", onContentReady, false);
@@ -299,7 +302,7 @@ StyleEditorChrome.prototype = {
   },
 
   /**
-   * Reset the chrome UI to an empty state.
+   * Reset the chrome UI to an empty and ready state.
    */
   _resetChrome: function SEC__resetChrome()
   {
@@ -309,6 +312,12 @@ StyleEditorChrome.prototype = {
     this._editors = [];
 
     this._view.removeAll();
+
+    // (re)enable UI
+    let matches = this._root.querySelectorAll("button,input,select");
+    for (let i = 0; i < matches.length; ++i) {
+      matches[i].removeAttribute("disabled");
+    }
   },
 
   /**

diff --git a/content/styleeditor.css b/content/styleeditor.css
@@ -41,3 +41,7 @@
 .splitview-nav > li.error hgroup > .stylesheet-error-message {
   display: block;
 }
+
+.loading .splitview-nav-container > .placeholder {
+  display: none !important;
+}
diff --git a/content/styleeditor.xul b/content/styleeditor.xul
@@ -52,19 +52,21 @@
         persist="screenX screenY width height sizemode">
 <xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
 
-<xul:box id="style-editor-chrome" class="splitview-root">
+<xul:box id="style-editor-chrome" class="splitview-root loading">
   <xul:box class="splitview-side-details"></xul:box>
   <xul:box class="splitview-controller">
     <xul:box class="splitview-main">
       <xul:box class="toolbar">
         <xul:button class="style-editor-newButton"
                     accesskey="&newButton.accesskey;"
                     tooltiptext="&newButton.tooltip;"
-                    label="&newButton.label;"></xul:button>
+                    label="&newButton.label;"
+                    disabled="true"></xul:button>
         <xul:button class="style-editor-importButton"
                     accesskey="&importButton.accesskey;"
                     tooltiptext="&importButton.tooltip;"
-                    label="&importButton.label;"></xul:button>
+                    label="&importButton.label;"
+                    disabled="true"></xul:button>
         <xul:box flex="1"></xul:box>
         <xul:textbox class="splitview-filter"
                      type="search"

diff --git a/skin/styleeditor.css b/skin/styleeditor.css
@@ -35,6 +35,10 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+.loading .splitview-nav-container {
+  background: -moz-default-background-color url(chrome://browser/skin/tabbrowser/loading.png) no-repeat center center;
+}
+
 ol.splitview-nav:focus {
   outline: 0; /* focus ring is on the stylesheet name */
 }

diff --git a/test/ui/browser_styleeditor_loading.js b/test/ui/browser_styleeditor_loading.js
@@ -18,6 +18,18 @@ function test()
     isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
           "content document is still loading");
 
+    let root = gChromeWindow.document.querySelector(".splitview-root");
+    ok(root.classList.contains("loading"),
+       "style editor root element has 'loading' class name");
+
+    let button = gChromeWindow.document.querySelector(".style-editor-newButton");
+    ok(button.hasAttribute("disabled"),
+       "new style sheet button is disabled");
+
+    button = gChromeWindow.document.querySelector(".style-editor-importButton");
+    ok(button.hasAttribute("disabled"),
+       "import button is disabled");
+
     if (!aChrome.isContentAttached) {
       aChrome.addChromeListener({
         onContentAttach: run
@@ -35,5 +47,17 @@ function run(aChrome)
   is(aChrome.contentWindow.document.readyState, "complete",
      "content document is complete");
 
+  let root = gChromeWindow.document.querySelector(".splitview-root");
+  ok(!root.classList.contains("loading"),
+     "style editor root element does not have 'loading' class name anymore");
+
+  let button = gChromeWindow.document.querySelector(".style-editor-newButton");
+  ok(!button.hasAttribute("disabled"),
+     "new style sheet button is enabled");
+
+  button = gChromeWindow.document.querySelector(".style-editor-importButton");
+  ok(!button.hasAttribute("disabled"),
+     "import button is enabled");
+
   finish();
 }