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 916766 - Consistent theming across panels (adding webconsole and options panel). Also prevents flicker on panels while frame is loading. r=paul, ui-r=darrin

Browse Source
This commit is contained in:
Brian Grinstead 2013-11-13 12:02:05 -06:00
parent 8dec5db523
commit 198c03bdb2
25 changed files with 91 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/devtools/debugger/debugger.xul
View File

@ -21,6 +21,8 @@
width="960" height="480"
persist="screenX screenY width height sizemode">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
<script type="text/javascript" src="debugger-controller.js"/>
<script type="text/javascript" src="debugger-view.js"/>
@ -283,7 +285,7 @@
command="removeAllWatchExpressionsCommand"/>
</keyset>
<vbox id="body" layout="horizontal" flex="1">
<vbox id="body" layout="horizontal" flex="1" class="theme-body">
<toolbar id="debugger-toolbar"
class="devtools-toolbar">
<hbox id="debugger-controls">

5
browser/devtools/framework/toolbox-options.xul
View File

@ -11,8 +11,11 @@
<?xml-stylesheet rel="stylesheet" href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<hbox id="options-panel-container" flex="1">
<hbox id="options-panel" flex="1">
<hbox id="options-panel" class="theme-body" flex="1">
<vbox id="tools-box" class="options-vertical-pane" flex="1">
<label value="&options.selectDefaultTools.label;"/>
<vbox id="default-tools-box" class="options-groupbox" tabindex="0"/>

9
browser/devtools/framework/toolbox.js
View File

