From 2f778385e86dd549bad2a77fabe3a771f2f7b5e0 Mon Sep 17 00:00:00 2001 From: Florens Verschelde Date: Tue, 12 May 2020 13:22:28 +0000 Subject: [PATCH] Bug 1634380 - Part 2: Split devtools-button and legacy devtools-toolbarbutton styles; r=ladybenko Differential Revision: https://phabricator.services.mozilla.com/D73495 --- devtools/client/jar.mn | 1 + .../src/assets/styles/StatisticsPanel.css | 10 -- .../components/RecordingControls.js | 41 +++---- devtools/client/performance/index.xhtml | 1 + devtools/client/shared/toolbarbutton.css | 87 +++++++++++++ devtools/client/styleeditor/index.xhtml | 1 + devtools/client/themes/common.css | 116 +++++++----------- devtools/client/themes/memory.css | 4 - devtools/client/themes/performance.css | 15 +-- devtools/client/themes/splitview.css | 8 -- 10 files changed, 153 insertions(+), 131 deletions(-) create mode 100644 devtools/client/shared/toolbarbutton.css diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index e7b1ff656e0a..8a26283bd35b 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -9,6 +9,7 @@ devtools.jar: content/shared/widgets/widgets.css (shared/widgets/widgets.css) content/webconsole/index.html (webconsole/index.html) content/shared/splitview.css (shared/splitview.css) + content/shared/toolbarbutton.css (shared/toolbarbutton.css) content/shared/theme-switching.js (shared/theme-switching.js) content/styleeditor/index.xhtml (styleeditor/index.xhtml) content/storage/index.xhtml (storage/index.xhtml) diff --git a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css index 75d7a175df13..6ed21871fe4d 100644 --- a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css @@ -12,16 +12,6 @@ overflow: auto; } -.statistics-panel .devtools-toolbarbutton.back-button { - min-width: 4em; - margin: 0; - padding: 0; - border-radius: 0; - border-top: none; - border-bottom: none; - border-inline-start: none; -} - .statistics-panel .back-button { height: -moz-fit-content; position: absolute; diff --git a/devtools/client/performance/components/RecordingControls.js b/devtools/client/performance/components/RecordingControls.js index cd9e4ece3f0f..8c753c45e695 100644 --- a/devtools/client/performance/components/RecordingControls.js +++ b/devtools/client/performance/components/RecordingControls.js @@ -37,28 +37,25 @@ class RecordingControls extends Component { return div( { className: "devtools-toolbar" }, - div( - { className: "toolbar-group" }, - button({ - id: "clear-button", - className: "devtools-button", - title: L10N.getStr("recordings.clear.tooltip"), - onClick: onClearButtonClick, - }), - button({ - id: "main-record-button", - className: recordButtonClassList.join(" "), - disabled: isLocked, - title: L10N.getStr("recordings.start.tooltip"), - onClick: onRecordButtonClick, - }), - button({ - id: "import-button", - className: "devtools-button", - title: L10N.getStr("recordings.import.tooltip"), - onClick: onImportButtonClick, - }) - ) + button({ + id: "clear-button", + className: "devtools-button", + title: L10N.getStr("recordings.clear.tooltip"), + onClick: onClearButtonClick, + }), + button({ + id: "main-record-button", + className: recordButtonClassList.join(" "), + disabled: isLocked, + title: L10N.getStr("recordings.start.tooltip"), + onClick: onRecordButtonClick, + }), + button({ + id: "import-button", + className: "devtools-button", + title: L10N.getStr("recordings.import.tooltip"), + onClick: onImportButtonClick, + }) ); } } diff --git a/devtools/client/performance/index.xhtml b/devtools/client/performance/index.xhtml index 1d48e034fde1..4ef54d06621c 100644 --- a/devtools/client/performance/index.xhtml +++ b/devtools/client/performance/index.xhtml @@ -4,6 +4,7 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + diff --git a/devtools/client/shared/toolbarbutton.css b/devtools/client/shared/toolbarbutton.css new file mode 100644 index 000000000000..0e447026ab04 --- /dev/null +++ b/devtools/client/shared/toolbarbutton.css @@ -0,0 +1,87 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * 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/. */ + +/** + * Legacy `devtools-toolbarbutton` styles, extracted from common.css because + * we're only using them in a couple panels (Performance & Style Editor), + * and it makes maintaining the newer `devtools-button` styles easier. + */ + +.devtools-toolbarbutton { + -moz-appearance: none; + background: transparent; + border: none; + border-radius: 2px; + color: var(--theme-body-color); + -moz-box-align: center; + text-shadow: none; + padding: 2px; + margin: 1px; + white-space: nowrap; +} + +.devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon, +.devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon { + color: var(--theme-icon-checked-color); +} + +.devtools-toolbarbutton .toolbarbutton-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: currentColor; + color: var(--theme-icon-color); + direction: ltr; + font-size: 11px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon { + margin: 0 3px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbarbutton[disabled] { + opacity: 0.5 !important; +} + +.devtools-toolbarbutton[label] { + padding-inline: 6px; + background: var(--toolbarbutton-background); +} + +.devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover,:hover:active) { + background: var(--toolbarbutton-hover-background); +} + +/* Selectable button which is unchecked. */ + +.devtools-toolbarbutton[label]:not(:-moz-any([checked=true],[disabled])):hover { + background-color: var(--toolbarbutton-hover-background); +} + +.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:focus { + background-color: var(--toolbarbutton-focus-background); + color: var(--toolbarbutton-focus-color); +} + +/* Selectable button which is checked. */ + +.devtools-toolbarbutton:not([disabled])[label][checked=true], +.devtools-toolbarbutton:not([disabled])[label][open] { + background: var(--toolbarbutton-checked-background); + color: var(--toolbarbutton-checked-color); +} + +.devtools-toolbarbutton:not([disabled])[label][checked=true] .toolbarbutton-icon, +.devtools-toolbarbutton:not([disabled])[label][open] .toolbarbutton-icon { + color: inherit; +} + +.devtools-toolbarbutton:not([disabled])[label][checked=true]:focus, +.devtools-toolbarbutton:not([disabled])[label][open]:focus { + background-color: var(--toolbarbutton-checked-focus-background); +} diff --git a/devtools/client/styleeditor/index.xhtml b/devtools/client/styleeditor/index.xhtml index 1df57fa1a185..d5cec9a33944 100644 --- a/devtools/client/styleeditor/index.xhtml +++ b/devtools/client/styleeditor/index.xhtml @@ -12,6 +12,7 @@ + diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css index 443baaa43455..171da355b349 100644 --- a/devtools/client/themes/common.css +++ b/devtools/client/themes/common.css @@ -297,7 +297,6 @@ checkbox:-moz-focusring { } /* Toolbar buttons */ -.devtools-toolbarbutton, .devtools-togglebutton, .devtools-button { -moz-appearance: none; @@ -324,100 +323,83 @@ checkbox:-moz-focusring { border: 0; } -.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, -.devtools-button:empty::before { +/* Button with text */ +.devtools-button:not(:empty) { + padding-inline: 5px; + background: var(--toolbarbutton-background); +} + +/* Button icon */ +.devtools-button::before { + content: none; + display: inline-block; + vertical-align: middle; width: 16px; height: 16px; margin: 0 3px; transition: opacity 0.05s ease-in-out; - -moz-context-properties: fill; - fill: currentColor; color: var(--theme-icon-color); direction: ltr; font-size: 11px; -} - -.devtools-button:empty::before { - content: ""; - display: inline-block; + -moz-context-properties: fill; + fill: currentColor; background-position: center; background-repeat: no-repeat; - vertical-align: middle; } -.devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon, -.devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon, -.devtools-button.checked:empty::before { +/* Reveal the icon */ +.devtools-button:empty::before { + content: ""; +} + +.devtools-button.checked::before { color: var(--theme-icon-checked-color); } -/* Standalone buttons */ -.devtools-button[standalone], -.devtools-button[data-standalone], -.devtools-toolbarbutton[standalone], -.devtools-toolbarbutton[data-standalone] { - border-color: rgba(138,161,180,0.2) !important; - min-height: 30px; -} - -.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { - margin-inline-end: 5px; -} - -/* Icon button styles */ -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - /* Icon-only buttons */ -.devtools-button:hover:empty:not(:disabled):before, -.devtools-button.checked: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 { +.devtools-button:hover:not(:disabled)::before, +.devtools-button.checked::before { opacity: 1; } -.devtools-button:disabled, -.devtools-toolbarbutton[disabled] { - opacity: 0.5 !important; -} - /* Button states */ -.devtools-toolbarbutton[label], -.devtools-toolbarbutton[standalone], -.devtools-button[data-standalone], -.devtools-button:not(:empty) { - background: var(--toolbarbutton-background); - padding: 0 5px; -} - -.devtools-toolbarbutton:not([label]):hover, -.devtools-button:empty:not(:disabled):not([aria-expanded="true"]):hover { - background: var(--toolbarbutton-background); +.devtools-button:disabled { + opacity: 0.5 !important; } .devtools-button:focus { background-color: var(--theme-toolbar-hover); } +.devtools-button:empty:not(:disabled):not([aria-expanded="true"]):hover { + background: var(--toolbarbutton-hover-background); +} + +/* Standalone buttons */ +.devtools-button[data-standalone] { + min-height: 28px; + padding: 4px 6px; + border: 1px solid transparent; + background: var(--toolbarbutton-background); +} + +.theme-light .devtools-button[data-standalone] { + border-color: rgba(138,161,180,0.2); +} + /* Selectable button which is unchecked. */ .devtools-button:not(:empty):not(:disabled):not(.checked):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), .devtools-button[aria-haspopup="menu"][aria-expanded="true"] { background-color: var(--toolbarbutton-hover-background); } -.devtools-button:not(:empty):not(.checked):not(:disabled):hover:active, -.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active { +.devtools-button:not(:empty):not(.checked):not(:disabled):hover:active { background-color: var(--theme-selection-background-hover); } -.devtools-button:not(:empty):not(.checked):not(:disabled):focus, -.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:focus { +.devtools-button:not(:empty):not(.checked):not(:disabled):focus { background-color: var(--toolbarbutton-focus-background); color: var(--toolbarbutton-focus-color); } @@ -433,15 +415,11 @@ checkbox:-moz-focusring { /* Selectable button which is checked. */ -.devtools-toolbarbutton:not([disabled])[label][checked=true], -.devtools-toolbarbutton:not([disabled])[label][open], .devtools-button:not(:empty).checked { background: var(--toolbarbutton-checked-background); color: var(--toolbarbutton-checked-color); } -.devtools-toolbarbutton:not([disabled])[label][checked=true]:focus, -.devtools-toolbarbutton:not([disabled])[label][open]:focus, .devtools-button:not(:empty).checked:focus { background-color: var(--toolbarbutton-checked-focus-background); } @@ -471,22 +449,10 @@ checkbox:-moz-focusring { background-image: url("chrome://devtools/skin/images/clear.svg"); } -.devtools-toolbarbutton.devtools-clear-icon { - list-style-image: url("chrome://devtools/skin/images/clear.svg"); -} - .devtools-option-toolbarbutton { list-style-image: url("chrome://devtools/skin/images/settings.svg"); } -.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { - margin-inline-end: 0; -} - -.devtools-toolbarbutton-group + .devtools-toolbarbutton { - margin-inline-start: 3px; -} - .devtools-button.devtools-feature-callout::after { content: url("chrome://browser/skin/badge-blue.svg"); width: 14px; diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css index f569bc5d9832..27d959502114 100644 --- a/devtools/client/themes/memory.css +++ b/devtools/client/themes/memory.css @@ -327,10 +327,6 @@ html, body, #app, #memory-tool { font-size: 120%; } -#heap-view > .heap-view-panel > .take-snapshot { - padding: 5px; -} - #heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre { background-color: var(--theme-body-background); margin: 20px; diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css index f6e2186640ee..108dd6e3c6c9 100644 --- a/devtools/client/themes/performance.css +++ b/devtools/client/themes/performance.css @@ -53,8 +53,7 @@ } #performance-toolbar-controls-detail-views .toolbarbutton-text { - padding-inline-start: 4px; - padding-inline-end: 8px; + margin-inline: 4px; } #filter-button { @@ -112,11 +111,6 @@ display: none; } -.notice-container .record-button { - padding: 5px !important; -} - -.notice-container .record-button.checked, .notice-container .record-button.checked { color: var(--theme-selection-color) !important; background: var(--theme-selection-background) !important; @@ -141,11 +135,8 @@ * DE-XUL: The height of the toolbar is not correct without tweaking the line-height. */ #recordings-pane .devtools-toolbar { - line-height: 0; -} - -#recordings-pane .devtools-toolbar .devtools-button { - height: calc(var(--theme-toolbar-height) - 2px); + display: flex; + line-height: 1; } .theme-sidebar { diff --git a/devtools/client/themes/splitview.css b/devtools/client/themes/splitview.css index 26ce2ec26add..3dd94158e78a 100644 --- a/devtools/client/themes/splitview.css +++ b/devtools/client/themes/splitview.css @@ -67,11 +67,3 @@ .loading .splitview-nav-container { border-inline-end: 1px solid var(--theme-splitter-color); } - -.splitview-main > .devtools-toolbarbutton { - font-size: 11px; - padding: 0 8px; - width: auto; - min-width: 48px; - min-height: 0; -}