зеркало из https://github.com/mozilla/gecko-dev.git
Bug 969914 - Make developer toolbar match the light devtools theme when applied;r=jwalker,r=pbrosset
This commit is contained in:
Brian Grinstead
Родитель
b8bfa41dd9
Коммит
0511749b55
|
|
@ -835,6 +835,7 @@ OutputPanel.prototype._init = function(devtoolbar) {
|
|||
this._frame.removeEventListener("load", onload, true);
|
||||
|
||||
this.document = this._frame.contentDocument;
|
||||
this._copyTheme();
|
||||
|
||||
this._div = this.document.getElementById("gcli-output-root");
|
||||
this._div.classList.add('gcli-row-out');
|
||||
|
|
@ -851,6 +852,16 @@ OutputPanel.prototype._init = function(devtoolbar) {
|
|||
return deferred.promise;
|
||||
}
|
||||
|
||||
/* Copy the current devtools theme attribute into the iframe,
|
||||
so it can be styled correctly. */
|
||||
OutputPanel.prototype._copyTheme = function() {
|
||||
if (this.document) {
|
||||
let theme =
|
||||
this._devtoolbar._doc.documentElement.getAttribute("devtoolstheme");
|
||||
this.document.documentElement.setAttribute("devtoolstheme", theme);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Prevent the popup from hiding if it is not permitted via this.canHide.
|
||||
*/
|
||||
|
|
@ -875,6 +886,7 @@ OutputPanel.prototype.show = function() {
|
|||
this._frame.style.minHeight = this._frame.style.maxHeight = 0;
|
||||
this._frame.style.minWidth = 0;
|
||||
|
||||
this._copyTheme();
|
||||
this._panel.openPopup(this._input, "before_start", 0, 0, false, false, null);
|
||||
this._resize();
|
||||
|
||||
|
|
@ -1090,6 +1102,7 @@ TooltipPanel.prototype._init = function(devtoolbar) {
|
|||
let deferred = promise.defer();
|
||||
|
||||
let chromeDocument = devtoolbar._doc;
|
||||
this._devtoolbar = devtoolbar;
|
||||
this._input = devtoolbar._doc.querySelector(".gclitoolbar-input-node");
|
||||
this._toolbar = devtoolbar._doc.querySelector("#developer-toolbar");
|
||||
this._dimensions = { start: 0, end: 0 };
|
||||
|
|
@ -1146,6 +1159,7 @@ TooltipPanel.prototype._init = function(devtoolbar) {
|
|||
this._frame.removeEventListener("load", onload, true);
|
||||
|
||||
this.document = this._frame.contentDocument;
|
||||
this._copyTheme();
|
||||
this.hintElement = this.document.getElementById("gcli-tooltip-root");
|
||||
this._connector = this.document.getElementById("gcli-tooltip-connector");
|
||||
|
||||
|
|
@ -1158,7 +1172,17 @@ TooltipPanel.prototype._init = function(devtoolbar) {
|
|||
this._frame.addEventListener("load", onload, true);
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
};
|
||||
|
||||
/* Copy the current devtools theme attribute into the iframe,
|
||||
so it can be styled correctly. */
|
||||
TooltipPanel.prototype._copyTheme = function() {
|
||||
if (this.document) {
|
||||
let theme =
|
||||
this._devtoolbar._doc.documentElement.getAttribute("devtoolstheme");
|
||||
this.document.documentElement.setAttribute("devtoolstheme", theme);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Prevent the popup from hiding if it is not permitted via this.canHide.
|
||||
|
|
@ -1191,6 +1215,7 @@ TooltipPanel.prototype.show = function(dimensions) {
|
|||
this.canHide = false;
|
||||
}
|
||||
|
||||
this._copyTheme();
|
||||
this._resize();
|
||||
this._panel.openPopup(this._input, "before_start", dimensions.start * 10, 0,
|
||||
false, false, null);
|
||||
|
|
|
|||
|
|
@ -11,17 +11,16 @@
|
|||
thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Protocol error (unknownError): Error: Got an invalid root window in DocumentWalker");
|
||||
|
||||
const TEST_URI = "data:text/html;charset=utf-8,<p>Tooltip Tests</p>";
|
||||
const PREF_DEVTOOLS_THEME = "devtools.theme";
|
||||
|
||||
function test() {
|
||||
addTab(TEST_URI, function() {
|
||||
Task.spawn(runTest).catch(err => {
|
||||
ok(false, ex);
|
||||
console.error(ex);
|
||||
}).then(finish);
|
||||
});
|
||||
}
|
||||
registerCleanupFunction(() => {
|
||||
// Set preferences back to their original values
|
||||
Services.prefs.clearUserPref(PREF_DEVTOOLS_THEME);
|
||||
});
|
||||
|
||||
add_task(function* showToolbar() {
|
||||
yield promiseTab(TEST_URI);
|
||||
|
||||
function* runTest() {
|
||||
info("Starting browser_toolbar_tooltip.js");
|
||||
|
||||
ok(!DeveloperToolbar.visible, "DeveloperToolbar is not visible in runTest");
|
||||
|
|
@ -29,7 +28,9 @@ function* runTest() {
|
|||
let showPromise = observeOnce(DeveloperToolbar.NOTIFICATIONS.SHOW);
|
||||
document.getElementById("Tools:DevToolbar").doCommand();
|
||||
yield showPromise;
|
||||
});
|
||||
|
||||
add_task(function* testDimensions() {
|
||||
let tooltipPanel = DeveloperToolbar.tooltipPanel;
|
||||
|
||||
DeveloperToolbar.display.focusManager.helpRequest();
|
||||
|
|
@ -54,7 +55,26 @@ function* runTest() {
|
|||
is(tooltipPanel._dimensions.start, 0,
|
||||
'search param start, when cursor at start');
|
||||
ok(getLeftMargin() > 9, 'tooltip offset, when cursor at start')
|
||||
}
|
||||
});
|
||||
|
||||
add_task(function* testThemes() {
|
||||
let tooltipPanel = DeveloperToolbar.tooltipPanel;
|
||||
ok(tooltipPanel.document, "Tooltip panel is initialized");
|
||||
|
||||
Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
|
||||
|
||||
yield DeveloperToolbar.display.inputter.setInput("");
|
||||
yield DeveloperToolbar.display.inputter.setInput("help help");
|
||||
is(tooltipPanel.document.documentElement.getAttribute("devtoolstheme"),
|
||||
"dark", "Tooltip panel has correct theme");
|
||||
|
||||
Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
|
||||
|
||||
yield DeveloperToolbar.display.inputter.setInput("");
|
||||
yield DeveloperToolbar.display.inputter.setInput("help help");
|
||||
is(tooltipPanel.document.documentElement.getAttribute("devtoolstheme"),
|
||||
"light", "Tooltip panel has correct theme");
|
||||
});
|
||||
|
||||
function getLeftMargin() {
|
||||
let style = DeveloperToolbar.tooltipPanel._panel.style.marginLeft;
|
||||
|
|
|
|||
|
|
@ -2,18 +2,36 @@
|
|||
* 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/. */
|
||||
|
||||
|
||||
/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
|
||||
We are copy/pasting variables from light-theme and dark-theme,
|
||||
since they aren't loaded in this context (within commandlineoutput.xhtml
|
||||
and commandlinetooltip.xhtml). */
|
||||
:root[devtoolstheme="light"] {
|
||||
--gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */
|
||||
--gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */
|
||||
--gcli-input-color: #18191a; /* --theme-body-color */
|
||||
--gcli-border-color: #aaaaaa; /* --theme-splitter-color */
|
||||
}
|
||||
|
||||
:root[devtoolstheme="dark"] {
|
||||
--gcli-background-color: #343c45; /* --theme-toolbar-background */
|
||||
--gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */
|
||||
--gcli-input-color: #b6babf; /* --theme-body-color-alt */
|
||||
--gcli-border-color: black; /* --theme-splitter-color */
|
||||
}
|
||||
|
||||
.gcli-body {
|
||||
margin: 0;
|
||||
font: message-box;
|
||||
color: hsl(210,30%,85%);
|
||||
color: var(--gcli-input-color);
|
||||
}
|
||||
|
||||
#gcli-output-root,
|
||||
#gcli-tooltip-root {
|
||||
border: 1px solid hsl(206,37%,4%);
|
||||
box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
|
||||
background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%));
|
||||
border: 1px solid var(--gcli-border-color);
|
||||
border-radius: 3px;
|
||||
background-color: var(--gcli-background-color);
|
||||
}
|
||||
|
||||
#gcli-output-root {
|
||||
|
|
@ -32,9 +50,9 @@
|
|||
margin-left: 8px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
border-left: 1px solid hsl(206,37%,4%);
|
||||
border-right: 1px solid hsl(206,37%,4%);
|
||||
background-color: hsl(209,23%,18%);
|
||||
border-left: 1px solid var(--gcli-border-color);
|
||||
border-right: 1px solid var(--gcli-border-color);
|
||||
background-color: var(--gcli-background-color);
|
||||
}
|
||||
|
||||
.gcli-tt-description,
|
||||
|
|
@ -47,7 +65,7 @@
|
|||
line-height: 1.2em;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: hsl(210,30%,85%);
|
||||
color: var(--gcli-input-color);
|
||||
}
|
||||
|
||||
.gcli-row-out p,
|
||||
|
|
@ -65,7 +83,7 @@
|
|||
.gcli-row-out th,
|
||||
.gcli-row-out strong,
|
||||
.gcli-row-out pre {
|
||||
color: hsl(210,30%,95%);
|
||||
color: var(--gcli-input-color);
|
||||
}
|
||||
|
||||
.gcli-row-out pre {
|
||||
|
|
@ -83,13 +101,13 @@
|
|||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
border-radius: 3px;
|
||||
background-color: hsl(209,23%,18%);
|
||||
border: 1px solid hsl(206,37%,4%);
|
||||
background-color: var(--gcli-background-color);
|
||||
border: 1px solid var(--gcli-border-color);
|
||||
}
|
||||
|
||||
.gcli-out-shortcut:before,
|
||||
.gcli-help-synopsis:before {
|
||||
color: hsl(210,30%,85%);
|
||||
color: var(--gcli-input-color);
|
||||
-moz-padding-end: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -117,12 +135,12 @@
|
|||
|
||||
.gcli-menu-desc {
|
||||
-moz-padding-end: 8px;
|
||||
color: hsl(210,30%,75%);
|
||||
color: var(--gcli-input-color);
|
||||
}
|
||||
|
||||
.gcli-menu-name:hover,
|
||||
.gcli-menu-desc:hover {
|
||||
background-color: hsla(0,0%,0%,.3);
|
||||
background-color: var(--gcli-input-focused-background);
|
||||
}
|
||||
|
||||
.gcli-menu-highlight,
|
||||
|
|
|
|||
|
|
@ -6,13 +6,35 @@
|
|||
|
||||
/* Developer toolbar */
|
||||
|
||||
/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
|
||||
We are copy/pasting variables from light-theme and dark-theme,
|
||||
since they aren't loaded in this context (within browser.css). */
|
||||
:root[devtoolstheme="light"] #developer-toolbar {
|
||||
--gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */
|
||||
--gcli-input-background: #f0f1f2; /* --theme-toolbar-background */
|
||||
--gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */
|
||||
--gcli-input-color: #18191a; /* --theme-body-color */
|
||||
--gcli-border-color: #aaaaaa; /* --theme-splitter-color */
|
||||
--selection-background: #4c9ed9; /* --theme-selection-background */
|
||||
--selection-color: #f5f7fa; /* --theme-selection-color */
|
||||
}
|
||||
|
||||
:root[devtoolstheme="dark"] #developer-toolbar {
|
||||
--gcli-background-color: #343c45; /* --theme-toolbar-background */
|
||||
--gcli-input-background: rgba(37, 44, 51, .6); /* --theme-tab-toolbar-background */
|
||||
--gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */
|
||||
--gcli-input-color: #b6babf; /* --theme-body-color-alt */
|
||||
--gcli-border-color: black; /* --theme-splitter-color */
|
||||
--selection-background: #1d4f73; /* --theme-selection-background */
|
||||
--selection-color: #f5f7fa; /* --theme-selection-color */
|
||||
}
|
||||
|
||||
#developer-toolbar {
|
||||
-moz-appearance: none;
|
||||
padding: 0;
|
||||
min-height: 32px;
|
||||
background-color: #343C45; /* Toolbars */
|
||||
border-top: 1px solid #060a0d;
|
||||
box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset;
|
||||
background-color: var(--gcli-background-color);
|
||||
border-top: 1px solid var(--gcli-border-color);
|
||||
}
|
||||
|
||||
#developer-toolbar > toolbarbutton {
|
||||
|
|
@ -28,6 +50,11 @@
|
|||
margin: auto 10px;
|
||||
}
|
||||
|
||||
:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image,
|
||||
:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before {
|
||||
filter: url("chrome://browser/skin/devtools/filters.svg#invert");
|
||||
}
|
||||
|
||||
.developer-toolbar-button > .toolbarbutton-icon,
|
||||
#developer-toolbar-closebutton > .toolbarbutton-icon {
|
||||
width: 16px;
|
||||
|
|
@ -135,24 +162,25 @@ html|*#gcli-output-frame {
|
|||
box-shadow: none;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.gclitoolbar-input-node {
|
||||
-moz-appearance: none;
|
||||
color: hsl(210,30%,85%);
|
||||
background-color: #242b33;
|
||||
color: var(--gcli-input-color);
|
||||
background-color: var(--gcli-input-background);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 4px center;
|
||||
box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset,
|
||||
1px 0 0 hsla(206,37%,4%,.2) inset,
|
||||
-1px 0 0 hsla(206,37%,4%,.2) inset;
|
||||
box-shadow: 1px 0 0 var(--gcli-border-color) inset,
|
||||
-1px 0 0 var(--gcli-border-color) inset;
|
||||
|
||||
line-height: 32px;
|
||||
outline-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gclitoolbar-input-node[focused="true"] {
|
||||
background-color: #232e38;
|
||||
background-color: var(--gcli-input-focused-background);
|
||||
}
|
||||
|
||||
.gclitoolbar-input-node::before {
|
||||
|
|
@ -178,8 +206,8 @@ html|*#gcli-output-frame {
|
|||
}
|
||||
|
||||
.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
|
||||
background-color: hsl(210,30%,85%);
|
||||
color: hsl(210,24%,16%);
|
||||
background-color: var(--selection-background);
|
||||
color: var(--selection-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/* Colors are taken from:
|
||||
* https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
|
||||
* https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
|
||||
* Changes should be kept in sync with commandline.css and commandline.inc.css.
|
||||
*/
|
||||
:root {
|
||||
|
||||
--theme-body-background: #14171a;
|
||||
--theme-sidebar-background: #181d20;
|
||||
--theme-contrast-background: #b28025;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/* Colors are taken from:
|
||||
* https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
|
||||
* https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
|
||||
* Changes should be kept in sync with commandline.css and commandline.inc.css.
|
||||
*/
|
||||
:root {
|
||||
--theme-body-background: #fcfcfc;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче