Bug 701635 - Style Editor should have a page loading placeholder; r=rcampbell
authorCedric Vivier <cedricv@neonux.com>
Fri, 13 Jan 2012 00:26:31 +0800
changeset 86128 4c3923ea4a2d8103ffa7756744ade24078fcda61
parent 86127 360620a4257564971ad0d0fa036dc8e7220d32af
child 86129 c2526ed5efdaed04d75b40b7e00fea935f337054
push id805
push userakeybl@mozilla.com
push dateWed, 01 Feb 2012 18:17:35 +0000
treeherdermozilla-aurora@6fb3bf232436 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcampbell
bugs701635
milestone12.0a1
Bug 701635 - Style Editor should have a page loading placeholder; r=rcampbell
browser/devtools/styleeditor/StyleEditorChrome.jsm
browser/devtools/styleeditor/splitview.css
browser/devtools/styleeditor/styleeditor.xul
browser/devtools/styleeditor/test/browser_styleeditor_loading.js
browser/themes/gnomestripe/devtools/splitview.css
browser/themes/gnomestripe/devtools/styleeditor.css
browser/themes/pinstripe/devtools/splitview.css
browser/themes/pinstripe/devtools/styleeditor.css
browser/themes/winstripe/devtools/splitview.css
browser/themes/winstripe/devtools/styleeditor.css
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm
@@ -151,21 +151,24 @@ StyleEditorChrome.prototype = {
       aContentWindow.removeEventListener("unload", onContentUnload, false);
       if (this.contentWindow == aContentWindow) {
         this.contentWindow = null; // detach
       }
     }.bind(this);
     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);
     }
   },
 
   /**
    * Retrieve the content document attached to this chrome.
@@ -294,26 +297,32 @@ StyleEditorChrome.prototype = {
       let editor = new StyleEditor(this.contentDocument);
       this._editors.push(editor);
       editor.addActionListener(this);
       editor.importFromFile(this._mockImportFile || null, this._window);
     }.bind(this));
   },
 
   /**
-   * Reset the chrome UI to an empty state.
+   * Reset the chrome UI to an empty and ready state.
    */
   _resetChrome: function SEC__resetChrome()
   {
     this._editors.forEach(function (aEditor) {
       aEditor.removeActionListener(this);
     }.bind(this));
     this._editors = [];
 
     this._view.removeAll();
+
+    // (re)enable UI
+    let matches = this._root.querySelectorAll("toolbarbutton,input,select");
+    for (let i = 0; i < matches.length; ++i) {
+      matches[i].removeAttribute("disabled");
+    }
   },
 
   /**
    * Populate the chrome UI according to the content document.
    *
    * @see StyleEditor._setupShadowStyleSheet
    */
   _populateChrome: function SEC__populateChrome()
--- a/browser/devtools/styleeditor/splitview.css
+++ b/browser/devtools/styleeditor/splitview.css
@@ -41,16 +41,20 @@ box,
   -moz-box-flex: 1;
   -moz-box-orient: vertical;
 }
 
 .splitview-nav-container {
   -moz-box-pack: center;
 }
 
+.loading .splitview-nav-container > .placeholder {
+  display: none !important;
+}
+
 .splitview-controller,
 .splitview-main {
   -moz-box-flex: 0;
 }
 
 .splitview-controller {
   min-height: 3em;
   max-height: 14em;
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -49,28 +49,30 @@
         xmlns="http://www.w3.org/1999/xhtml"
         id="style-editor-chrome-window"
         title="&window.title;"
         windowtype="Tools:StyleEditor"
         width="800" height="280"
         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-controller" id="stylesheets-controller" persist="width height">
     <xul:box class="splitview-main">
       <xul:toolbar class="devtools-toolbar">
         <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
                     accesskey="&newButton.accesskey;"
                     tooltiptext="&newButton.tooltip;"
-                    label="&newButton.label;"/>
+                    label="&newButton.label;"
+                    disabled="true"/>
         <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
                     accesskey="&importButton.accesskey;"
                     tooltiptext="&importButton.tooltip;"
-                    label="&importButton.label;"/>
+                    label="&importButton.label;"
+                    disabled="true"/>
         <xul:spacer flex="1"/>
         <xul:textbox class="splitview-filter devtools-searchinput"
                      type="search" flex="1"
                      tooltiptext="&searchInput.tooltip;"
                      placeholder="&searchInput.placeholder;"/>
       </xul:toolbar>
     </xul:box>
     <xul:box class="splitview-nav-container">
--- a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
@@ -13,16 +13,28 @@ function test()
 
   // launch Style Editor right when the tab is created (before load)
   // this checks that the Style Editor still launches correctly when it is opened
   // *while* the page is still loading
   launchStyleEditorChrome(function (aChrome) {
     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
       });
     } else {
       run(aChrome);
     }
   });
