mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
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
This commit is contained in:
parent
8dec5db523
commit
198c03bdb2
@ -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">
|
||||
|
@ -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"/>
|
||||
|
@ -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);
|
||||
|
@ -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"/>
|
||||
|
@ -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"
|
||||
|
@ -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">
|
||||
|
@ -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) {
|
||||
|
@ -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">
|
||||
|
@ -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"
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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);
|
||||
|
@ -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">
|
||||
|
@ -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, () => {
|
||||
|
@ -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"
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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,
|
||||
|
@ -5,10 +5,6 @@
|
||||
|
||||
%include ../shared.inc
|
||||
|
||||
#body {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Sources and breakpoints pane */
|
||||
|
||||
#sources-pane {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -97,8 +97,6 @@ a {
|
||||
}
|
||||
|
||||
#output-wrapper {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
direction: ltr;
|
||||
border-bottom: 1px solid ThreeDShadow;
|
||||
overflow: auto;
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user