wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 701635 - Style Editor should have a page loading placeholder; r=rcampbell

Browse Source
This commit is contained in:
Cedric Vivier 2012-01-13 00:26:31 +08:00
parent 6c95ab0f5a
commit 11601f0c7d
10 changed files with 73 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
browser/devtools/styleeditor/StyleEditorChrome.jsm
View File

@ -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");
}
},
/**

4
browser/devtools/styleeditor/splitview.css
View File

@ -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;

8
browser/devtools/styleeditor/styleeditor.xul
View File

@ -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"

24
browser/devtools/styleeditor/test/browser_styleeditor_loading.js
View File

@ -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();
}

6
browser/themes/gnomestripe/devtools/splitview.css
View File

@ -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;

4
browser/themes/gnomestripe/devtools/styleeditor.css
View File

@ -36,6 +36,10 @@
*
* ***** END LICENSE BLOCK ***** */
#style-editor-chrome {
background-color: hsl(208,11%,27%);
}
.stylesheet-title,
.stylesheet-name {
text-decoration: none;

6
browser/themes/pinstripe/devtools/splitview.css
View File

@ -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;

4
browser/themes/pinstripe/devtools/styleeditor.css
View File

@ -36,6 +36,10 @@
*
* ***** END LICENSE BLOCK ***** */
#style-editor-chrome {
background-color: hsl(208,11%,27%);
}
.stylesheet-title,
.stylesheet-name {
text-decoration: none;

6
browser/themes/winstripe/devtools/splitview.css
View File

@ -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;

4
browser/themes/winstripe/devtools/styleeditor.css
View File

@ -36,6 +36,10 @@
*
* ***** END LICENSE BLOCK ***** */
#style-editor-chrome {
background-color: hsl(211,21%,26%);
}
.stylesheet-title,
.stylesheet-name {
text-decoration: none;