From b42ef163e51a771ceb942c1d33155c1ec24e3c0f Mon Sep 17 00:00:00 2001
From: Cedric Vivier <cedricv@neonux.com>
Date: Fri, 13 Jan 2012 00:26:31 +0800
Subject: [PATCH] Bug 701635 - Style Editor should have a page loading
 placeholder; r=rcampbell

---
 .../styleeditor/StyleEditorChrome.jsm         | 11 ++++++++-
 browser/devtools/styleeditor/splitview.css    |  4 ++++
 browser/devtools/styleeditor/styleeditor.xul  |  8 ++++---
 .../test/browser_styleeditor_loading.js       | 24 +++++++++++++++++++
 .../themes/gnomestripe/devtools/splitview.css |  6 +++++
 .../gnomestripe/devtools/styleeditor.css      |  4 ++++
 .../themes/pinstripe/devtools/splitview.css   |  6 +++++
 .../themes/pinstripe/devtools/styleeditor.css |  4 ++++
 .../themes/winstripe/devtools/splitview.css   |  6 +++++
 .../themes/winstripe/devtools/styleeditor.css |  4 ++++
 10 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
index b71a8d15bbb..097fda5746b 100644
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ b/browser/devtools/styleeditor/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("toolbarbutton,input,select");
+    for (let i = 0; i < matches.length; ++i) {
+      matches[i].removeAttribute("disabled");
+    }
   },
 
   /**
diff --git a/browser/devtools/styleeditor/splitview.css b/browser/devtools/styleeditor/splitview.css
index cf1f68eb069..1bc27022510 100644
--- a/browser/devtools/styleeditor/splitview.css
+++ b/browser/devtools/styleeditor/splitview.css
@@ -46,6 +46,10 @@ box,
   -moz-box-pack: center;
 }
 
+.loading .splitview-nav-container > .placeholder {
+  display: none !important;
+}
+
 .splitview-controller,
 .splitview-main {
   -moz-box-flex: 0;
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
index 86c12abf935..b29f64d4079 100644
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -54,18 +54,20 @@
         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"
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
index 01cb48201d5..9b5e86e4d83 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
+++ b/browser/devtools/styleeditor/test/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();
 }
diff --git a/browser/themes/gnomestripe/devtools/splitview.css b/browser/themes/gnomestripe/devtools/splitview.css
index c9ace130208..5c082b3c947 100644
--- a/browser/themes/gnomestripe/devtools/splitview.css
+++ b/browser/themes/gnomestripe/devtools/splitview.css
@@ -41,6 +41,12 @@
   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;
diff --git a/browser/themes/gnomestripe/devtools/styleeditor.css b/browser/themes/gnomestripe/devtools/styleeditor.css
index 6ed3edded54..8ab81bab485 100644
--- a/browser/themes/gnomestripe/devtools/styleeditor.css
+++ b/browser/themes/gnomestripe/devtools/styleeditor.css
@@ -36,6 +36,10 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+#style-editor-chrome {
+  background-color: hsl(208,11%,27%);
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
diff --git a/browser/themes/pinstripe/devtools/splitview.css b/browser/themes/pinstripe/devtools/splitview.css
index c9ace130208..5c082b3c947 100644
--- a/browser/themes/pinstripe/devtools/splitview.css
+++ b/browser/themes/pinstripe/devtools/splitview.css
@@ -41,6 +41,12 @@
   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;
diff --git a/browser/themes/pinstripe/devtools/styleeditor.css b/browser/themes/pinstripe/devtools/styleeditor.css
index 6ed3edded54..8ab81bab485 100644
--- a/browser/themes/pinstripe/devtools/styleeditor.css
+++ b/browser/themes/pinstripe/devtools/styleeditor.css
@@ -36,6 +36,10 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+#style-editor-chrome {
+  background-color: hsl(208,11%,27%);
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
diff --git a/browser/themes/winstripe/devtools/splitview.css b/browser/themes/winstripe/devtools/splitview.css
index 9b814797a86..054701dde56 100644
--- a/browser/themes/winstripe/devtools/splitview.css
+++ b/browser/themes/winstripe/devtools/splitview.css
@@ -41,6 +41,12 @@
   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;
diff --git a/browser/themes/winstripe/devtools/styleeditor.css b/browser/themes/winstripe/devtools/styleeditor.css
index bd933c15ccf..34446cfff27 100644
--- a/browser/themes/winstripe/devtools/styleeditor.css
+++ b/browser/themes/winstripe/devtools/styleeditor.css
@@ -36,6 +36,10 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+#style-editor-chrome {
+  background-color: hsl(211,21%,26%);
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;