--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -7,26 +7,26 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
</head>
<body class="theme-sidebar devtools-monospace" role="application" empty="true">
<div id="global-toolbar" class="theme-toolbar">
<span id="all-animations-label" class="label"></span>
- <button id="toggle-all" standalone="true" class="devtools-button pause-button"></button>
+ <button id="toggle-all" class="devtools-button pause-button"></button>
</div>
<div id="timeline-toolbar" class="theme-toolbar">
- <button id="rewind-timeline" standalone="true" class="devtools-button"></button>
- <button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></button>
- <span id="timeline-rate" standalone="true" class="devtools-button"></span>
+ <button id="rewind-timeline" class="devtools-button"></button>
+ <button id="pause-resume-timeline" class="devtools-button pause-button paused"></button>
+ <span id="timeline-rate" class="devtools-button"></span>
<span id="timeline-current-time" class="label"></span>
</div>
<div id="players"></div>
<div id="error-message">
<p id="error-type"></p>
<p id="error-hint"></p>
- <button id="element-picker" standalone="true" class="devtools-button"></button>
+ <button id="element-picker" data-standalone="true" class="devtools-button"></button>
</div>
<script type="application/javascript;version=1.8" src="animation-controller.js"></script>
<script type="application/javascript;version=1.8" src="animation-panel.js"></script>
</body>
</html>--- a/devtools/client/animationinspector/animation-panel.js
+++ b/devtools/client/animationinspector/animation-panel.js
@@ -195,21 +195,21 @@ var AnimationsPanel = {
document.body.setAttribute("empty", "true");
document.body.removeAttribute("timeline");
$("#error-type").textContent = L10N.getStr("panel.invalidElementSelected");
$("#error-hint").textContent = L10N.getStr("panel.selectElement");
}
},
onPickerStarted: function () {
- this.pickerButtonEl.setAttribute("checked", "true");
+ this.pickerButtonEl.classList.add("checked");
},
onPickerStopped: function () {
- this.pickerButtonEl.removeAttribute("checked");
+ this.pickerButtonEl.classList.remove("checked");
},
onToggleAllClicked: function () {
this.toggleAll().catch(ex => console.error(ex));
},
/**
* Toggle (pause/play) all animations in the current target--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -1450,17 +1450,17 @@ Inspector.prototype = {
visible: !isVisible,
animated: true,
delayed: true,
callback: onAnimationDone
}, sidePaneContainer);
},
onEyeDropperButtonClicked: function () {
- this.eyeDropperButton.hasAttribute("checked")
+ this.eyeDropperButton.classList.contains("checked")
? this.hideEyeDropper()
: this.showEyeDropper();
},
startEyeDropperListeners: function () {
this.inspector.once("color-pick-canceled", this.onEyeDropperDone);
this.inspector.once("color-picked", this.onEyeDropperDone);
this.walker.once("new-root", this.onEyeDropperDone);
@@ -1468,50 +1468,50 @@ Inspector.prototype = {
stopEyeDropperListeners: function () {
this.inspector.off("color-pick-canceled", this.onEyeDropperDone);
this.inspector.off("color-picked", this.onEyeDropperDone);
this.walker.off("new-root", this.onEyeDropperDone);
},
onEyeDropperDone: function () {
- this.eyeDropperButton.removeAttribute("checked");
+ this.eyeDropperButton.classList.remove("checked");
this.stopEyeDropperListeners();
},
/**
* Show the eyedropper on the page.
* @return {Promise} resolves when the eyedropper is visible.
*/
showEyeDropper: function () {
// The eyedropper button doesn't exist, most probably because the actor doesn't
// support the pickColorFromPage, or because the page isn't HTML.
if (!this.eyeDropperButton) {
return null;
}
this.telemetry.toolOpened("toolbareyedropper");
- this.eyeDropperButton.setAttribute("checked", "true");
+ this.eyeDropperButton.classList.add("checked");
this.startEyeDropperListeners();
return this.inspector.pickColorFromPage(this.toolbox, {copyOnSelect: true})
.catch(e => console.error(e));
},
/**
* Hide the eyedropper.
* @return {Promise} resolves when the eyedropper is hidden.
*/
hideEyeDropper: function () {
// The eyedropper button doesn't exist, most probably because the actor doesn't
// support the pickColorFromPage, or because the page isn't HTML.
if (!this.eyeDropperButton) {
return null;
}
- this.eyeDropperButton.removeAttribute("checked");
+ this.eyeDropperButton.classList.remove("checked");
this.stopEyeDropperListeners();
return this.inspector.cancelPickColorFromPage()
.catch(e => console.error(e));
},
/**
* Create a new node as the last child of the current selection, expand the
* parent and select the new node.--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1367,22 +1367,22 @@ CssRuleView.prototype = {
},
/**
* Called when the pseudo class panel button is clicked and toggles
* the display of the pseudo class panel.
*/
_onTogglePseudoClassPanel: function () {
if (this.pseudoClassPanel.hidden) {
- this.pseudoClassToggle.setAttribute("checked", "true");
+ this.pseudoClassToggle.classList.add("checked");
this.hoverCheckbox.setAttribute("tabindex", "0");
this.activeCheckbox.setAttribute("tabindex", "0");
this.focusCheckbox.setAttribute("tabindex", "0");
} else {
- this.pseudoClassToggle.removeAttribute("checked");
+ this.pseudoClassToggle.classList.remove("checked");
this.hoverCheckbox.setAttribute("tabindex", "-1");
this.activeCheckbox.setAttribute("tabindex", "-1");
this.focusCheckbox.setAttribute("tabindex", "-1");
}
this.pseudoClassPanel.hidden = !this.pseudoClassPanel.hidden;
},
--- a/devtools/client/memory/components/heap.js
+++ b/devtools/client/memory/components/heap.js
@@ -225,20 +225,19 @@ module.exports = createClass({
...contents
)
);
},
_renderInitial(onSnapshotClick) {
return this._renderHeapView("initial", dom.button(
{
- className: "devtools-toolbarbutton take-snapshot",
+ className: "devtools-button take-snapshot",
onClick: onSnapshotClick,
"data-standalone": true,
- "data-text-only": true,
},
L10N.getStr("take-snapshot")
));
},
_renderStatus(state, statusText, diffing) {
let throbber = "";
if (shouldDisplayThrobber(diffing)) {--- a/devtools/client/memory/components/toolbar.js
+++ b/devtools/client/memory/components/toolbar.js
@@ -266,17 +266,17 @@ module.exports = createClass({
onClick: onToggleDiffing,
title: L10N.getStr("diff-snapshots.tooltip"),
}
),
dom.button(
{
id: "import-snapshot",
- className: "devtools-toolbarbutton import-snapshot devtools-button",
+ className: "import-snapshot devtools-button",
onClick: onImportClick,
title: L10N.getStr("import-snapshot"),
}
)
),
dom.label(
{--- a/devtools/client/netmonitor/components/request-list-empty.js
+++ b/devtools/client/netmonitor/components/request-list-empty.js
@@ -36,17 +36,17 @@ const RequestListEmptyNotice = createCla
id: "requests-menu-empty-notice",
className: "request-list-empty-notice",
},
div({ id: "notice-reload-message" },
span(null, L10N.getStr("netmonitor.reloadNotice1")),
button(
{
id: "requests-menu-reload-notice-button",
- className: "devtools-toolbarbutton",
+ className: "devtools-button",
"data-standalone": true,
onClick: this.props.onReloadClick,
},
L10N.getStr("netmonitor.reloadNotice2")
),
span(null, L10N.getStr("netmonitor.reloadNotice3"))
),
div({ id: "notice-perf-message" },--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -60,17 +60,17 @@ function Toolbar({
let { count, bytes, millis } = summary;
const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
PluralForm.get(count, L10N.getStr("networkMenu.summary"))
.replace("#1", count)
.replace("#2", getSizeWithDecimals(bytes / 1024))
.replace("#3", getTimeWithDecimals(millis / 1000));
const buttons = requestFilterTypes.entrySeq().map(([type, checked]) => {
- let classList = ["menu-filter-button"];
+ let classList = ["devtools-button"];
checked && classList.push("checked");
return (
button({
id: `requests-menu-filter-${type}-button`,
className: classList.join(" "),
key: type,
onClick: toggleRequestFilterType,--- a/devtools/client/netmonitor/shared/components/headers-panel.js
+++ b/devtools/client/netmonitor/shared/components/headers-panel.js
@@ -19,17 +19,17 @@ const Services = require("Services");
const { gDevTools } = require("devtools/client/framework/devtools");
const HeadersMDN = require("devtools/client/netmonitor/shared/components/headers-mdn");
const { REPS, MODE } = require("devtools/client/shared/components/reps/load-reps");
const Rep = createFactory(REPS.Rep);
// Components
const PropertiesView = createFactory(require("./properties-view"));
-const { a, div, input, textarea } = DOM;
+const { a, button, div, input, textarea } = DOM;
const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
const RAW_HEADERS = L10N.getStr("netmonitor.summary.rawHeaders");
const RAW_HEADERS_REQUEST = L10N.getStr("netmonitor.summary.rawHeaders.requestHeaders");
const RAW_HEADERS_RESPONSE = L10N.getStr("netmonitor.summary.rawHeaders.responseHeaders");
const HEADERS_EMPTY_TEXT = L10N.getStr("headersEmptyText");
const HEADERS_FILTER_TEXT = L10N.getStr("headersFilterText");
const REQUEST_HEADERS = L10N.getStr("requestHeaders");
const REQUEST_HEADERS_FROM_UPLOAD = L10N.getStr("requestHeadersFromUpload");
@@ -157,28 +157,24 @@ const HeadersPanel = createClass({
className: "requests-menu-status-icon",
"data-code": code,
}),
input({
className: "tabpanel-summary-value textbox-input devtools-monospace",
readOnly: true,
value: `${status} ${statusText}`,
}),
- NetMonitorController.supportsCustomRequest && input({
- className: "tool-button",
+ NetMonitorController.supportsCustomRequest && button({
+ className: "devtools-button",
onClick: cloneSelectedRequest,
- type: "button",
- value: EDIT_AND_RESEND,
- }),
- input({
- className: "tool-button",
+ }, EDIT_AND_RESEND),
+ button({
+ className: "devtools-button",
onClick: this.toggleRawHeaders,
- type: "button",
- value: RAW_HEADERS,
- }),
+ }, RAW_HEADERS),
)
);
}
let summaryVersion = httpVersion ?
this.renderSummary(SUMMARY_VERSION, httpVersion) : null;
let summaryRawHeaders;--- a/devtools/client/netmonitor/test/browser_net_raw_headers.js
+++ b/devtools/client/netmonitor/test/browser_net_raw_headers.js
@@ -25,23 +25,23 @@ add_task(function* () {
wait = waitForDOM(document, ".headers-overview");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]);
yield wait;
wait = waitForDOM(document, ".raw-headers-container textarea", 2);
EventUtils.sendMouseEvent({ type: "click" },
- document.querySelectorAll(".headers-summary .tool-button")[1]);
+ document.querySelectorAll(".headers-summary .devtools-button")[1]);
yield wait;
testShowRawHeaders(getSortedRequests(gStore.getState()).get(0));
EventUtils.sendMouseEvent({ type: "click" },
- document.querySelectorAll(".headers-summary .tool-button")[1]);
+ document.querySelectorAll(".headers-summary .devtools-button")[1]);
testHideRawHeaders(document);
return teardown(monitor);
/*
* Tests that raw headers were displayed correctly
*/--- a/devtools/client/netmonitor/test/components/filter-buttons.test.js
+++ b/devtools/client/netmonitor/test/components/filter-buttons.test.js
@@ -80,23 +80,23 @@ describe("FilterButtons::toggleFilter:",
const store = configureStore();
const wrapper = mount(Provider(
{ store },
FilterButtons()
));
store.dispatch(Actions.toggleRequestFilterType("xhr"));
store.dispatch(Actions.toggleRequestFilterType("js"));
- asExpected(wrapper, expectXHRJSTypes, `when xhr, js is toggled`);
+ asExpected(wrapper, expectXHRJSTypes, "when xhr, js is toggled");
});
function asExpected(wrapper, expectTypes, description) {
for (let type of Object.keys(expectTypes)) {
let checked = expectTypes[type] ? "checked" : "not checked";
let className = expectTypes[type] ?
- "menu-filter-button checked": "menu-filter-button";
+ "devtools-button checked" : "devtools-button";
it(`'${type}' button is ${checked} ${description}`, () => {
expect(wrapper.find(`#requests-menu-filter-${type}-button`).html())
.toBe(`<button id="requests-menu-filter-${type}-button" class="` + className +
`" data-key="${type}">netmonitor.toolbar.filter.${type}</button>`);
});
}
}--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -392,17 +392,17 @@ function waitFor(subject, eventName) {
*
* @param string filterType
* The type of the filter that should be the only one checked.
*/
function testFilterButtons(monitor, filterType) {
let doc = monitor.panelWin.document;
let target = doc.querySelector("#requests-menu-filter-" + filterType + "-button");
ok(target, `Filter button '${filterType}' was found`);
- let buttons = [...doc.querySelectorAll(".menu-filter-button")];
+ let buttons = [...doc.querySelectorAll("#requests-menu-filter-buttons button")];
ok(buttons.length > 0, "More than zero filter buttons were found");
// Only target should be checked.
let checkStatus = buttons.map(button => button == target ? 1 : 0);
testFilterButtonsCustom(monitor, checkStatus);
}
/**
@@ -410,17 +410,17 @@ function testFilterButtons(monitor, filt
*
* @param array aIsChecked
* An array specifying if a button at given index should have a
* 'checked' attribute. For example, if the third item of the array
* evaluates to true, the third button should be checked.
*/
function testFilterButtonsCustom(aMonitor, aIsChecked) {
let doc = aMonitor.panelWin.document;
- let buttons = doc.querySelectorAll(".menu-filter-button");
+ let buttons = doc.querySelectorAll("#requests-menu-filter-buttons button");
for (let i = 0; i < aIsChecked.length; i++) {
let button = buttons[i];
if (aIsChecked[i]) {
is(button.classList.contains("checked"), true,
"The " + button.id + " button should have a 'checked' class.");
is(button.getAttribute("aria-pressed"), "true",
"The " + button.id + " button should set 'aria-pressed' = true.");
} else {--- a/devtools/client/performance/performance.xul
+++ b/devtools/client/performance/performance.xul
@@ -100,41 +100,41 @@
<toolbarbutton id="filter-button"
class="devtools-toolbarbutton"
popup="performance-filter-menupopup"
tooltiptext="&performanceUI.options.filter.tooltiptext;"/>
</hbox>
<hbox id="performance-toolbar-controls-detail-views"
class="devtools-toolbarbutton-group">
<toolbarbutton id="select-waterfall-view"
- class="devtools-toolbarbutton devtools-button"
+ class="devtools-toolbarbutton"
label="&performanceUI.toolbar.waterfall;"
hidden="true"
data-view="waterfall"
tooltiptext="&performanceUI.toolbar.waterfall.tooltiptext;" />
<toolbarbutton id="select-js-calltree-view"
- class="devtools-toolbarbutton devtools-button"
+ class="devtools-toolbarbutton"
label="&performanceUI.toolbar.js-calltree;"
hidden="true"
data-view="js-calltree"
tooltiptext="&performanceUI.toolbar.js-calltree.tooltiptext;" />
<toolbarbutton id="select-js-flamegraph-view"
- class="devtools-toolbarbutton devtools-button"
+ class="devtools-toolbarbutton"
label="&performanceUI.toolbar.js-flamegraph;"
hidden="true"
data-view="js-flamegraph"
tooltiptext="&performanceUI.toolbar.js-flamegraph.tooltiptext;" />
<toolbarbutton id="select-memory-calltree-view"
- class="devtools-toolbarbutton devtools-button"
+ class="devtools-toolbarbutton"
label="&performanceUI.toolbar.memory-calltree;"
hidden="true"
data-view="memory-calltree"
tooltiptext="&performanceUI.toolbar.allocations.tooltiptext;" />
<toolbarbutton id="select-memory-flamegraph-view"
- class="devtools-toolbarbutton devtools-button"
+ class="devtools-toolbarbutton"
label="&performanceUI.toolbar.memory-flamegraph;"
hidden="true"
data-view="memory-flamegraph" />
</hbox>
<spacer flex="1"></spacer>
<hbox id="performance-toolbar-controls-options"
class="devtools-toolbarbutton-group">
<toolbarbutton id="performance-options-button"--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -240,226 +240,130 @@ checkbox:-moz-focusring {
}
/* Toolbar buttons */
.devtools-menulist,
.devtools-toolbarbutton,
.devtools-button {
-moz-appearance: none;
background: transparent;
- min-height: 18px;
- text-shadow: none;
- border: none;
- border-radius: 0;
+ border: 1px solid var(--toolbarbutton-border-color);
+ border-radius: 2px;
color: var(--theme-body-color);
transition: background 0.05s ease-in-out;
-}
+ -moz-box-align: center;
+ text-shadow: none;
+ padding: 1px;
+ margin: 1px;
-.devtools-menulist,
-.devtools-toolbarbutton {
- -moz-box-align: center;
- min-width: 78px;
- padding: 1px;
- margin: 2px 1px;
+ /* Button text should not wrap on multiple lines */
+ white-space: nowrap;
}
.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
-.devtools-button::before {
+.devtools-button:empty::before {
width: 16px;
height: 16px;
+ margin: 0 3px;
transition: opacity 0.05s ease-in-out;
}
-/* HTML buttons */
-.devtools-button {
- margin: 2px 1px;
- padding: 1px;
- min-width: 32px;
- /* The icon is absolutely positioned in the button using ::before */
- position: relative;
-}
-
-.devtools-button::before {
+.devtools-button:empty::before {
content: "";
- display: block;
- position: absolute;
- offset-inline-start: 50%;
- offset-block-start: 50%;
- margin-block-start: -8px;
- margin-inline-start: -8px;
+ display: inline-block;
background-size: cover;
background-repeat: no-repeat;
- transition: opacity 0.05s ease-in-out;
+ vertical-align: middle;
}
.devtools-button:-moz-focusring {
outline: none;
}
/* Standalone buttons */
.devtools-button[standalone],
.devtools-button[data-standalone],
.devtools-toolbarbutton[standalone],
.devtools-toolbarbutton[data-standalone] {
- border-width: 1px;
- border-style: solid;
- min-height: 32px;
- background-color: var(--theme-toolbar-background);
+ border-color: rgba(138,161,180,0.2) !important;
+ min-height: 30px;
}
.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
margin-inline-end: 5px;
}
-.devtools-toolbarbutton[label][standalone] {
- min-height: 2em;
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton,
-.devtools-button {
- border-color: var(--toolbar-button-border-color);
-}
-
/* Icon button styles */
-.devtools-toolbarbutton:not([label]),
-.devtools-toolbarbutton[text-as-image] {
- min-width: 32px;
-}
-
.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
display: none;
}
-.devtools-toolbarbutton > .toolbarbutton-icon {
- margin: 0;
-}
-
-/* Menu button styles (eg. web console filters) */
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
- -moz-appearance: none;
- color: inherit;
- border-width: 0;
- -moz-box-orient: horizontal;
- padding: 0;
-}
-
-.devtools-toolbarbutton[type=menu-button] {
- padding: 0 1px;
- -moz-box-align: stretch;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
- margin-inline-end: 4px;
-}
-
-.devtools-menulist > .menulist-dropmarker {
- -moz-appearance: none;
- display: -moz-box;
- list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
- -moz-box-align: center;
- min-width: 16px;
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
- -moz-appearance: none !important;
- list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
- -moz-box-align: center;
- padding: 0 3px;
-}
-
/* Icon-only buttons */
.devtools-button:empty::before,
.devtools-toolbarbutton:not([label]):not([disabled]) > image {
opacity: 0.8;
}
.devtools-button:hover:empty:not(:disabled):before,
.devtools-button.checked:empty::before,
-.devtools-button[checked]:empty::before,
-.devtools-button[open]:empty::before,
.devtools-toolbarbutton:not([label]):not([disabled=true]):hover > image,
.devtools-toolbarbutton:not([label])[checked=true] > image,
.devtools-toolbarbutton:not([label])[open=true] > image {
opacity: 1;
}
.devtools-button:disabled,
-.devtools-button[disabled],
.devtools-toolbarbutton[disabled] {
opacity: 0.5 !important;
}
-.devtools-button[checked]:empty::before,
-.devtools-button[open]:empty::before,
.devtools-button.checked::before,
.devtools-toolbarbutton:not([label])[checked=true] > image,
.devtools-toolbarbutton:not([label])[open=true] > image {
filter: var(--checked-icon-filter);
}
-/* Checked/opened icon button background */
-.theme-firebug .devtools-button[checked]:empty,
-.theme-firebug .devtools-button[open]:empty,
-.theme-firebug .devtools-button.checked,
-.theme-firebug .devtools-toolbarbutton:not([label])[checked=true],
-.theme-firebug .devtools-toolbarbutton:not([label])[open=true] {
- background: var(--toolbarbutton-checked-background);
+/* Button states */
+.devtools-toolbarbutton[label]:not([type=menu-button]),
+.devtools-toolbarbutton[standalone],
+.devtools-button[data-standalone],
+.devtools-button:not(:empty) {
+ background: var(--toolbarbutton-background);
+ padding: 0 5px;
}
-/* Icon-and-text buttons */
-.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
- margin-inline-start: .5em !important;
- font-weight: 600;
-}
-
-/* Text-only buttons */
-.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
-.theme-light .devtools-toolbarbutton[data-text-only],
-.theme-light .devtools-button:not(:empty) {
- background-color: var(--toolbar-tab-hover);
-}
-.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
-.theme-dark .devtools-toolbarbutton[data-text-only],
-.theme-dark .devtools-button:not(:empty) {
- background-color: rgba(0, 0, 0, .2); /* Splitter */
+.devtools-toolbarbutton:not([label]):hover,
+.devtools-button:empty:not(:disabled):hover {
+ background: var(--toolbarbutton-background);
}
-/* Text-only button states */
-.theme-dark .devtools-button:not(:empty):not(:disabled):hover,
-.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
- background: rgba(0, 0, 0, .3); /* Splitters */
-}
-.theme-light .devtools-button:not(:empty):not(:disabled):hover,
-.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
- background: rgba(170, 170, 170, .3); /* Splitters */
+.devtools-button:not(:empty):not(:disabled):hover,
+.devtools-toolbarbutton[label]:not(:-moz-any([checked=true],[disabled])):hover,
+.devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
+.devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active) {
+ background: var(--toolbarbutton-hover-background);
+ border-color: var(--toolbarbutton-hover-border-color);
}
-.theme-dark .devtools-button:not(:empty):not(:disabled):hover:active,
-.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
- background: rgba(0, 0, 0, .4); /* Splitters */
-}
-.theme-light .devtools-button:not(:empty):not(:disabled):hover:active,
-.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
- background: var(--toolbar-tab-hover-active);
+.devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
+.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
+ background-color: var(--theme-selection-background-semitransparent);
}
-.theme-dark .devtools-toolbarbutton:not([disabled])[label][checked=true],
-.theme-dark .devtools-toolbarbutton:not([disabled])[label][open],
-.theme-dark .devtools-button:not(:empty)[checked=true] {
- background: var(--theme-selection-background-semitransparent);
- color: var(--theme-selection-color);
-}
-.theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true],
-.theme-light .devtools-toolbarbutton:not([disabled])[label][open],
-.theme-light .devtools-button:not(:empty)[checked=true] {
- background: rgba(76, 158, 217, .3); /* Select highlight blue */
+.devtools-toolbarbutton:not([disabled])[label][checked=true],
+.devtools-toolbarbutton:not([disabled])[label][open],
+.devtools-button:not(:empty).checked,
+.theme-firebug .devtools-toolbarbutton:-moz-any([checked],[open]),
+.theme-firebug .devtools-button.checked:empty {
+ background: var(--toolbarbutton-checked-background);
+ border-color: var(--toolbarbutton-checked-border-color);
+ color: var(--toolbarbutton-checked-color);
}
+/* Icons */
:root {
--clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
}
.devtools-button.devtools-clear-icon::before {
background-image: var(--clear-icon-url);
}
@@ -482,46 +386,16 @@ checkbox:-moz-focusring {
.devtools-toolbarbutton-group + .devtools-toolbarbutton {
margin-inline-start: 3px;
}
.devtools-separator + .devtools-toolbarbutton {
margin-inline-start: 1px;
}
-/*
- * Filter buttons
- * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands
- */
-.menu-filter-button {
- -moz-appearance: none;
- background: var(--toolbarbutton-background);
- border: var(--toolbarbutton-border);
- border-radius: 2px;
- min-width: 0;
- padding: 0 5px;
- margin: 2px;
- color: var(--theme-body-color);
-}
-
-.menu-filter-button:hover {
- background: var(--toolbarbutton-hover-background);
- border: var(--toolbarbutton-hover-border);
-}
-
-.menu-filter-button:hover:active {
- background-color: var(--theme-selection-background-semitransparent);
-}
-
-.menu-filter-button:not(:active).checked {
- background: var(--toolbarbutton-checked-background);
- border: var(--toolbarbutton-checked-border);
- color: var(--toolbarbutton-checked-color);
-}
-
/* Text input */
.devtools-textinput,
.devtools-searchinput,
.devtools-filterinput {
-moz-appearance: none;
margin: 1px 3px;
border: 1px solid;--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -149,17 +149,16 @@
.theme-firebug .devtools-sidebar-tabs tab:first-child {
margin-inline-start: 5px;
}
/* Firebug theme support for the Option (panel) tab */
.theme-firebug #toolbox-tab-options {
margin-inline-end: 4px;
- background-color: white;
}
.theme-firebug #toolbox-tab-options::before {
content: url(chrome://devtools/skin/images/firebug/tool-options.svg);
display: block;
margin: 4px 4px 0;
}
@@ -167,19 +166,16 @@
filter: brightness(80%);
}
/* Element picker */
.theme-firebug #toolbox-buttons-start {
border: none;
}
-.theme-firebug #command-button-pick {
- top: 6px;
-}
/* Toolbar */
.theme-firebug .theme-toolbar,
.theme-firebug toolbar,
.theme-firebug .devtools-toolbar {
background: var(--theme-toolbar-background) !important;
padding-inline-end: 4px;
}
@@ -187,17 +183,17 @@
/* The vbox for panel content also uses theme-toolbar class from some reason
but it shouldn't have the padding as defined above, so fix it here */
.theme-firebug #toolbox-deck > .toolbox-panel.theme-toolbar {
padding-inline-end: 0;
}
/* Space around toolbar buttons */
.theme-firebug .devtools-toolbar {
- padding: 3px;
+ padding: 2px 3px;
}
/* The height is the same for all toolbars and side panels tabs */
.theme-firebug .theme-toolbar,
.theme-firebug .devtools-sidebar-tabs tabs,
.theme-firebug .devtools-toolbar {
height: 28px !important;
}
@@ -213,40 +209,13 @@
proportional font for all labels in these toolbars */
.theme-firebug .devtools-toolbar label,
.theme-firebug .devtools-toolbar .label,
.theme-firebug .theme-toolbar label,
.theme-firebug .theme-toolbar .label {
font-family: var(--proportional-font-family);
}
-/* Toolbar Buttons */
-
-.theme-firebug .theme-toolbar button,
-.theme-firebug .devtools-button,
-.theme-firebug toolbarbutton {
- margin: 1px;
- border-radius: 2px;
- color: var(--theme-body-color);
- line-height: var(--theme-toolbar-font-size);
- font-size: var(--theme-toolbar-font-size);
-}
-
-.theme-firebug .theme-toolbar button,
-.theme-firebug .devtools-button {
- border-width: 1px !important;
- min-width: 24px;
-}
-
-.theme-firebug .devtools-toolbarbutton {
- min-width: 24px;
-}
-
-
-.theme-firebug #element-picker {
- min-height: 21px;
-}
-
/* Make sure the toolbar buttons shrink nicely. */
#toolbox-buttons-end {
background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
}--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -106,20 +106,17 @@
#requests-menu-perf-notice-button::before {
background-image: url(images/profiler-stopwatch.svg);
}
#requests-menu-reload-notice-button {
font-size: inherit;
min-height: 26px;
- padding-left: 10px;
- padding-right: 10px;
margin: 0 5px;
- background-color: var(--theme-toolbar-background);
}
/* Network requests table */
#requests-menu-toolbar {
display: flex;
padding: 0;
}
@@ -775,21 +772,16 @@
font-weight: 600;
}
.custom-request-panel textarea {
resize: none;
font: message-box;
}
-.custom-request-panel .devtools-button {
- margin: 3px 1px;
- min-width: 78px;
-}
-
.custom-header,
.custom-method-and-url,
.custom-request,
.custom-section {
display: flex;
}
.custom-header {
@@ -1218,53 +1210,20 @@
}
.headers-summary,
.response-summary {
display: flex;
align-items: center;
}
-.headers-summary .tool-button {
+.headers-summary .devtools-button {
margin-inline-end: 6px;
}
-.tool-button {
- background: transparent;
- border: none;
- border-color: var(--toolbar-button-border-color);
- color: var(--theme-body-color);
- min-height: 18px;
- transition: background 0.05s ease-in-out;
-}
-
-.theme-light .tool-button {
- background-color: var(--toolbar-tab-hover);
-}
-
-.theme-light .tool-button:hover {
- background-color: rgba(170, 170, 170, 0.3);
-}
-
-.theme-light .tool-button:hover:active {
- background-color: var(--toolbar-tab-hover-active);
-}
-
-.theme-dark .tool-button {
- background-color: rgba(0, 0, 0, 0.2);
-}
-
-.theme-dark .tool-button:hover {
- background-color: rgba(0, 0, 0, 0.3);
-}
-
-.theme-dark .tool-button:hover:active {
- background-color: rgba(0, 0, 0, 0.4);
-}
-
.headers-summary .requests-menu-status-icon {
min-width: 10px;
}
.headers-summary .raw-headers-container {
display: flex;
width: 100%;
}--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -11,40 +11,37 @@
--searchbox-border-color: #ffbf00;
--searcbox-no-match-background-color: #ffe5e5;
--searcbox-no-match-border-color: #e52e2e;
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--filter-image: url(chrome://devtools/skin/images/filter.svg);
--tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
--icon-filter: none;
--checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
- --toolbar-button-border-color: rgba(170, 170, 170, .5);
}
.theme-dark {
- --toolbar-tab-hover: hsla(206, 37%, 4%, .2);
- --toolbar-tab-hover-active: hsla(206, 37%, 4%, .4);
+ --toolbar-tab-hover: rgba(110,120,130,0.1);
+ --toolbar-tab-hover-active: rgba(110,120,130,0.2);
--searchbox-background-color: #4d4222;
--searchbox-border-color: #d99f2b;
--searcbox-no-match-background-color: #402325;
--searcbox-no-match-border-color: #cc3d3d;
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--filter-image: url(chrome://devtools/skin/images/filter.svg);
--tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
--icon-filter: invert(1);
--checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#dark-theme-checked-icon-state);
- --toolbar-button-border-color: rgba(0, 0, 0, .4);
}
.theme-firebug {
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--tool-options-image: url(chrome://devtools/skin/images/firebug/tool-options.svg);
--icon-filter: none;
--checked-icon-filter: none;
- --toolbar-button-border-color: rgba(170, 170, 170, .5);
}
/* Toolbars */
.devtools-toolbar,
.devtools-sidebar-tabs tabs {
-moz-appearance: none;
padding: 0;--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -162,17 +162,17 @@
padding-left: 13px !important;
background-position: 3px 6px;
}
.devtools-tab > img {
border: none;
margin: 0;
margin-inline-start: 10px;
- opacity: 0.6;
+ opacity: 0.8;
max-height: 16px;
width: 16px; /* Prevents collapse during theme switching */
vertical-align: text-top;
margin-inline-end: 6px;
}
/* Support invertable icon flags and make icon white when it's on a blue background */
.theme-light .devtools-tab.icon-invertable-light-theme:not(.selected) > img,
@@ -189,20 +189,17 @@
filter: none;
}
.devtools-tab > label {
white-space: nowrap;
margin: 0 4px;
}
-.devtools-tab:hover > img {
- opacity: 0.8;
-}
-
+.devtools-tab:hover > img,
.devtools-tab:active > img,
.devtools-tab.selected > img {
opacity: 1;
}
.devtools-tabbar .devtools-tab.selected,
.devtools-tabbar .devtools-tab.selected:hover:active {
color: var(--theme-selection-color);
@@ -232,42 +229,31 @@
.devtools-tab:not(.highlighted) > .highlighted-icon,
.devtools-tab.selected > .highlighted-icon,
.devtools-tab:not(.selected).highlighted > .default-icon {
display: none;
}
/* The options tab is special - it doesn't have the same parent
as the other tabs (toolbox-option-container vs toolbox-tabs) */
-#toolbox-option-container .devtools-tab:not(.selected) {
- background-color: transparent;
-}
#toolbox-option-container .devtools-tab {
border-color: transparent;
border-width: 0;
padding-inline-start: 1px;
}
#toolbox-option-container img {
margin-inline-end: 6px;
margin-inline-start: 6px;
}
/* Toolbox controls */
#toolbox-controls, #toolbox-dock-buttons {
display: flex;
}
-#toolbox-controls > button,
-#toolbox-dock-buttons > button {
- -moz-appearance: none;
- border: none;
- margin: 0 4px;
- min-width: 16px;
- width: 16px;
-}
/* Save space in Firebug theme */
.theme-firebug #toolbox-controls button {
margin-inline-start: 0 !important;
min-width: 12px;
margin: 0 1px;
}
@@ -310,53 +296,30 @@
}
#toolbox-controls-separator {
margin: 0;
}
/* Command buttons */
-.command-button {
+.command-button,
+#toolbox-controls > button,
+#toolbox-dock-buttons > button {
/* !important is needed to override .devtools-button rules in common.css */
padding: 0 !important;
margin: 0 !important;
+ border: none !important;
+ border-radius: 0 !important;
position: relative;
-}
-
-.command-button::before {
- opacity: 0.7;
-}
-
-.command-button:hover {
- background-color: var(--toolbar-tab-hover);
-}
-
-.theme-light .command-button:hover {
- background-color: inherit;
+ min-width: 28px;
}
-.command-button:hover:active,
-.command-button.checked:not(:hover) {
- background-color: var(--toolbar-tab-hover-active)
-}
-
-.theme-light .command-button:hover:active,
-.theme-light .command-button.checked:not(:hover) {
- background-color: inherit;
-}
-
-.command-button:hover::before {
- opacity: 0.85;
-}
-
-.command-button:hover:active::before,
-.command-button.checked::before,
-.command-button.open::before {
- opacity: 1;
+#command-button-pick {
+ min-width: 32px;
}
/* Command button images */
#command-button-paintflashing::before {
background-image: var(--command-paintflashing-image);
}
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -190,20 +190,20 @@
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
/* Toolbar buttons */
--toolbarbutton-background: transparent linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) no-repeat;
--toolbarbutton-hover-background: transparent;
+ --toolbarbutton-hover-border-color: var(--theme-splitter-color);
--toolbarbutton-checked-background: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
--toolbarbutton-checked-color: var(--theme-body-color);
- --toolbarbutton-hover-border: 1px solid var(--theme-splitter-color);
- --toolbarbutton-checked-border: var(--toolbarbutton-hover-border);
+ --toolbarbutton-checked-border-color: var(--toolbarbutton-hover-border-color);
}
:root.theme-firebug[platform="win"] {
--theme-tab-toolbar-background: #d8eaf9 linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
--theme-toolbar-background: #d8eaf9 linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
--theme-toolbar-tab-selected-background: rgb(247, 251, 254);
--theme-splitter-color: #aabccf;
}
@@ -212,17 +212,16 @@
--theme-focus-border-color-textbox: #0675d3;
--theme-textbox-box-shadow: rgba(97,181,255,.75);
/* For accessibility purposes we want to enhance the focus styling. This
* should improve keyboard navigation usability. */
--theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
--theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
- --toolbarbutton-background: rgba(128,128,128,0.1);
- --toolbarbutton-hover-background: rgba(128,128,128,0.2);
+ --toolbarbutton-background: rgba(110,120,130,0.1);
+ --toolbarbutton-border-color: transparent;
+ --toolbarbutton-hover-background: rgba(110,120,130,0.2);
+ --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
--toolbarbutton-checked-background: var(--theme-selection-background);
--toolbarbutton-checked-color: var(--theme-selection-color);
-
- --toolbarbutton-border: 1px solid transparent;
- --toolbarbutton-hover-border: var(--toolbarbutton-border);
- --toolbarbutton-checked-border: var(--toolbarbutton-border);
+ --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
}--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -607,16 +607,52 @@ a.learn-more-link.webconsole-learn-more-
filter: url(images/filters.svg#checked-icon-state);
}
.elementNode:hover .open-inspector:active,
.open-inspector:active {
filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
}
+/* Old console frontend filters */
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+ -moz-appearance: none;
+ color: inherit;
+ border-width: 0;
+ -moz-box-orient: horizontal;
+ padding: 0;
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+ padding: 0 1px;
+ -moz-box-align: stretch;
+ --toolbarbutton-checked-color: var(--theme-body-color);
+ --toolbarbutton-checked-background: var(--theme-selection-background-semitransparent);
+}
+
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+ margin-inline-end: 4px;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+ -moz-appearance: none;
+ display: -moz-box;
+ list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+ -moz-box-align: center;
+ min-width: 16px;
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+ -moz-appearance: none !important;
+ list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+ -moz-box-align: center;
+ padding: 0 3px;
+}
+
@media (max-width: 500px) {
.message > .timestamp {
display: none;
}
.hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
display: none;
}
.hud-console-filter-toolbar .webconsole-filter-button {--- a/devtools/client/webconsole/new-console-output/components/filter-button.js
+++ b/devtools/client/webconsole/new-console-output/components/filter-button.js
@@ -24,17 +24,17 @@ const FilterButton = createClass({
onClick: function () {
this.props.dispatch(actions.filterToggle(this.props.filterKey));
},
render() {
const {active, label, filterKey} = this.props;
let classList = [
- "menu-filter-button",
+ "devtools-button",
filterKey,
];
if (active) {
classList.push("checked");
}
return dom.button({
"aria-pressed": active === true,--- a/devtools/client/webconsole/new-console-output/test/components/filter-button.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/filter-button.test.js
@@ -15,21 +15,21 @@ describe("FilterButton component:", () =
active: true,
label: "Error",
filterKey: MESSAGE_LEVEL.ERROR,
};
it("displays as active when turned on", () => {
const wrapper = render(FilterButton(props));
expect(wrapper.html()).toBe(
- "<button aria-pressed=\"true\" class=\"menu-filter-button error checked\">" +
+ "<button aria-pressed=\"true\" class=\"devtools-button error checked\">" +
"Error</button>"
);
});
it("displays as inactive when turned off", () => {
const inactiveProps = Object.assign({}, props, { active: false });
const wrapper = render(FilterButton(inactiveProps));
expect(wrapper.html()).toBe(
- "<button aria-pressed=\"false\" class=\"menu-filter-button error\">Error</button>"
+ "<button aria-pressed=\"false\" class=\"devtools-button error\">Error</button>"
);
});
});--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters_persist.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters_persist.js
@@ -59,14 +59,14 @@ function* getFilterButtons(hud) {
}
info("Wait for console filterbar to appear");
const filterBar = yield waitFor(() => {
return outputNode.querySelector(".webconsole-filterbar-secondary");
});
ok(filterBar, "Filter bar is shown when filter icon is clicked.");
- return filterBar.querySelectorAll(".menu-filter-button");
+ return filterBar.querySelectorAll(".devtools-button");
}
function filterIsEnabled(button) {
return button.classList.contains("checked");
}