@@ -30,10 +42,22 @@ function test()
   content.location = TESTCASE_URI;
 }
 
 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();
 }
--- a/browser/themes/gnomestripe/devtools/splitview.css
+++ b/browser/themes/gnomestripe/devtools/splitview.css
@@ -36,16 +36,22 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 .splitview-nav-container {
   background-color: hsl(208,11%,27%);
   color: white;
 }
 
+.loading .splitview-nav-container {
+  background-image: url(chrome://global/skin/icons/loading_16.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
 .splitview-nav {
   -moz-appearance: none;
   margin: 0;
   box-shadow: inset -1px 0 0 #222426;
 }
 
 .splitview-nav > li {
   color: white;
--- a/browser/themes/gnomestripe/devtools/styleeditor.css
+++ b/browser/themes/gnomestripe/devtools/styleeditor.css
@@ -31,16 +31,20 @@
  * use your version of this file under the terms of the MPL, indicate your
  * decision by deleting the provisions above and replace them with the notice
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
 
+#style-editor-chrome {
+  background-color: hsl(208,11%,27%);
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
   color: hsl(207,17%,88%);
 }
 
 .stylesheet-name {
   font-size: 13px;
--- a/browser/themes/pinstripe/devtools/splitview.css
+++ b/browser/themes/pinstripe/devtools/splitview.css
@@ -36,16 +36,22 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 .splitview-nav-container {
   background-color: hsl(208,11%,27%);
   color: white;
 }
 
+.loading .splitview-nav-container {
+  background-image: url(chrome://global/skin/icons/loading_16.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
 .splitview-nav {
   -moz-appearance: none;
   margin: 0;
   box-shadow: inset -1px 0 0 #222426;
 }
 
 .splitview-nav > li {
   color: white;
--- a/browser/themes/pinstripe/devtools/styleeditor.css
+++ b/browser/themes/pinstripe/devtools/styleeditor.css
@@ -31,16 +31,20 @@
  * use your version of this file under the terms of the MPL, indicate your
  * decision by deleting the provisions above and replace them with the notice
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
 
+#style-editor-chrome {
+  background-color: hsl(208,11%,27%);
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
   color: hsl(207,17%,88%);
 }
 
 .stylesheet-name {
   font-size: 13px;
--- a/browser/themes/winstripe/devtools/splitview.css
+++ b/browser/themes/winstripe/devtools/splitview.css
@@ -36,16 +36,22 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 .splitview-nav-container {
   background-color: hsl(211,21%,26%);
   color: white;
 }
 
+.loading .splitview-nav-container {
+  background-image: url(chrome://global/skin/icons/loading_16.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
 .splitview-nav {
   -moz-appearance: none;
   margin: 0;
   box-shadow: inset -1px 0 0 #222426;
 }
 
 .splitview-nav > li {
   color: white;
--- a/browser/themes/winstripe/devtools/styleeditor.css
+++ b/browser/themes/winstripe/devtools/styleeditor.css
@@ -31,16 +31,20 @@
  * use your version of this file under the terms of the MPL, indicate your
  * decision by deleting the provisions above and replace them with the notice
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
 
+#style-editor-chrome {
+  background-color: hsl(211,21%,26%);
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
   color: hsl(210,30%,85%);
 }
 
 .stylesheet-name {
   font-size: 13px;