mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 11:25:00 +00:00
Bug 701635 - Style Editor should have a page loading placeholder; r=rcampbell
This commit is contained in:
parent
0846c2be6f
commit
80947783b6
@ -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");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
|
@ -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"
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -36,6 +36,10 @@
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
#style-editor-chrome {
|
||||
background-color: hsl(208,11%,27%);
|
||||
}
|
||||
|
||||
.stylesheet-title,
|
||||
.stylesheet-name {
|
||||
text-decoration: none;
|
||||
|
@ -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;
|
||||
|
@ -36,6 +36,10 @@
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
#style-editor-chrome {
|
||||
background-color: hsl(208,11%,27%);
|
||||
}
|
||||
|
||||
.stylesheet-title,
|
||||
.stylesheet-name {
|
||||
text-decoration: none;
|
||||
|
@ -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;
|
||||
|
@ -36,6 +36,10 @@
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
#style-editor-chrome {
|
||||
background-color: hsl(211,21%,26%);
|
||||
}
|
||||
|
||||
.stylesheet-title,
|
||||
.stylesheet-name {
|
||||
text-decoration: none;
|
||||
|
Loading…
Reference in New Issue
Block a user