@ -497,8 +497,11 @@ Toolbox.prototype = {
radio.setAttribute("flex", "1");
}
if (!toolDefinition.bgTheme) {
toolDefinition.bgTheme = "theme-toolbar";
}
let vbox = this.doc.createElement("vbox");
vbox.className = "toolbox-panel";
vbox.className = "toolbox-panel " + toolDefinition.bgTheme;
vbox.id = "toolbox-panel-" + id;
@ -555,11 +558,15 @@ Toolbox.prototype = {
iframe.setAttribute("flex", 1);
iframe.setAttribute("forceOwnRefreshDriver", "");
iframe.tooltip = "aHTMLTooltip";
iframe.style.visibility = "hidden";
let vbox = this.doc.getElementById("toolbox-panel-" + id);
vbox.appendChild(iframe);
let onLoad = () => {
// Prevent flicker while loading by waiting to make visible until now.
iframe.style.visibility = "visible";
let built = definition.build(iframe.contentWindow, this);
promise.resolve(built).then((panel) => {
this._toolPanels.set(id, panel);

2
browser/devtools/framework/toolbox.xul
View File

@ -14,6 +14,8 @@
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
<commandset id="editMenuCommands"/>

4
browser/devtools/inspector/inspector.xul
View File

@ -16,7 +16,7 @@
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"></script>
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="application/javascript"
src="chrome://global/content/viewSourceUtils.js"/>
@ -70,7 +70,7 @@
</menupopup>
</popupset>
<box flex="1" class="devtools-responsive-container">
<box flex="1" class="devtools-responsive-container theme-body">
<vbox flex="1">
<toolbar id="inspector-toolbar"
class="devtools-toolbar"

3
browser/devtools/layoutview/view.xhtml
View File

@ -12,7 +12,8 @@
<head>
<title>&title;</title>
<script id="script-theme" type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="application/javascript;version=1.8" src="view.js"></script>
<script type="application/javascript;version=1.8">

1
browser/devtools/main.js
View File

@ -61,6 +61,7 @@ Tools.options = {
ordinal: 0,
url: "chrome://browser/content/devtools/framework/toolbox-options.xul",
icon: "chrome://browser/skin/devtools/tool-options.png",
bgTheme: "theme-body",
tooltip: l10n("optionsButton.tooltip", toolboxStrings),
inMenu: false,
isTargetSupported: function(target) {

3
browser/devtools/markupview/markup-view.xhtml
View File

@ -11,7 +11,8 @@
<link rel="stylesheet" href="chrome://browser/skin/devtools/markup-view.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/theme-switching.js"></script>
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
</head>
<body class="theme-body devtools-monospace" role="application">

5
browser/devtools/netmonitor/netmonitor.xul
View File

@ -14,6 +14,9 @@
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="text/javascript" src="netmonitor-controller.js"/>
<script type="text/javascript" src="netmonitor-view.js"/>
@ -36,7 +39,7 @@
</popupset>
<box id="body"
class="devtools-responsive-container"
class="devtools-responsive-container theme-body"
flex="1">
<vbox id="network-table" flex="1">
<toolbar id="requests-menu-toolbar"

6
browser/devtools/profiler/profiler.xul
View File

@ -16,8 +16,12 @@
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="text/javascript" src="sidebar.js"/>
<box flex="1" id="profiler-chrome" class="devtools-responsive-container">
<box flex="1" id="profiler-chrome"
class="devtools-responsive-container theme-body">
<vbox class="profiler-sidebar">
<toolbar class="devtools-toolbar">
<hbox id="profiler-controls">

6
browser/devtools/shadereditor/shadereditor.xul
View File

@ -13,8 +13,9 @@
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"></script>
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="application/javascript" src="shadereditor.js"/>
@ -43,7 +44,8 @@
value="&shaderEditorUI.emptyNotice;"/>
</hbox>
<box id="content" class="devtools-responsive-container" flex="1" hidden="true">
<box id="content" flex="1" hidden="true"
class="devtools-responsive-container theme-body">
<vbox id="shaders-pane"/>
<splitter class="devtools-side-splitter"/>
<box id="shaders-editors" class="devtools-responsive-container" flex="1">

43
browser/devtools/shared/theme-switching.js
View File

@ -19,20 +19,23 @@
}
function switchTheme(newTheme, oldTheme) {
let winUtils = window.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindowUtils);
if (oldTheme && newTheme != oldTheme) {
let oldThemeUrl = Services.io.newURI(
DEVTOOLS_SKIN_URL + oldTheme + "-theme.css", null, null);
try {
winUtils.removeSheet(oldThemeUrl, winUtils.AUTHOR_SHEET);
} catch(ex) {}
if (newTheme === oldTheme) {
return;
}
let newThemeUrl = Services.io.newURI(
DEVTOOLS_SKIN_URL + newTheme + "-theme.css", null, null);
winUtils.loadSheet(newThemeUrl, winUtils.AUTHOR_SHEET);
if (oldTheme && newTheme != oldTheme) {
StylesheetUtils.removeSheet(
window,
DEVTOOLS_SKIN_URL + oldTheme + "-theme.css",
"author"
);
}
StylesheetUtils.loadSheet(
window,
DEVTOOLS_SKIN_URL + newTheme + "-theme.css",
"author"
);
// Floating scrollbars à la osx
let hiddenDOMWindow = Cc["@mozilla.org/appshell/appShellService;1"]
@ -43,11 +46,17 @@
DEVTOOLS_SKIN_URL + "floating-scrollbars-light.css", null, null);
if (newTheme == "dark") {
winUtils.loadSheet(scrollbarsUrl, winUtils.AGENT_SHEET);
StylesheetUtils.loadSheet(
window,
scrollbarsUrl,
"agent"
);
} else if (oldTheme == "dark") {
try {
winUtils.removeSheet(scrollbarsUrl, winUtils.AGENT_SHEET);
} catch(ex) {}
StylesheetUtils.removeSheet(
window,
scrollbarsUrl,
"agent"
);
}
forceStyle();
}
@ -66,6 +75,8 @@
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource:///modules/devtools/gDevTools.jsm");
const {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
const StylesheetUtils = devtools.require("sdk/stylesheet/utils");
let theme = Services.prefs.getCharPref("devtools.theme");
switchTheme(theme);

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

@ -18,6 +18,8 @@
xmlns="http://www.w3.org/1999/xhtml"
id="style-editor-chrome-window">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
<xul:popupset id="style-editor-popups">

2
browser/devtools/webconsole/webconsole.js
View File

@ -2721,7 +2721,7 @@ WebConsoleFrame.prototype = {
locationNode.href = isScratchpad ? "#" : fullURL;
locationNode.draggable = false;
locationNode.setAttribute("title", aSourceURL);
locationNode.className = "location devtools-monospace";
locationNode.className = "location theme-link devtools-monospace";
// Make the location clickable.
this._addMessageLinkCallback(locationNode, () => {

5
browser/devtools/webconsole/webconsole.xul
View File

@ -21,6 +21,9 @@
windowtype="devtools:webconsole"
width="900" height="350"
persist="screenX screenY width height sizemode">
<script type="application/javascript;version=1.8"
src="chrome://browser/content/devtools/theme-switching.js"/>
<script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
<script type="text/javascript"><![CDATA[
function goUpdateConsoleCommands() {
@ -78,7 +81,7 @@ function goUpdateConsoleCommands() {
<tooltip id="aHTMLTooltip" page="true"/>
<box class="hud-outer-wrapper devtools-responsive-container" flex="1">
<box class="hud-outer-wrapper devtools-responsive-container theme-body" flex="1">
<vbox class="hud-console-wrapper" flex="1">
<toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
<toolbarbutton label="&btnPageNet.label;" type="menu-button"

4
browser/themes/linux/devtools/debugger.css
View File

@ -3,10 +3,6 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#body {
background: #fff;
}
/* Sources and breakpoints pane */
#sources-pane {

5
browser/themes/linux/devtools/toolbox.css
View File

@ -164,6 +164,7 @@
-moz-margin-start: 4px;
opacity: 0.6;
max-height: 16px;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
@ -248,10 +249,6 @@
visibility: collapse;
}
#options-panel {
background-image: url("chrome://browser/skin/newtab/noise.png");
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);

5
browser/themes/osx/devtools/common.css
View File

@ -21,10 +21,7 @@
.devtools-toolbar {
-moz-appearance: none;
padding: 4px 3px;
color: hsl(210,30%,85%);
background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
border-bottom: 1px solid #060a0d;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
border-bottom-width: 1px;
}
.devtools-menulist,

4
browser/themes/osx/devtools/debugger.css
View File

@ -5,10 +5,6 @@
%include ../shared.inc
#body {
background: #fff;
}
/* Sources and breakpoints pane */
#sources-pane {

5
browser/themes/osx/devtools/toolbox.css
View File

@ -150,6 +150,7 @@
-moz-margin-end: 0;
-moz-margin-start: 4px;
opacity: 0.6;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
@ -234,10 +235,6 @@
visibility: collapse;
}
#options-panel {
background-image: url("chrome://browser/skin/newtab/noise.png");
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);

8
browser/themes/shared/devtools/dark-theme.css
View File

@ -132,6 +132,14 @@
color: #bf5656;
}
.theme-toolbar,
.devtools-toolbar { /* General toolbar styling */
color: hsl(210,30%,85%);
background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
border-color: #060a0d;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
}
.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
color: black;
}

8
browser/themes/shared/devtools/light-theme.css
View File

@ -135,6 +135,14 @@
color: black;
}
.theme-toolbar,
.devtools-toolbar { /* General toolbar styling */
color: hsl(210,30%,85%);
background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
border-color: #060a0d;
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
}
.ruleview-colorswatch,
.computedview-colorswatch,
.markupview-colorswatch {

2
browser/themes/shared/devtools/webconsole.inc.css
View File

@ -97,8 +97,6 @@ a {
}
#output-wrapper {
background: #fff;
color: #000;
direction: ltr;
border-bottom: 1px solid ThreeDShadow;
overflow: auto;

4
browser/themes/windows/devtools/debugger.css
View File

@ -3,10 +3,6 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#body {
background: #fff;
}
/* Sources and breakpoints pane */
#sources-pane {

5
browser/themes/windows/devtools/toolbox.css
View File

@ -163,6 +163,7 @@
-moz-margin-end: 0;
-moz-margin-start: 4px;
opacity: 0.6;
width: 16px; /* Prevents collapse during theme switching */
}
#toolbox-tab-options > image {
@ -243,10 +244,6 @@
visibility: collapse;
}
#options-panel {
background-image: url("chrome://browser/skin/newtab/noise.png");
}
.options-vertical-pane {
margin: 5px;
width: calc(50% - 30px);