From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- devtools/client/themes/aboutprofiling.css | 169 ++++ .../client/themes/accessibility-color-contrast.css | 77 ++ devtools/client/themes/animation.css | 754 ++++++++++++++ devtools/client/themes/audio/moz.build | 9 + devtools/client/themes/audio/shutter.wav | Bin 0 -> 25744 bytes devtools/client/themes/badge.css | 107 ++ devtools/client/themes/boxmodel.css | 431 ++++++++ devtools/client/themes/breadcrumbs.css | 133 +++ devtools/client/themes/changes.css | 211 ++++ devtools/client/themes/chart.css | 135 +++ devtools/client/themes/common.css | 757 ++++++++++++++ devtools/client/themes/compatibility.css | 328 ++++++ devtools/client/themes/components-frame.css | 68 ++ devtools/client/themes/components-h-split-box.css | 23 + devtools/client/themes/computed.css | 263 +++++ devtools/client/themes/dark-theme.css | 296 ++++++ devtools/client/themes/devtools-browser.css | 14 + devtools/client/themes/fonts.css | 477 +++++++++ .../themes/images/aboutdebugging-connect-icon.svg | 6 + .../client/themes/images/aboutdebugging-error.svg | 11 + .../themes/images/aboutdebugging-fenix-nightly.svg | 16 + .../client/themes/images/aboutdebugging-fenix.svg | 15 + .../images/aboutdebugging-firefox-aurora.svg | 4 + .../themes/images/aboutdebugging-firefox-beta.svg | 4 + .../themes/images/aboutdebugging-firefox-logo.svg | 6 + .../images/aboutdebugging-firefox-nightly.svg | 4 + .../images/aboutdebugging-firefox-release.svg | 4 + .../themes/images/aboutdebugging-globe-icon.svg | 10 + .../themes/images/aboutdebugging-information.svg | 8 + .../themes/images/aboutdebugging-process-icon.svg | 7 + .../themes/images/aboutdebugging-usb-icon.svg | 6 + devtools/client/themes/images/accessibility.svg | 9 + devtools/client/themes/images/add.svg | 6 + devtools/client/themes/images/alert-small.svg | 6 + devtools/client/themes/images/alert-tiny.svg | 6 + devtools/client/themes/images/alert.svg | 6 + devtools/client/themes/images/angle-swatch.svg | 16 + .../client/themes/images/animation-fast-track.svg | 6 + .../client/themes/images/application-debug.svg | 6 + .../client/themes/images/application-manifest.svg | 6 + devtools/client/themes/images/arrow-big.svg | 6 + .../client/themes/images/arrow-dropdown-12.svg | 6 + devtools/client/themes/images/arrow-e.svg | 6 + devtools/client/themes/images/arrow.svg | 6 + devtools/client/themes/images/arrowhead-down.svg | 6 + devtools/client/themes/images/arrowhead-left.svg | 6 + devtools/client/themes/images/arrowhead-right.svg | 6 + devtools/client/themes/images/arrowhead-up.svg | 6 + devtools/client/themes/images/blocked.svg | 7 + .../client/themes/images/breadcrumbs-divider.svg | 18 + .../themes/images/breadcrumbs-scrollbutton.svg | 6 + devtools/client/themes/images/browsers/chrome.svg | 8 + devtools/client/themes/images/browsers/edge.svg | 8 + devtools/client/themes/images/browsers/firefox.svg | 8 + devtools/client/themes/images/browsers/ie.svg | 8 + devtools/client/themes/images/browsers/mobile.svg | 8 + devtools/client/themes/images/browsers/opera.svg | 8 + devtools/client/themes/images/browsers/safari.svg | 8 + devtools/client/themes/images/case-match.svg | 6 + devtools/client/themes/images/check.svg | 6 + devtools/client/themes/images/checkbox.svg | 7 + devtools/client/themes/images/clear.svg | 6 + devtools/client/themes/images/close-3-pane.svg | 10 + devtools/client/themes/images/close.svg | 6 + devtools/client/themes/images/command-accented.svg | 7 + .../themes/images/command-always-on-top-window.svg | 14 + devtools/client/themes/images/command-bidi.svg | 7 + devtools/client/themes/images/command-chevron.svg | 6 + devtools/client/themes/images/command-console.svg | 7 + .../client/themes/images/command-eyedropper.svg | 6 + devtools/client/themes/images/command-frames.svg | 7 + devtools/client/themes/images/command-measure.svg | 7 + .../client/themes/images/command-noautohide.svg | 6 + .../themes/images/command-pick-accessibility.svg | 7 + .../themes/images/command-responsivemode.svg | 8 + devtools/client/themes/images/command-rulers.svg | 7 + .../client/themes/images/command-screenshot.svg | 7 + devtools/client/themes/images/copy.svg | 6 + .../client/themes/images/cubic-bezier-swatch.svg | 7 + devtools/client/themes/images/datastore.svg | 9 + devtools/client/themes/images/debugging-addons.svg | 6 + devtools/client/themes/images/debugging-tabs.svg | 6 + .../client/themes/images/debugging-workers.svg | 11 + .../images/devtools-reps/jump-definition.svg | 8 + devtools/client/themes/images/diff.svg | 9 + devtools/client/themes/images/dock-bottom.svg | 10 + devtools/client/themes/images/dock-side-left.svg | 10 + devtools/client/themes/images/dock-side-right.svg | 10 + devtools/client/themes/images/dock-undock.svg | 11 + devtools/client/themes/images/dropmarker.svg | 6 + devtools/client/themes/images/error-tiny.svg | 6 + devtools/client/themes/images/error.svg | 6 + devtools/client/themes/images/eye-closed.svg | 10 + devtools/client/themes/images/eye-opened.svg | 7 + devtools/client/themes/images/eye.svg | 8 + devtools/client/themes/images/filter-small.svg | 7 + devtools/client/themes/images/filter-swatch.svg | 11 + devtools/client/themes/images/flexbox-swatch.svg | 8 + devtools/client/themes/images/folder.svg | 6 + devtools/client/themes/images/fox-smiling.svg | 37 + devtools/client/themes/images/geometry-editor.svg | 7 + devtools/client/themes/images/globe.svg | 6 + devtools/client/themes/images/grid.svg | 6 + devtools/client/themes/images/help.svg | 7 + .../client/themes/images/highlight-selector.svg | 6 + devtools/client/themes/images/import.svg | 6 + devtools/client/themes/images/info-small.svg | 7 + devtools/client/themes/images/info-tiny.svg | 6 + devtools/client/themes/images/info.svg | 6 + .../client/themes/images/item-arrow-dark-ltr.svg | 7 + .../client/themes/images/item-arrow-dark-rtl.svg | 7 + devtools/client/themes/images/item-arrow-ltr.svg | 7 + devtools/client/themes/images/item-arrow-rtl.svg | 7 + .../client/themes/images/linear-easing-swatch.svg | 7 + devtools/client/themes/images/lock.svg | 6 + devtools/client/themes/images/mdn.svg | 11 + devtools/client/themes/images/more.svg | 8 + devtools/client/themes/images/next.svg | 7 + devtools/client/themes/images/open-3-pane.svg | 10 + devtools/client/themes/images/open-inspector.svg | 6 + devtools/client/themes/images/pane-collapse.svg | 7 + devtools/client/themes/images/pane-expand.svg | 7 + devtools/client/themes/images/pause.svg | 6 + devtools/client/themes/images/pencil-icon.svg | 6 + devtools/client/themes/images/play.svg | 6 + .../client/themes/images/profiler-stopwatch.svg | 6 + devtools/client/themes/images/pseudo-class.svg | 7 + devtools/client/themes/images/reload.svg | 6 + devtools/client/themes/images/report.svg | 6 + devtools/client/themes/images/reveal.svg | 10 + devtools/client/themes/images/rewind.svg | 6 + .../images/rules-view-dark-mode-simulation.svg | 6 + .../images/rules-view-light-mode-simulation.svg | 7 + .../themes/images/rules-view-print-simulation.svg | 7 + devtools/client/themes/images/sad-face.svg | 9 + devtools/client/themes/images/search-clear.svg | 6 + devtools/client/themes/images/search.svg | 7 + .../themes/images/security-state-insecure.svg | 7 + .../client/themes/images/security-state-secure.svg | 6 + .../client/themes/images/security-state-weak.svg | 7 + devtools/client/themes/images/select-arrow.svg | 8 + devtools/client/themes/images/settings.svg | 6 + devtools/client/themes/images/shape-swatch.svg | 10 + .../client/themes/images/sort-ascending-arrow.svg | 6 + .../client/themes/images/sort-descending-arrow.svg | 6 + .../client/themes/images/tool-accessibility.svg | 7 + devtools/client/themes/images/tool-application.svg | 6 + devtools/client/themes/images/tool-debugger.svg | 6 + devtools/client/themes/images/tool-dom.svg | 6 + devtools/client/themes/images/tool-inspector.svg | 6 + devtools/client/themes/images/tool-memory.svg | 6 + devtools/client/themes/images/tool-network.svg | 6 + devtools/client/themes/images/tool-profiler.svg | 6 + devtools/client/themes/images/tool-storage.svg | 6 + devtools/client/themes/images/tool-styleeditor.svg | 6 + devtools/client/themes/images/tool-webconsole.svg | 7 + devtools/client/themes/images/vview-delete.svg | 6 + devtools/client/themes/images/vview-edit.svg | 6 + devtools/client/themes/images/vview-lock.svg | 6 + .../client/themes/images/webconsole/editor.svg | 7 + devtools/client/themes/images/webconsole/input.svg | 6 + .../client/themes/images/webconsole/navigation.svg | 7 + .../client/themes/images/webconsole/return.svg | 6 + .../themes/images/webconsole/reverse-search.svg | 7 + devtools/client/themes/images/webconsole/run.svg | 6 + devtools/client/themes/inspector.css | 226 +++++ devtools/client/themes/layout.css | 738 ++++++++++++++ devtools/client/themes/light-theme.css | 278 ++++++ devtools/client/themes/markup.css | 479 +++++++++ devtools/client/themes/memory.css | 649 ++++++++++++ devtools/client/themes/moz.build | 9 + devtools/client/themes/perf.css | 254 +++++ devtools/client/themes/rules.css | 974 ++++++++++++++++++ devtools/client/themes/splitters.css | 101 ++ devtools/client/themes/splitview.css | 145 +++ devtools/client/themes/storage.css | 171 ++++ devtools/client/themes/styleeditor.css | 326 ++++++ devtools/client/themes/toolbars.css | 202 ++++ devtools/client/themes/toolbox.css | 658 ++++++++++++ devtools/client/themes/tooltips.css | 930 +++++++++++++++++ devtools/client/themes/variables.css | 365 +++++++ devtools/client/themes/webconsole.css | 1055 ++++++++++++++++++++ devtools/client/themes/widgets.css | 686 +++++++++++++ 183 files changed, 13589 insertions(+) create mode 100644 devtools/client/themes/aboutprofiling.css create mode 100644 devtools/client/themes/accessibility-color-contrast.css create mode 100644 devtools/client/themes/animation.css create mode 100644 devtools/client/themes/audio/moz.build create mode 100644 devtools/client/themes/audio/shutter.wav create mode 100644 devtools/client/themes/badge.css create mode 100644 devtools/client/themes/boxmodel.css create mode 100644 devtools/client/themes/breadcrumbs.css create mode 100644 devtools/client/themes/changes.css create mode 100644 devtools/client/themes/chart.css create mode 100644 devtools/client/themes/common.css create mode 100644 devtools/client/themes/compatibility.css create mode 100644 devtools/client/themes/components-frame.css create mode 100644 devtools/client/themes/components-h-split-box.css create mode 100644 devtools/client/themes/computed.css create mode 100644 devtools/client/themes/dark-theme.css create mode 100644 devtools/client/themes/devtools-browser.css create mode 100644 devtools/client/themes/fonts.css create mode 100644 devtools/client/themes/images/aboutdebugging-connect-icon.svg create mode 100644 devtools/client/themes/images/aboutdebugging-error.svg create mode 100644 devtools/client/themes/images/aboutdebugging-fenix-nightly.svg create mode 100644 devtools/client/themes/images/aboutdebugging-fenix.svg create mode 100644 devtools/client/themes/images/aboutdebugging-firefox-aurora.svg create mode 100644 devtools/client/themes/images/aboutdebugging-firefox-beta.svg create mode 100644 devtools/client/themes/images/aboutdebugging-firefox-logo.svg create mode 100644 devtools/client/themes/images/aboutdebugging-firefox-nightly.svg create mode 100644 devtools/client/themes/images/aboutdebugging-firefox-release.svg create mode 100644 devtools/client/themes/images/aboutdebugging-globe-icon.svg create mode 100644 devtools/client/themes/images/aboutdebugging-information.svg create mode 100644 devtools/client/themes/images/aboutdebugging-process-icon.svg create mode 100644 devtools/client/themes/images/aboutdebugging-usb-icon.svg create mode 100644 devtools/client/themes/images/accessibility.svg create mode 100644 devtools/client/themes/images/add.svg create mode 100644 devtools/client/themes/images/alert-small.svg create mode 100644 devtools/client/themes/images/alert-tiny.svg create mode 100644 devtools/client/themes/images/alert.svg create mode 100644 devtools/client/themes/images/angle-swatch.svg create mode 100644 devtools/client/themes/images/animation-fast-track.svg create mode 100644 devtools/client/themes/images/application-debug.svg create mode 100644 devtools/client/themes/images/application-manifest.svg create mode 100644 devtools/client/themes/images/arrow-big.svg create mode 100644 devtools/client/themes/images/arrow-dropdown-12.svg create mode 100644 devtools/client/themes/images/arrow-e.svg create mode 100644 devtools/client/themes/images/arrow.svg create mode 100644 devtools/client/themes/images/arrowhead-down.svg create mode 100644 devtools/client/themes/images/arrowhead-left.svg create mode 100644 devtools/client/themes/images/arrowhead-right.svg create mode 100644 devtools/client/themes/images/arrowhead-up.svg create mode 100644 devtools/client/themes/images/blocked.svg create mode 100644 devtools/client/themes/images/breadcrumbs-divider.svg create mode 100644 devtools/client/themes/images/breadcrumbs-scrollbutton.svg create mode 100644 devtools/client/themes/images/browsers/chrome.svg create mode 100644 devtools/client/themes/images/browsers/edge.svg create mode 100644 devtools/client/themes/images/browsers/firefox.svg create mode 100644 devtools/client/themes/images/browsers/ie.svg create mode 100644 devtools/client/themes/images/browsers/mobile.svg create mode 100644 devtools/client/themes/images/browsers/opera.svg create mode 100644 devtools/client/themes/images/browsers/safari.svg create mode 100644 devtools/client/themes/images/case-match.svg create mode 100644 devtools/client/themes/images/check.svg create mode 100644 devtools/client/themes/images/checkbox.svg create mode 100644 devtools/client/themes/images/clear.svg create mode 100644 devtools/client/themes/images/close-3-pane.svg create mode 100644 devtools/client/themes/images/close.svg create mode 100644 devtools/client/themes/images/command-accented.svg create mode 100644 devtools/client/themes/images/command-always-on-top-window.svg create mode 100644 devtools/client/themes/images/command-bidi.svg create mode 100644 devtools/client/themes/images/command-chevron.svg create mode 100644 devtools/client/themes/images/command-console.svg create mode 100644 devtools/client/themes/images/command-eyedropper.svg create mode 100644 devtools/client/themes/images/command-frames.svg create mode 100644 devtools/client/themes/images/command-measure.svg create mode 100644 devtools/client/themes/images/command-noautohide.svg create mode 100644 devtools/client/themes/images/command-pick-accessibility.svg create mode 100644 devtools/client/themes/images/command-responsivemode.svg create mode 100644 devtools/client/themes/images/command-rulers.svg create mode 100644 devtools/client/themes/images/command-screenshot.svg create mode 100644 devtools/client/themes/images/copy.svg create mode 100644 devtools/client/themes/images/cubic-bezier-swatch.svg create mode 100644 devtools/client/themes/images/datastore.svg create mode 100644 devtools/client/themes/images/debugging-addons.svg create mode 100644 devtools/client/themes/images/debugging-tabs.svg create mode 100644 devtools/client/themes/images/debugging-workers.svg create mode 100644 devtools/client/themes/images/devtools-reps/jump-definition.svg create mode 100644 devtools/client/themes/images/diff.svg create mode 100644 devtools/client/themes/images/dock-bottom.svg create mode 100644 devtools/client/themes/images/dock-side-left.svg create mode 100644 devtools/client/themes/images/dock-side-right.svg create mode 100644 devtools/client/themes/images/dock-undock.svg create mode 100644 devtools/client/themes/images/dropmarker.svg create mode 100644 devtools/client/themes/images/error-tiny.svg create mode 100644 devtools/client/themes/images/error.svg create mode 100644 devtools/client/themes/images/eye-closed.svg create mode 100644 devtools/client/themes/images/eye-opened.svg create mode 100644 devtools/client/themes/images/eye.svg create mode 100644 devtools/client/themes/images/filter-small.svg create mode 100644 devtools/client/themes/images/filter-swatch.svg create mode 100644 devtools/client/themes/images/flexbox-swatch.svg create mode 100644 devtools/client/themes/images/folder.svg create mode 100644 devtools/client/themes/images/fox-smiling.svg create mode 100644 devtools/client/themes/images/geometry-editor.svg create mode 100644 devtools/client/themes/images/globe.svg create mode 100644 devtools/client/themes/images/grid.svg create mode 100644 devtools/client/themes/images/help.svg create mode 100644 devtools/client/themes/images/highlight-selector.svg create mode 100644 devtools/client/themes/images/import.svg create mode 100644 devtools/client/themes/images/info-small.svg create mode 100644 devtools/client/themes/images/info-tiny.svg create mode 100644 devtools/client/themes/images/info.svg create mode 100644 devtools/client/themes/images/item-arrow-dark-ltr.svg create mode 100644 devtools/client/themes/images/item-arrow-dark-rtl.svg create mode 100644 devtools/client/themes/images/item-arrow-ltr.svg create mode 100644 devtools/client/themes/images/item-arrow-rtl.svg create mode 100644 devtools/client/themes/images/linear-easing-swatch.svg create mode 100644 devtools/client/themes/images/lock.svg create mode 100644 devtools/client/themes/images/mdn.svg create mode 100644 devtools/client/themes/images/more.svg create mode 100644 devtools/client/themes/images/next.svg create mode 100644 devtools/client/themes/images/open-3-pane.svg create mode 100644 devtools/client/themes/images/open-inspector.svg create mode 100644 devtools/client/themes/images/pane-collapse.svg create mode 100644 devtools/client/themes/images/pane-expand.svg create mode 100644 devtools/client/themes/images/pause.svg create mode 100644 devtools/client/themes/images/pencil-icon.svg create mode 100644 devtools/client/themes/images/play.svg create mode 100644 devtools/client/themes/images/profiler-stopwatch.svg create mode 100644 devtools/client/themes/images/pseudo-class.svg create mode 100644 devtools/client/themes/images/reload.svg create mode 100644 devtools/client/themes/images/report.svg create mode 100644 devtools/client/themes/images/reveal.svg create mode 100644 devtools/client/themes/images/rewind.svg create mode 100644 devtools/client/themes/images/rules-view-dark-mode-simulation.svg create mode 100644 devtools/client/themes/images/rules-view-light-mode-simulation.svg create mode 100644 devtools/client/themes/images/rules-view-print-simulation.svg create mode 100644 devtools/client/themes/images/sad-face.svg create mode 100644 devtools/client/themes/images/search-clear.svg create mode 100644 devtools/client/themes/images/search.svg create mode 100644 devtools/client/themes/images/security-state-insecure.svg create mode 100644 devtools/client/themes/images/security-state-secure.svg create mode 100644 devtools/client/themes/images/security-state-weak.svg create mode 100644 devtools/client/themes/images/select-arrow.svg create mode 100644 devtools/client/themes/images/settings.svg create mode 100644 devtools/client/themes/images/shape-swatch.svg create mode 100644 devtools/client/themes/images/sort-ascending-arrow.svg create mode 100644 devtools/client/themes/images/sort-descending-arrow.svg create mode 100644 devtools/client/themes/images/tool-accessibility.svg create mode 100644 devtools/client/themes/images/tool-application.svg create mode 100644 devtools/client/themes/images/tool-debugger.svg create mode 100644 devtools/client/themes/images/tool-dom.svg create mode 100644 devtools/client/themes/images/tool-inspector.svg create mode 100644 devtools/client/themes/images/tool-memory.svg create mode 100644 devtools/client/themes/images/tool-network.svg create mode 100644 devtools/client/themes/images/tool-profiler.svg create mode 100644 devtools/client/themes/images/tool-storage.svg create mode 100644 devtools/client/themes/images/tool-styleeditor.svg create mode 100644 devtools/client/themes/images/tool-webconsole.svg create mode 100644 devtools/client/themes/images/vview-delete.svg create mode 100644 devtools/client/themes/images/vview-edit.svg create mode 100644 devtools/client/themes/images/vview-lock.svg create mode 100644 devtools/client/themes/images/webconsole/editor.svg create mode 100644 devtools/client/themes/images/webconsole/input.svg create mode 100644 devtools/client/themes/images/webconsole/navigation.svg create mode 100644 devtools/client/themes/images/webconsole/return.svg create mode 100644 devtools/client/themes/images/webconsole/reverse-search.svg create mode 100644 devtools/client/themes/images/webconsole/run.svg create mode 100644 devtools/client/themes/inspector.css create mode 100644 devtools/client/themes/layout.css create mode 100644 devtools/client/themes/light-theme.css create mode 100644 devtools/client/themes/markup.css create mode 100644 devtools/client/themes/memory.css create mode 100644 devtools/client/themes/moz.build create mode 100644 devtools/client/themes/perf.css create mode 100644 devtools/client/themes/rules.css create mode 100644 devtools/client/themes/splitters.css create mode 100644 devtools/client/themes/splitview.css create mode 100644 devtools/client/themes/storage.css create mode 100644 devtools/client/themes/styleeditor.css create mode 100644 devtools/client/themes/toolbars.css create mode 100644 devtools/client/themes/toolbox.css create mode 100644 devtools/client/themes/tooltips.css create mode 100644 devtools/client/themes/variables.css create mode 100644 devtools/client/themes/webconsole.css create mode 100644 devtools/client/themes/widgets.css (limited to 'devtools/client/themes') diff --git a/devtools/client/themes/aboutprofiling.css b/devtools/client/themes/aboutprofiling.css new file mode 100644 index 0000000000..6a66ad7d1e --- /dev/null +++ b/devtools/client/themes/aboutprofiling.css @@ -0,0 +1,169 @@ +/* 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/. */ + +.perf { + max-width: 670px; + margin: 10vh auto; + padding: 0 5%; +} + +/* Intro */ + +.perf-intro-row { + margin: 1.7em 0; + display: flex; + line-height: 1.8em; + align-items: center; +} + +.perf-intro-icon { + width: 4em; + height: 4em; + margin-inline-end: 1.3em; + background-image: url(chrome://devtools/skin/images/tool-profiler.svg); + background-size: 100%; + -moz-context-properties: fill; + fill: currentColor; + opacity: 0.5; +} + +/* Shared rules */ + +.perf-toggle-label { + padding: 7px 0; + display: grid; + grid-template-columns: max-content auto; + max-width: max-content; +} + +.perf-toggle-text-label { + display: flex; + align-items: center; +} + +.perf-toggle-description { + font-size: 13px; + line-height: 1.8; + color: var(--text-color-deemphasized); + grid-column: 2; +} + +/* Presets section */ + +.perf-presets { + margin: 2em 0; + border-bottom: 1px solid var(--in-content-border-color); + padding-bottom: 1em; +} + +/* Features and settings */ + +.perf-settings-row { + display: flex; + line-height: 1.8; +} + +.perf-settings-range-row { + display: grid; + grid-template-columns: 140px 1fr 90px; + align-items: center; + min-height: 30px; +} + +.perf-settings-range-input { + margin: 0; +} + +.perf-settings-range-value { + text-align: end; +} + +.perf-settings-thread-columns { + display: flex; + line-height: 1.3; +} + +.perf-settings-thread-column { + flex: 1; +} + +.perf-settings-thread-label { + margin-block: 12px; +} + +.perf-settings-all-threads { + margin-block: 12px; +} + +.perf-settings-text-label { + flex: 1; +} + +.perf-settings-text-input { + width: 100%; + box-sizing: border-box; +} + +#perftools-settings-thread-text { + margin-inline: 0; +} + +.perf-settings-checkbox-label-disabled > :not(input) { + /* The checkboxes already get their opacity set to 0.5 in common.inc.css, + so only target the text. The descriptions get their text deemphasized, + so set a value a bit higher than 0.5 to compensate for that. */ + opacity: 0.65; +} + +/* Local build section */ + +.perf-settings-dir-list { + box-sizing: border-box; + width: 100%; + height: 100px; + border: 1px solid var(--in-content-border-color); + margin: 0; + padding: 0; + overflow-y: auto; + background-color: var(--in-content-box-background); +} + +.perf-settings-dir-list:hover { + border-color: var(--in-content-border-hover); +} + +.pref-settings-dir-list-item { + display: flex; + padding: 3px 5px; +} + +.pref-settings-dir-list-item::before { + content: url(chrome://devtools/skin/images/folder.svg); + display: inline-flex; + align-self: center; + width: 12px; + height: 12px; + margin-inline-end: 5px; + -moz-context-properties: fill; + fill: currentColor; +} + +.perf-settings-dir-list-button-group { + padding-block: 4px; +} + +.perf-settings-dir-list-button-group > button { + margin-inline: 0 8px; +} + +/* Back button */ + +.perf-back { + margin-block-end: 13px; +} + +.perf-back-button { + /* Remove the inherited margins */ + margin-inline: 0; +} diff --git a/devtools/client/themes/accessibility-color-contrast.css b/devtools/client/themes/accessibility-color-contrast.css new file mode 100644 index 0000000000..dcf2a38614 --- /dev/null +++ b/devtools/client/themes/accessibility-color-contrast.css @@ -0,0 +1,77 @@ +/* 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/. */ + +/* Classes used to style the color contrast section in the Accessibility + * Checks panel and color picker tooltip across the Inspector panel. + * + * The section consists of: + * - contrast ratio value (numeric + score badge (AA/AAA/FAIL)): + * Only shows up if contrast ratio can be calculated. + * - large text indicator badge: + * Only shows up if the selected text node contains large text. + */ +.accessibility-color-contrast { + position: relative; + display: flex; + cursor: default; + height: inherit; + align-items: baseline; +} + +.accessibility-color-contrast .accessibility-contrast-value:empty:after { + display: none; +} + +.accessibility-color-contrast .accessibility-contrast-value:after { + margin-inline-start: 4px; +} + +.accessibility-color-contrast + .accessibility-contrast-value.AA:after, +.accessibility-color-contrast + .accessibility-contrast-value.AAA:after { + color: var(--theme-highlight-green); +} + +.accessibility-color-contrast + .accessibility-contrast-value.FAIL:after { + color: var(--theme-icon-error-color); + display: inline-block; + width: 12px; + height: 12px; + content: ""; + vertical-align: -2px; + background-image: url(resource://devtools-shared-images/error-small.svg); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; +} + +.accessibility-color-contrast + .accessibility-contrast-value.AA:after { + content: "AA\2713"; + unicode-bidi: isolate; +} + +.accessibility-color-contrast + .accessibility-contrast-value.AAA:after { + content: "AAA\2713"; + unicode-bidi: isolate; +} + +.accessibility-color-contrast .accessibility-color-contrast-separator:before { + content: "–"; + margin-inline-start: 4px; +} + +.accessibility-color-contrast-large-text { + background-color: var(--badge-background-color); + color: var(--badge-color); + outline: 1px solid var(--badge-border-color); + padding: 0px 2px; + margin-inline-start: 6px; + line-height: initial; + user-select: none; +} diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css new file mode 100644 index 0000000000..f244d5dad5 --- /dev/null +++ b/devtools/client/themes/animation.css @@ -0,0 +1,754 @@ +/* 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/. */ + +/* Animation-inspector specific theme variables */ + +:root { + --animation-item-hover-color: rgba(215, 215, 219, 0.4); + --animation-item-selected-color: rgba(215, 215, 219, 0.9); + --cssanimation-color: var(--purple-50); + --csstransition-color: var(--blue-55); + --fast-track-image: url("images/animation-fast-track.svg"); + --graph-height: 30px; + --graph-right-offset: 10px; + --keyframe-marker-shadow-color: #c4c4c4; + --pause-image: url(chrome://devtools/skin/images/pause.svg); + --progress-bar-color: var(--grey-40); + --resume-image: url(chrome://devtools/skin/images/play.svg); + --rewind-image: url(chrome://devtools/skin/images/rewind.svg); + --scriptanimation-color: var(--green-60); + --scrubber-color: var(--magenta-65); + --sidebar-width: 200px; + --tick-line-style: 0.5px solid var(--theme-splitter-color); +} + +:root.theme-dark { + --animation-item-hover-color: rgba(74, 74, 79, 0.5); + --animation-item-selected-color: var(--grey-60); + --csstransition-color: var(--blue-50); + --keyframe-marker-shadow-color: #818181; + --progress-bar-color: var(--grey-50); + --scrubber-color: var(--magenta-50); +} + +#animationinspector-panel { + overflow-x: auto; +} + +/* Root element of animation inspector */ +#animation-container { + cursor: default; + display: flex; + flex-direction: column; + height: 100%; + outline: none; + min-width: var(--min-container-width); +} + +#animation-container .uncontrolled { + overflow: hidden; +} + +#animation-container:not(.animation-detail-visible) .controlled { + display: none; +} + +#animation-container .animation-container-splitter { + overflow: hidden; +} + +/* Animation Toolbar */ +.animation-toolbar { + display: flex; +} + +.pause-resume-button::before { + background-image: var(--pause-image); +} + +.pause-resume-button.paused::before { + background-image: var(--resume-image); +} + +select.playback-rate-selector.devtools-button { + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-position: calc(100% - 4px) center; + background-repeat: no-repeat; + padding-inline-end: 1em; + text-align: center; +} + +select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):hover { + background: none; + background-color: var(--toolbarbutton-background); + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-position: calc(100% - 4px) center; + background-repeat: no-repeat; + border-color: var(--toolbarbutton-hover-border-color); +} + +.rewind-button::before { + background-image: var(--rewind-image); +} + +/* Animation List Container */ +.animation-list-container { + overflow: hidden; + width: 100%; + user-select: none; +} + +.animation-list-container.active-scrubber, +.animation-list-container.active-scrubber .animation-summary-graph { + cursor: col-resize; +} + +/* Current Time Scrubber */ +.current-time-scrubber-area { + grid-column: 2 / 3; + position: relative; + z-index: 2; +} + +.current-time-scrubber-area::before { + content: ""; + cursor: col-resize; + height: var(--theme-toolbar-height); + pointer-events: auto; + position: absolute; + /* In order to click on edge of current-time-scrubber-controller element */ + width: calc(100% + 1px); +} + +.current-time-scrubber-area:dir(rtl)::before { + /* In order to click on the start edge of current-time-scrubber-area element on RTL */ + margin-inline-start: -1px; +} + +.indication-bar.current-time-scrubber { + cursor: col-resize; + pointer-events: auto; +} + +.indication-bar.current-time-scrubber:dir(rtl)::before { + transform: translateX(6px); +} + +.indication-bar.current-time-scrubber:dir(rtl)::after { + transform: translateX(1px); +} + +.indication-bar.current-time-scrubber::before { + border-top-color: var(--scrubber-color); +} + +.indication-bar.current-time-scrubber::after { + background-color: var(--scrubber-color); +} + +/* Animation Item */ +.animation-item.cssanimation { + --graph-color: var(--cssanimation-color); + --graph-opacity: 0.7; +} + +.animation-item.csstransition { + --graph-color: var(--csstransition-color); + --graph-opacity: 0.8; +} + +.animation-item.scriptanimation { + --graph-color: var(--scriptanimation-color); + --graph-opacity: 0.5; +} + +.animation-item:hover { + background-color: var(--animation-item-hover-color); +} + +.animation-item.selected { + background-color: var(--animation-item-selected-color); +} + +/* Animation Target */ +.animation-target { + align-items: center; + display: flex; + grid-column: 1 / 2; + height: inherit; + padding-inline-start: 4px; + /* animation-target is tech term, so it should be displayed as ltr. */ + direction: ltr; +} + +.animation-item:dir(rtl).animation-target { + right:0; +} + +/* Reps component */ +.animation-target .objectBox { + display: flex; + max-width: 100%; +} + +.animation-target .objectBox .attrName { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.animation-target .objectBox .highlight-node { + fill: var(--theme-icon-dimmed-color); + flex: none; +} + +.animation-target .objectBox .highlight-node:hover{ + fill: var(--theme-icon-color); +} + +.animation-target .objectBox .highlight-node:active, +.animation-target.highlighting .objectBox .highlight-node { + fill: var(--theme-icon-checked-color); + /* Since the icon is quite thin, it can be hard to differentiate it + from its regular state. Adding some background helps make it pop a bit */ + background-color: var(--dimmed-highlighter-box-content-color); +} + +/* Summary Graph */ +.animation-summary-graph { + cursor: pointer; + grid-column: 2 / 3; + height: inherit; + padding-bottom: 3px; + padding-top: 3px; + position: relative; +} + +.animation-summary-graph.compositor::after { + background-image: var(--fast-track-image); + background-repeat: no-repeat; + content: ""; + display: block; + fill: var(--theme-icon-dimmed-color); + height: 100%; + position: absolute; + right: 0; + top: 5px; + width: 15px; + -moz-context-properties: fill; +} + +.animation-summary-graph.compositor:dir(rtl)::after { + right: unset; + left: 0; +} + +.animation-summary-graph-path { + height: 100%; + width: 100%; +} + +.animation-summary-graph:dir(rtl) .animation-summary-graph-path { + transform: scaleX(-1.0); +} + +.animation-computed-timing-path path { + fill: var(--graph-color); + fill-opacity: var(--graph-opacity); + stroke: var(--graph-color); + vector-effect: non-scaling-stroke; + transform: scale(1, -1); +} + +.animation-computed-timing-path path.infinity:nth-child(n+2) { + opacity: 0.3; +} + +.animation-effect-timing-path path { + fill: none; + stroke: var(--graph-color); + stroke-dasharray: 2px 2px; + transform: scale(1, -1); + vector-effect: non-scaling-stroke; +} + +.animation-effect-timing-path path.infinity:nth-child(n+2) { + opacity: 0.3; +} + +.animation-computed-timing-path path.infinity-duration, +.animation-effect-timing-path path.infinity-duration { + mask-clip: stroke-box; + mask-image: linear-gradient(90deg, black, transparent); + mask-origin: stroke-box; +} + +.animation-negative-delay-path path, +.animation-negative-end-delay-path path { + fill: none; + stroke: var(--theme-graphs-grey); + stroke-dasharray: 2px 2px; + transform: scale(1, -1); + vector-effect: non-scaling-stroke; +} + +.animation-delay-sign, +.animation-end-delay-sign { + background-color: var(--theme-graphs-grey); + height: 3px; + position: absolute; + bottom: 2px; +} + +.animation-delay-sign::before, +.animation-end-delay-sign::before { + background-color: inherit; + border-radius: 50%; + content: ""; + height: 6px; + position: absolute; + top: -1.5px; + width: 6px; +} + +.animation-delay-sign.fill, +.animation-end-delay-sign.fill { + background-color: var(--graph-color); +} + +/* These are delay sign directions. Basically, we can't use + the transform due to pseudo element, So we use the left/right align. */ + +.animation-delay-sign:dir(ltr)::before { + left: -3px; + right: unset; +} + +.animation-delay-sign:dir(rtl)::before { + left: unset; + right: -3px; +} + +.animation-delay-sign.negative:dir(ltr)::before { + left: unset; + right: -3px; +} + +.animation-delay-sign.negative:dir(rtl)::before { + left: -3px; + right: unset; +} + +.animation-end-delay-sign:dir(ltr)::before { + left: unset; + right: -3px; +} + +.animation-end-delay-sign:dir(rtl)::before { + left: -3px; + right: unset; +} + +.animation-end-delay-sign.negative:dir(ltr)::before { + left: -3px; + right: unset; +} +.animation-end-delay-sign.negative:dir(rtl)::before { + left: unset; + right: -3px; +} + +.animation-name { + height: 100%; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: calc(100% - 20px); +} + +.animation-name text { + dominant-baseline: middle; + fill: var(--theme-focus-outline-color); + paint-order: stroke; + stroke: var(--theme-body-background); + stroke-linejoin: round; + stroke-opacity: .5; + stroke-width: 4; + text-anchor: end; +} + +.animation-summary-graph:dir(rtl) .animation-name text { + transform: translateX(-100%); +} + +.animation-summary-graph:dir(rtl) .animation-name { + right:0; +} + +/* Animation Detail */ +.animation-detail-container { + background-color: var(--theme-sidebar-background); + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + width: 100%; + z-index: 2; +} + +.animation-detail-header { + display: flex; + padding-inline-end: 0; +} + +/* On OSX the cursor turns into a window-resizing cursor at the edges of the + * window, so bring the end of the close button in. */ +:root[platform="mac"] .animation-detail-header { + padding-inline-end: 2px; +} + +.animation-detail-title { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.animation-detail-close-button { + margin: 0; +} + +.animation-detail-close-button::before { + background-image: url(chrome://devtools/skin/images/close.svg); +} + +/* Animated Property List Container */ +.animated-property-list-container { + flex: 1; + overflow: hidden; + user-select: none; +} + +/* Keyframes Progress Bar */ +.keyframes-progress-bar-area { + background: none; + grid-column: 2 / 3; + pointer-events: none; + position: relative; + z-index: 2; +} + +.indication-bar.keyframes-progress-bar::before { + border-top-color: var(--progress-bar-color); +} + +.indication-bar.keyframes-progress-bar::after { + background-color: var(--progress-bar-color); +} + +/* Animated Property Item */ +.animated-property-item.unchanged { + opacity: 0.6; +} + +/* Animated Property Name */ +.animated-property-name { + align-items: center; + display: flex; + height: inherit; + justify-content: flex-end; + padding-inline-end: 10px; +} + +.animated-property-name.compositor span { + padding-inline-start: 15px; + position: relative; +} + +.animated-property-list-container.cssanimation .animated-property-name.compositor { + --fast-track-color: var(--cssanimation-color); +} + +.animated-property-list-container.csstransition .animated-property-name.compositor { + --fast-track-color: var(--csstransition-color); +} + +.animated-property-list-container.scriptanimation .animated-property-name.compositor { + --fast-track-color: var(--scriptanimation-color); +} + +.animated-property-name.compositor span:dir(ltr)::before, +.animated-property-name.compositor span:dir(rtl)::after { + background-image: var(--fast-track-image); + background-repeat: no-repeat; + background-size: contain; + content: ""; + fill: var(--fast-track-color); + height: 100%; + position: absolute; + /* In order to support RTL/LTR both of environment, set the left and right to zero */ + left: 0; + right: 0; + width: 15px; + -moz-context-properties: fill; +} + +.animated-property-name.warning span { + text-decoration: underline dotted; +} + +/* Keyframes Graph */ +.keyframes-graph { + grid-column: 2 / 3; + height: inherit; + padding-top: 5px; + position: relative; +} + +.keyframes-graph:dir(rtl) .keyframes-graph-path { + transform: scaleX(-1.0); +} + +.keyframes-graph-path { + height: 100%; + width: 100%; +} + +.keyframes-graph-path path { + fill: var(--teal-60); + fill-opacity: 0.5; + stroke: var(--teal-70); + vector-effect: non-scaling-stroke; + transform: scale(1, -1); +} + +.keyframes-graph.opacity .keyframes-graph-path path { + fill: var(--magenta-50); + stroke: var(--magenta-70); +} + +.keyframes-graph.transform .keyframes-graph-path path { + fill: var(--yellow-50); + stroke: var(--yellow-60); +} + +.keyframes-graph-path .color-path path { + fill-opacity: 1; + stroke: none; +} + +.keyframes-graph .keyframes-graph-path .hint path { + fill: none; + stroke-linecap: round; + stroke-opacity: 0; +} + +.keyframes-graph-path .hint path:hover { + stroke-opacity: 1; +} + +.keyframes-graph-path .hint rect { + fill-opacity: 0.1; +} + +.keyframes-graph-path .hint line { + stroke: #00b0bd; + stroke-opacity: 0; + vector-effect: non-scaling-stroke; +} + +.keyframes-graph-path .hint:hover line { + stroke-opacity: 1; +} + +/* Keyframe Marker List */ +.keyframe-marker-list { + pointer-events: none; + position: absolute; + height: 100%; + list-style-type: none; + top: 0%; + width: 100%; + padding-inline-start: 0; +} + +.keyframe-marker-item { + box-shadow: 0 0 0 1px var(--keyframe-marker-shadow-color); + border-radius: 100%; + pointer-events: auto; + position: absolute; + top: 50%; + height: 10px; + transform: translate(-5px, -3px); + width: 10px; +} + +.keyframe-marker-item:dir(rtl) { + transform: translate(5px, -3px); +} + +.animated-property-list-container.cssanimation .keyframe-marker-item { + background-color: var(--cssanimation-color); +} + +.animated-property-list-container.csstransition .keyframe-marker-item { + background-color: var(--csstransition-color); +} + +.animated-property-list-container.scriptanimation .keyframe-marker-item { + background-color: var(--scriptanimation-color); +} + +/* Common Components */ +/* Progress Inspection Panel */ +.progress-inspection-panel { + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + display: grid; + grid-template-columns: var(--sidebar-width) 1fr var(--graph-right-offset); + grid-template-rows: var(--theme-toolbar-height) calc(100% - var(--theme-toolbar-height)); +} + +.progress-inspection-panel > .background { + grid-column: 1 / -1; + grid-row: 1 / -1; + + position: sticky; + top: 0; + + /* Correspond to the bug 1462235 */ + height: calc(100% - 1px); + + pointer-events: none; + + display: grid; + grid-template-columns: subgrid; +} + +.progress-inspection-panel > .header { + grid-column: 1 / -1; + grid-row: 1 / 2; + + position: sticky; + top: 0; + + padding: 0; + z-index: 1; + + display: grid; + grid-template-columns: subgrid; +} + +.progress-inspection-panel > .indicator { + grid-column: 1 / -1; + grid-row: 1 / -1; + + position: sticky; + top: 0; + + /* Correspond to the bug 1462235 */ + height: calc(100% - 1px); + + pointer-events: none; + z-index: 2; + + display: grid; + grid-template-columns: subgrid; +} + +.progress-inspection-panel > ul { + grid-column: 1 / -1; + grid-row: 2 / -1; + + list-style-type: none; + margin: 0; + padding: 0; + + display: grid; + grid-template-columns: subgrid; + grid-auto-rows: min-content; +} + +.progress-inspection-panel > ul > li { + grid-column: 1 / -1; + height: var(--graph-height); + display: grid; + grid-template-columns: subgrid; +} + +/* Tick Lines */ +.tick-lines { + grid-column: 2 / 3; + position: relative; +} + +.tick-line { + position: absolute; + height: 100%; + border-inline-start: var(--tick-line-style); +} + +/* Tick Labels */ +.tick-labels { + grid-column: 2 / 3; + height: 100%; + position: relative; +} + +.tick-label { + border-inline-start: var(--tick-line-style); + height: 100%; + position: absolute; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.animated-property-list-container .tick-label:last-child { + border-inline-start: unset; + border-inline-end: var(--tick-line-style); + transform: translateX(calc(-100% + 0.5px)); +} + +.animated-property-list-container .tick-label:dir(rtl):last-child { + transform: translateX(calc(100% - 0.6px)); +} + +/* Indication Bar */ +.indication-bar { + position: absolute; + height: 100%; +} + +.indication-bar::before { + border-inline-start: 5px solid transparent; + border-inline-end: 5px solid transparent; + border-top: 5px solid; + content: ""; + height: calc(100% - 5px); + position: absolute; + transform: translateX(-6px); + width: 1px; +} + +.indication-bar::after { + content: ""; + height: 100%; + position: absolute; + transform: translateX(-1px); + width: 1px; +} + +/* No Animation Panel */ +.animation-error-message > p { + white-space: pre-wrap; +} + +.animation-element-picker::before { + background-image: url("resource://devtools-shared-images/command-pick.svg"); +} diff --git a/devtools/client/themes/audio/moz.build b/devtools/client/themes/audio/moz.build new file mode 100644 index 0000000000..b5c0e9b754 --- /dev/null +++ b/devtools/client/themes/audio/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "shutter.wav", +) diff --git a/devtools/client/themes/audio/shutter.wav b/devtools/client/themes/audio/shutter.wav new file mode 100644 index 0000000000..e9d742913e Binary files /dev/null and b/devtools/client/themes/audio/shutter.wav differ diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css new file mode 100644 index 0000000000..067f0131e2 --- /dev/null +++ b/devtools/client/themes/badge.css @@ -0,0 +1,107 @@ +/* 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/. */ + +:root { + --badge-active-background-color: var(--blue-60); + --badge-active-border-color: #FFFFFFB3; + --badge-background-color: white; + --badge-border-color: #CACAD1; + --badge-color: var(--grey-60); + --badge-hover-background-color: #DFDFE8; + --badge-interactive-background-color: var(--grey-20); + --badge-interactive-color: var(--grey-90); + --badge-scrollable-color: #8000D7; + --badge-scrollable-background-color: #FFFFFF; + --badge-scrollable-active-background-color: #8000D7; +} + +.theme-dark:root { + --badge-active-border-color: #FFF6; + --badge-background-color: var(--grey-80); + --badge-border-color: var(--grey-50); + --badge-color: var(--grey-40); + --badge-hover-background-color: var(--grey-80); + --badge-interactive-background-color: var(--grey-70); + --badge-interactive-color: var(--grey-30); + --badge-scrollable-color: #B98EFF; + --badge-scrollable-background-color: var(--badge-interactive-background-color); +} + +/* Inspector badge */ +.inspector-badge, +.editor.text .whitespace::before, +.unavailable-children::before { + display: inline-block; + /* 9px text is too blurry on low-resolution screens */ + font-size: 10px; + font-weight: normal; + line-height: 10px; + height: 12px; + margin-top: 1px; + vertical-align: top; + border: 1px solid var(--badge-border-color); + border-radius: 3px; + padding: 0px 2px; + margin-inline-start: 5px; + user-select: none; + background-color: var(--badge-background-color); + color: var(--badge-color); + box-sizing: border-box; +} + +.editor.text .whitespace::before { + content: attr(data-label); + margin-inline-start: 0; +} + +.unavailable-children::before { + content: attr(data-label); + height: auto; +} + +@media (min-resolution: 1.1dppx) { + .inspector-badge, + .editor.text .whitespace::before { + font-size: 9px; + } +} + +/* Inspector badges that are interactive/clickable */ +.inspector-badge.interactive { + background-color: var(--badge-interactive-background-color); + color: var(--badge-interactive-color); + cursor: pointer; +} + +.inspector-badge:not(.active).interactive:focus, +.inspector-badge:not(.active).interactive:hover { + background-color: var(--badge-hover-background-color); +} + +.inspector-badge.active, +.inspector-badge.interactive.active { + background-color: var(--badge-active-background-color); + border-color: var(--badge-active-border-color); + color: var(--theme-selection-color); +} + +.inspector-badge.interactive.scrollable-badge { + background-color: var(--badge-scrollable-background-color); + border-color: var(--badge-scrollable-color); + color: var(--badge-scrollable-color); +} + +.inspector-badge.interactive.scrollable-badge.active { + background-color: var(--badge-scrollable-active-background-color); + color: var(--theme-selection-color); +} + +.inspector-badge.has-disabled-events { + font-style: italic; +} + +.inspector-badge.has-disabled-events::before { + content: "*"; + padding-inline-end: 2px; +} diff --git a/devtools/client/themes/boxmodel.css b/devtools/client/themes/boxmodel.css new file mode 100644 index 0000000000..96c58649d9 --- /dev/null +++ b/devtools/client/themes/boxmodel.css @@ -0,0 +1,431 @@ +/* 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/ */ + +:root { + --marginbox-color: #FDFFDF; + --borderbox-color: var(--grey-50); + --paddingbox-color: #E3DCFF; + --contentbox-color: #CFF0FB; + --marginbox-border-color: #D8E60A; + --contentbox-border-color: #54A9FF; + --position-border-color: var(--grey-50); +} + +:root.theme-dark { + --marginbox-color: #73764A; + --borderbox-color: var(--grey-70); + --paddingbox-color: #6657A6; + --contentbox-color: #407AA4; + --marginbox-border-color: #BDCA00; + --contentbox-border-color: #00B8FF; + --position-border-color: var(--grey-40); +} + +.boxmodel-container { + overflow: auto; + padding-bottom: 4px; + max-width: 600px; + margin: 0 auto; +} + +/* Header */ + +.boxmodel-header, +.boxmodel-info { + display: flex; + align-items: center; + padding: 4px 19px; +} + +.layout-geometry-editor::before { + background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px; +} + +/* Main: contains the box-model regions */ + +.boxmodel-main { + position: relative; + color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 14px auto; + width: calc(100% - 2 * 14px); + min-width: 240px; + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; +} + +.boxmodel-box { + margin: 25px; +} + +.boxmodel-size { + color: var(--grey-90); +} + +.boxmodel-position, +.boxmodel-margin, +.boxmodel-padding { + color: var(--grey-50); +} + +.theme-dark .boxmodel-margin, +.theme-dark .boxmodel-border, +.theme-dark .boxmodel-padding, +.theme-dark .boxmodel-size { + color: var(--grey-10); +} + +.theme-dark .boxmodel-position { + color: var(--grey-30); +} + +/* Regions are 3 nested elements with wide borders and outlines */ + +.boxmodel-contents { + height: 18px; + outline: dashed 1px var(--contentbox-border-color); +} + +.boxmodel-margins { + border-width: 22px; + border-style: solid; + outline: dashed 1px var(--marginbox-border-color); +} + +.boxmodel-borders { + border-width: 5px; + border-style: solid; +} + +.boxmodel-paddings { + border-width: 27px; + border-style: solid; +} + +/* Regions colors */ + +.boxmodel-margins { + border-color: var(--marginbox-color); +} + +.boxmodel-borders { + border-color: var(--borderbox-color); +} + +.boxmodel-paddings { + border-color: var(--paddingbox-color); +} + +.boxmodel-contents { + background-color: var(--contentbox-color); +} + +/* Editable region sizes are contained in absolutely positioned

*/ + +.boxmodel-main > p, +.boxmodel-size { + position: absolute; + pointer-events: none; + margin: 0; + text-align: center; + direction: ltr; +} + +.boxmodel-main > p > span, +.boxmodel-main > p > input, +.boxmodel-content, +.boxmodel-size > span { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.boxmodel-top, +.boxmodel-bottom { + width: calc(100% - 2px); + text-align: center; + z-index: 1; /* workaround for bug 1559706 */ +} + +.boxmodel-padding.boxmodel-top { + top: 34px; +} + +.boxmodel-padding.boxmodel-bottom { + bottom: 35px; +} + +.boxmodel-border.boxmodel-top { + top: 17px; +} + +.boxmodel-border.boxmodel-bottom { + bottom: 17px; +} + +.boxmodel-margin.boxmodel-top { + top: 0px; +} + +.boxmodel-margin.boxmodel-bottom { + bottom: 1px; +} + +.boxmodel-size, +.boxmodel-position.boxmodel-left, +.boxmodel-position.boxmodel-right, +.boxmodel-margin.boxmodel-left, +.boxmodel-margin.boxmodel-right, +.boxmodel-border.boxmodel-left, +.boxmodel-border.boxmodel-right, +.boxmodel-padding.boxmodel-left, +.boxmodel-padding.boxmodel-right { + top: 22px; + line-height: 80px; + z-index: 1; /* workaround for bug 1559706 */ +} + +.boxmodel-size { + width: calc(100% - 2px); +} + +.boxmodel-position.boxmodel-top, +.boxmodel-position.boxmodel-bottom, +.boxmodel-position.boxmodel-left, +.boxmodel-position.boxmodel-right, +.boxmodel-margin.boxmodel-right, +.boxmodel-margin.boxmodel-left, +.boxmodel-border.boxmodel-right, +.boxmodel-border.boxmodel-left, +.boxmodel-padding.boxmodel-right, +.boxmodel-padding.boxmodel-left { + width: 21px; +} + +.boxmodel-padding.boxmodel-left { + left: 56px; +} + +.boxmodel-padding.boxmodel-right { + right: 56px; +} + +.boxmodel-border.boxmodel-left { + left: 39px; +} + +.boxmodel-border.boxmodel-right { + right: 39px; +} + +.boxmodel-margin.boxmodel-right { + right: 24px; +} + +.boxmodel-margin.boxmodel-left { + left: 24px; +} + +.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) { + transform: rotate(-90deg); +} + +.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) { + transform: rotate(90deg); +} + +.boxmodel-rotate.boxmodel-left.boxmodel-position:not(.boxmodel-editing) { + border-top: none; + border-right: 1px solid var(--theme-highlight-purple); + width: auto; + height: 30px; +} + +.boxmodel-size > p { + display: inline-block; + margin: auto; + line-height: 0; +} + +.boxmodel-rotate.boxmodel-right.boxmodel-position:not(.boxmodel-editing) { + border-top: none; + border-left: 1px solid var(--theme-highlight-purple); + width: auto; + height: 30px; +} + +/* Box Model Positioning: contains top, right, bottom, left */ + +.boxmodel-position.boxmodel-top, +.boxmodel-position.boxmodel-bottom { + border-left: 1px solid var(--position-border-color); + left: calc(50% - 2px); + padding-left: 1px; +} + +.boxmodel-position.boxmodel-right, +.boxmodel-position.boxmodel-left { + border-top: 1px solid var(--position-border-color); + line-height: 15px; + top: calc(50% - 1px); + width: 30px; +} + +.boxmodel-position.boxmodel-top { + top: -18px; +} + +.boxmodel-position.boxmodel-right { + right: -9px; +} + +.boxmodel-position.boxmodel-bottom { + bottom: -18px; +} + +.boxmodel-position.boxmodel-left { + left: -9px; +} + +/* Legend: displayed inside regions */ + +.boxmodel-legend { + position: absolute; + z-index: 1; + cursor: default; +} + +.boxmodel-legend[data-box="margin"] { + margin-left: 9px; + margin-top: 4px; + color: var(--grey-90); +} + +.boxmodel-legend[data-box="position"] { + color: var(--grey-90); + margin: -18px 13px; +} + +.boxmodel-legend[data-box="padding"] { + margin-top: 12px; + margin-left: 12px; + color: var(--grey-90); +} + +.boxmodel-legend[data-box="border"] { + background-color: var(--borderbox-color); + height: 15px; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; + border-radius: 3px; + margin: 0px 0px; +} + +.theme-dark .boxmodel-legend[data-box="margin"], +.theme-dark .boxmodel-legend[data-box="border"], +.theme-dark .boxmodel-legend[data-box="padding"] { + color: var(--grey-10); +} + +.theme-dark .boxmodel-legend[data-box="position"] { + color: var(--grey-30); +} + +/* Editable fields */ + +.boxmodel-editable { + position: relative; + border: 1px dashed transparent; + user-select: none; + white-space: nowrap; + cursor: pointer; +} + +.boxmodel-editable[data-box="border"] { + background-color: var(--borderbox-color); + border-radius: 3px; + padding: 0 2px; +} + +.boxmodel-editable:hover { + border-bottom-color: hsl(0, 0%, 50%); +} + +.boxmodel-editable:focus, +.boxmodel-editable:active { + border: 1px solid var(--blue-50); + outline: none; +} + +.boxmodel-editable[data-box="margin"]:hover { + background-color: var(--marginbox-border-color); +} + +.boxmodel-editable[data-box="padding"]:hover { + background-color: #c78fc7b3; +} + +.boxmodel-editable[data-box="border"]:hover { + background-color: #545454; +} + +.boxmodel-editable[data-box="content"]:hover { + background-color: var(--contentbox-border-color); +} + +.boxmodel-editable[data-box="margin"]:hover, +.boxmodel-editable[data-box="padding"]:hover, +.boxmodel-editable[data-box="border"]:hover, +.boxmodel-editable[data-box="content"]:hover { + border-radius: 3px; +} + +.boxmodel-size > span { + cursor: default; +} + +/* Box Model Info: contains the position and size of the element */ + +.boxmodel-element-size { + flex: 1; + direction: ltr; + text-align: match-parent; +} + +.boxmodel-position-group { + display: flex; + align-items: center; +} + +/* Tag displayed next to DOM Node previews (used to display reference elements) */ + +.boxmodel-container .reference-element { + margin-inline-start: 14px; + margin-block-start: 4px; + display: block; +} + +.boxmodel-container .reference-element-type { + background: var(--theme-highlight-purple); + color: white; + padding: 1px 2px; + border-radius: 2px; + font-size: 9px; + margin-inline-end: 5px; +} + +.theme-dark .boxmodel-container .reference-element-type { + color: black; +} + +/* Box Model Main - Offset Parent */ + +.boxmodel-offset-parent { + position: absolute; + top: -20px; + right: -10px; + color: var(--theme-highlight-purple); +} diff --git a/devtools/client/themes/breadcrumbs.css b/devtools/client/themes/breadcrumbs.css new file mode 100644 index 0000000000..921fd81291 --- /dev/null +++ b/devtools/client/themes/breadcrumbs.css @@ -0,0 +1,133 @@ +/* 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/. */ + + :root { + --breadcrumb-id-class-color: #909090; + } + + .theme-dark:root { + --breadcrumb-id-class-color: var(--theme-text-color-strong); + } + +/* Inspector HTMLBreadcrumbs */ + +.breadcrumbs-widget-container { + margin-right: 3px; + max-height: 24px; /* Set max-height for proper sizing on linux */ + height: 24px; /* Set height to prevent starting small waiting for content */ +} + +.breadcrumbs-widget-container:-moz-locale-dir(rtl) { + margin-right: 0; + margin-left: 3px; +} + +.scrollbutton-up, +.scrollbutton-down { + appearance: none; + background: transparent; + box-shadow: none; + border: none; + list-style-image: none; + margin: 0; + padding: 0; + visibility: collapse; +} + +.scrollbutton-up > .toolbarbutton-icon, +.scrollbutton-down > .toolbarbutton-icon { + appearance: none; + width: 20px; + height: 16px; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + background-image: url("images/breadcrumbs-scrollbutton.svg"); + list-style-image: none; + padding: 0; + + -moz-context-properties: fill; + fill: var(--theme-toolbar-color); +} + +.scrollbutton-up:not([disabled]):active:hover, +.scrollbutton-down:not([disabled]):active:hover { + background-color: var(--theme-toolbar-hover); +} + +.scrollbutton-up[disabled] > .toolbarbutton-icon, +.scrollbutton-down[disabled] > .toolbarbutton-icon { + opacity: 0.5; +} + +/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */ +.scrollbutton-up { + border-right: solid 1px var(--theme-splitter-color); + border-left: solid 1px transparent; + box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background); +} + +.scrollbutton-down { + border-right: solid 1px transparent; + border-left: solid 1px var(--theme-splitter-color); + box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); +} + +.scrollbutton-up[disabled], +.scrollbutton-down[disabled] { + box-shadow: none; + border-color: transparent; +} + +.scrollbutton-down > .toolbarbutton-icon { + transform: scaleX(-1); +} + +.breadcrumbs-widget-item { + background-color: transparent; + border: none; + margin-inline: 10px 1px; + padding: 0; +} + +.breadcrumbs-widget-item:first-child::before { + /* The first crumb does not need any separator before itself */ + content: unset; +} + +.breadcrumbs-widget-item:not(:first-child)::before { + content: url(chrome://devtools/skin/images/breadcrumbs-divider.svg); + background: none; + position: relative; + left: -3px; + margin: 0 4px 0 -1px; + top: -1px; +} + +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id { + color: var(--theme-highlight-purple); +} + +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { + color: var(--theme-highlight-blue); +} + +.theme-dark .breadcrumbs-widget-item { + color: var(--theme-selection-color); +} + +.theme-light .breadcrumbs-widget-item { + color: var(--theme-body-color); +} + +.breadcrumbs-widget-item-id, +.breadcrumbs-widget-item-classes { + color: var(--breadcrumb-id-class-color); +} + +.breadcrumbs-widget-item-pseudo-classes { + color: var(--pseudo-class-text-color); +} diff --git a/devtools/client/themes/changes.css b/devtools/client/themes/changes.css new file mode 100644 index 0000000000..fa16cd04b1 --- /dev/null +++ b/devtools/client/themes/changes.css @@ -0,0 +1,211 @@ +/* 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/. */ + +/* CSS Variables specific to the Changes panel that aren't defined by the themes */ +:root { + --diff-add-background-color: #f1feec; + --diff-add-text-color: #54983f; + --diff-remove-background-color: #fbf2f5; + --diff-remove-text-color: #bf7173; + --diff-source-background: var(--theme-toolbar-background); + --diff-level: 0; + --diff-level-offset: 10px; + /* + Minimum padding so content on the first level (zero) isn't touching the edge. Added + and removed lines will re-declare this to add extra padding to clear the +/- icons. + */ + --diff-level-min-offset: 5px; +} + +:root.theme-dark { + --diff-add-background-color: rgba(18, 188, 0, 0.15); + --diff-add-text-color: #12BC00; + --diff-remove-background-color: rgba(255, 0, 57, 0.15); + --diff-remove-text-color: #FF0039; + --diff-source-background: #222225; +} + +:root[dir="rtl"] { + /* Increase minimum offset on right-to-left layout to clear the floating scrollbar. */ + --diff-level-min-offset: 15px; +} + +:root[dir="rtl"] #sidebar-panel-changes .source { + /* Enforce left-to-right code rendering on right-to-left layout. */ + direction: ltr; +} + +#sidebar-panel-changes { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow: auto; + background: var(--theme-sidebar-background); +} + +#sidebar-panel-changes .href { + display: flex; + align-items: center; + color: var(--theme-toolbar-color); + background: var(--diff-source-background); + border-top: 1px solid var(--theme-splitter-color); + border-bottom: 1px solid var(--theme-splitter-color); + padding: 4px; + padding-inline-start: var(--diff-level-min-offset); + font-size: 12px; +} + +#sidebar-panel-changes .source:first-child .href { + border-top: unset; +} + +#sidebar-panel-changes .href span { + /* Allows trimming of flex item with overflow ellipsis within the flex container */ + min-width: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +#sidebar-panel-changes .level { + padding-top: 3px; + padding-right: 5px; + padding-bottom: 3px; + padding-left: calc(var(--diff-level-min-offset) + + var(--diff-level-offset) * var(--diff-level)); +} + +#sidebar-panel-changes .changes__toolbar { + background: var(--theme-sidebar-background); + border-bottom: 1px solid var(--theme-splitter-color); + padding: 2px 5px; + position: sticky; + top: 0; + z-index: 1; +} + +/* Remove the top border of the first source to avoid double border from sticky toolbar */ +#sidebar-panel-changes .changes__toolbar + .source .href { + border-top: none; +} + +.changes__copy-all-changes-button { + -moz-context-properties: fill; + /* Use the Firefox copy icon (16px) instead of the smaller DevTools one (12px) */ + background: url(chrome://global/skin/icons/edit-copy.svg) no-repeat; + background-position: 4px 3px; + background-size: 16px; + border: none; + border-radius: 3px; + color: var(--theme-body-color); + fill: currentColor; + padding-block: 4px; + padding-inline: 25px 5px; +} + +.changes__copy-all-changes-button:dir(rtl) { + background-position-x: right 4px; +} + +.changes__copy-all-changes-button:hover, +.changes__copy-all-changes-button:focus { + background-color: var(--theme-button-background); +} + +.changes__copy-all-changes-button:active { + background-color: var(--theme-button-active-background); +} + +/* Hide the Copy Rule button by default. */ +.changes__copy-rule-button { + /** + * The rgba() format of the background colors makes the button see-through and it looks + * bad when stacked on top of long selectors. + * + * To solve this and not change the color format which is inherited from the Photon + * color guide in `client/themes/variables.css`, we use a blending trick to overlay the + * rgba() color value onto a solid color used for the panel background (achieved with + * a linear gradient with no transition). This keeps the rgba() color, but prevents the + * see-through effect. + */ + background-blend-mode: overlay; + background-color: var(--theme-button-background); + background-image: + linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background)); + border-radius: 8px; + border: none; + color: var(--theme-body-color); + display: none; + padding: 1px 7px; + position: absolute; + right: 5px; + top: 2px; +} + +.changes__copy-rule-button:active { + background-color: var(--theme-button-active-background); +} + +.changes__rule { + position: relative; +} + +.changes__selector { + word-wrap: break-word; +} + +/* Show the Copy Rule button when hovering over the rule's selector elements */ +.changes__selector:hover + .changes__copy-rule-button, +.changes__selector:hover + .changes__selector + .changes__copy-rule-button, +.changes__copy-rule-button:hover { + display: block; +} + +.changes__declaration { + overflow-wrap: break-word; + white-space: pre-wrap; +} + +.changes__declaration-name { + margin-left: 10px; +} + +.diff-add, +.diff-remove { + --diff-level-min-offset: 15px; + position: relative; +} + +.diff-add::before, +.diff-remove::before { + position: absolute; + left: 5px; +} + +.diff-add { + background-color: var(--diff-add-background-color); +} + +.diff-add::before { + content: "+"; + color: var(--diff-add-text-color); +} + +.diff-remove { + background-color: var(--diff-remove-background-color); +} + +.diff-remove::before { + content: "-"; + color: var(--diff-remove-text-color); +} + +#sidebar-panel-changes .devtools-sidepanel-no-result :not(:first-child) { + font-style: normal; +} + +#sidebar-panel-changes.inspector-tabpanel { + min-width: 0; +} diff --git a/devtools/client/themes/chart.css b/devtools/client/themes/chart.css new file mode 100644 index 0000000000..f0e072edf0 --- /dev/null +++ b/devtools/client/themes/chart.css @@ -0,0 +1,135 @@ +/* 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/. */ + +/* Chart */ + +.generic-chart-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.theme-dark .generic-chart-container { + color: var(--theme-selection-color); +} + +.theme-light .generic-chart-container { + color: var(--theme-text-color-alt); +} + +.chart-colored-blob { + fill: var(--theme-body-color); + background: var(--theme-body-color); +} + +/* Chart: Pie */ + +.pie-chart-slice { + stroke-width: 1px; + cursor: pointer; +} + +.theme-dark .pie-chart-slice { + stroke: rgba(0,0,0,0.2); +} + +.theme-light .pie-chart-slice { + stroke: rgba(255,255,255,0.8); +} + +.theme-dark .pie-chart-slice[largest] { + stroke-width: 2px; + stroke: #fff; +} + +.theme-light .pie-chart-slice[largest] { + stroke: #000; +} + +.pie-chart-label { + text-anchor: middle; + dominant-baseline: middle; + pointer-events: none; +} + +.theme-dark .pie-chart-label { + fill: #000; +} + +.theme-light .pie-chart-label { + fill: #fff; +} + +.pie-chart-container[slices="1"] > .pie-chart-slice { + stroke-width: 0px; +} + +.pie-chart-slice, +.pie-chart-label { + transition: all 0.1s ease-out; +} + +.pie-chart-slice:not(:hover, [focused]), +.pie-chart-slice:not(:hover, [focused]) + .pie-chart-label { + transform: none !important; +} + +/* Chart: Table */ + +.table-chart-title { + padding-bottom: 10px; + font-size: 120%; + font-weight: 600; +} + +.table-chart-row { + margin-top: 1px; + cursor: pointer; +} + +.table-chart-grid:hover .table-chart-row { + transition: opacity 0.1s ease-in-out; +} + +.table-chart-grid:not(:hover) .table-chart-row { + transition: opacity 0.2s ease-in-out; +} + +.generic-chart-container:hover > .table-chart-grid:hover .table-chart-row:not(:hover), +.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid .table-chart-row:not([focused]) { + opacity: 0.4; +} + +.table-chart-row-box { + width: 8px; + height: 1.5em; + margin-inline-end: 10px; +} + +.table-chart-row-label { + width: 8em; + padding-inline-end: 6px; + cursor: inherit; +} + +.table-chart-totals { + margin-top: 8px; + padding-top: 6px; +} + +.table-chart-totals { + border-top: 1px solid var(--theme-splitter-color); +} + +.table-chart-summary-label { + font-weight: 600; + padding: 1px 0px; +} + +.theme-dark .table-chart-summary-label { + color: var(--theme-selection-color); +} + +.theme-light .table-chart-summary-label { + color: var(--theme-body-color); +} diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css new file mode 100644 index 0000000000..f4bee0fb8c --- /dev/null +++ b/devtools/client/themes/common.css @@ -0,0 +1,757 @@ +/* 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/. */ + +@import url("chrome://devtools/skin/splitters.css"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + /* Bug 1458224: the initial `font-size` is different on Mac/Windows + * (appears fixed to 11px) and Linux (bigger, depends on user settings). + * Workaround: specify font-size on root, on form inputs, and whenever + * we're using the `font` shorthand. */ + font: message-box; + font-size: var(--theme-body-font-size); + + /* TODO(bug 1022557): Perhaps we want to allow forced colors in devtools */ + forced-color-adjust: none; + + --tab-line-hover-color: rgba(0,0,0,.2); + --tab-line-selected-color: var(--blue-50); + --toggle-thumb-color: white; + --toggle-track-color: var(--grey-50); + + --searchbox-no-match-background-color: #ffe5e5; + --searchbox-no-match-stroke-color: var(--red-60); +} + +:root.theme-light { + color-scheme: light; +} + +:root.theme-dark { + color-scheme: dark; + + --tab-line-hover-color: rgba(255,255,255,.2); + --toggle-thumb-color: var(--grey-40); + + --searchbox-no-match-background-color: #402325; + --searchbox-no-match-stroke-color: var(--red-50); +} + +:root[platform="mac"] { + --monospace-font-family: Menlo, monospace; +} + +:root[platform="win"] { + --monospace-font-family: Consolas, monospace; +} + +:root[platform="linux"] { + --monospace-font-family: monospace; +} + +/** + * Customize the dark theme's scrollbar colors to avoid excessive contrast. + */ +:root.theme-dark { + scrollbar-color: var(--grey-50) var(--theme-splitter-color); +} + +/** + * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts + * between the light theme and the selected GTK theme (see bug 1471163). + * This removes GTK scrollbars and uses a fallback design (see bug 1464723). + */ +:root[platform="linux"].theme-light { + scrollbar-color: var(--grey-40) var(--grey-20); +} + +::selection { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.devtools-monospace { + font-family: var(--monospace-font-family); + font-size: var(--theme-code-font-size); +} + +/** + * For text that needs to be cut with an ellipsis … + */ +.devtools-ellipsis-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/** + * Override global.css input styles + */ +html|input { + margin: revert; +} + +/** + * Override wrong system font from forms.css + * Bug 1458224: buttons use a wrong default font-size on Linux + */ +html|button, html|select, html|input { + font: message-box; + font-size: var(--theme-body-font-size); +} + +/* Devtools rely on the old Gecko/HTML4 button hit testing */ +html|button > * { + pointer-events: none; +} + +/* Prevent buttons from having a text selection highlight. Bug 1546366 */ +button::selection { + all: unset; +} + +iframe { + border: 0; + min-width: 0; + min-height: 0; +} + +/* Autocomplete Popup */ +.devtools-autocomplete-popup { + overflow: hidden; + + /* Devtools autocompletes display technical english keywords and should be displayed + using LTR direction. */ + direction: ltr !important; +} + +/* Reset list styles. */ +.devtools-autocomplete-popup ul { + list-style: none; +} + +.devtools-autocomplete-popup ul, +.devtools-autocomplete-popup li { + margin: 0; +} + +.devtools-autocomplete-listbox { + --autocomplete-item-padding-inline: 8px; + --autocomplete-item-color-swatch-size: 1em; + --autocomplete-item-color-swatch-margin-inline: 5px; + appearance: none !important; + background-color: transparent; + border-width: 0px !important; + margin: 0; + padding: 0; + overflow-x: hidden; + max-height: 20rem; + box-sizing: border-box; +} + +.devtools-autocomplete-listbox .autocomplete-item { + width: 100%; + box-sizing: border-box; + background-color: transparent; + color: var(--theme-popup-color); + padding: 1px var(--autocomplete-item-padding-inline); + cursor: default; + text-overflow: ellipsis; + white-space: pre; + overflow: hidden; +} + +.devtools-autocomplete-listbox .autocomplete-item > .initial-value, +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value { + margin: 0; + padding: 0; + float: inline-start; +} + +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-postlabel { + font-style: italic; + float: inline-end; + padding-inline-end: 3px; +} + +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count { + text-align: end; +} + +.devtools-autocomplete-listbox .autocomplete-swatch { + cursor: pointer; + border-radius: 50%; + box-shadow: 0 0 0 1px #c4c4c4; + width: var(--autocomplete-item-color-swatch-size); + height: var(--autocomplete-item-color-swatch-size); + vertical-align: middle; + /* align the swatch with its value */ + margin-top: -1px; + margin-inline: var(--autocomplete-item-color-swatch-margin-inline); + display: inline-block; + position: relative; +} + +/* Rest of the dark and light theme */ +.devtools-autocomplete-popup, +.tooltip-panel.devtools-autocomplete-popup, +.CodeMirror-hints, +.CodeMirror-Tern-tooltip { + border: 1px solid var(--theme-popup-border-color); + background-color: var(--theme-popup-background); + color: var(--theme-popup-color); +} + +.devtools-autocomplete-listbox .autocomplete-item:hover { + background-color: var(--theme-popup-dimmed); +} + +.devtools-autocomplete-listbox .autocomplete-selected, +.devtools-autocomplete-listbox .autocomplete-selected:hover { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.devtools-autocomplete-listbox .autocomplete-selected > .initial-value { + font-weight: bold; +} + +/* Autocomplete list clone used for accessibility. */ + +.devtools-autocomplete-list-aria-clone { + /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */ + position: fixed; + overflow: hidden; + margin: 0; + width: 0; + height: 0; +} + +.devtools-autocomplete-list-aria-clone li { + /* Prevent screen readers from prefacing every item with 'bullet'. */ + list-style-type: none; +} + +/* Keyboard focus highlight styles */ + +:focus-visible { + outline: var(--theme-focus-outline); + outline-offset: var(--theme-outline-offset); + box-shadow: var(--theme-outline-box-shadow); + + /* override properties set in global-shared.css for links */ + a& { + outline-color: var(--theme-focus-outline-color) !important; + outline-width: var(--theme-focus-outline-size) !important; + } + + /* offset the outline for checkbox and radio buttons so it doesn't conflict with existing border */ + :is(input[type="radio"], input[type="checkbox"], checkbox)& { + outline-offset: 2px; + } +} + +/* Toolbar buttons */ +.devtools-togglebutton, +.devtools-button { + appearance: none; + background: transparent; + border: none; + border-radius: 2px; + color: var(--theme-body-color); + transition: background-color 0.05s ease-in-out; + align-items: center; + text-shadow: none; + padding: 2px; + margin: 1px; + + /* Button text should not wrap on multiple lines */ + white-space: nowrap; +} + +.devtools-togglebutton { + padding: 1px 6px; + /* Separate the outline from the button as it might have a similar background color (after Bug 1590432) */ + outline-offset: 2px; +} + +/* Remove system form border from devtools-button. */ +.devtools-button::-moz-focus-inner { + border: 0; +} + +/* 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; + color: var(--theme-icon-color); + font-size: 11px; + -moz-context-properties: fill; + fill: currentColor; + background-position: center; + background-repeat: no-repeat; +} + +/* Reveal the icon */ +.devtools-button:empty::before { + content: ""; +} + +.devtools-button:is(.checked, [aria-pressed="true"])::before { + color: var(--theme-icon-checked-color); +} + +/* Icon-only buttons */ +.devtools-button:hover::before, +.devtools-button:is(.checked, [aria-pressed="true"])::before { + opacity: 1; +} + +/* Button states */ +.devtools-button:disabled { + pointer-events: none; + opacity: 0.5 !important; +} + +.devtools-button:empty: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, .checked, [aria-pressed="true"]):hover, +.devtools-button:empty:is(:hover:active,.checked, [aria-pressed="true"]), +.devtools-button[aria-haspopup="menu"][aria-expanded="true"] { + background-color: var(--toolbarbutton-hover-background); +} + +.devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover:active { + background-color: var(--theme-selection-background-hover); +} + +.devtools-button:not(:empty, .checked, [aria-pressed="true"]):focus { + background-color: var(--toolbarbutton-focus-background); + color: var(--toolbarbutton-focus-color); +} + +.devtools-togglebutton:not([aria-pressed="true"]) { + background: var(--theme-toolbarbutton-background); + color: var(--theme-toolbarbutton-color); +} + +.devtools-togglebutton:hover:not([aria-pressed="true"], :active) { + background-color: var(--theme-toolbarbutton-hover-background); +} + +/* Selectable button which is checked. */ + +.devtools-button:not(:empty):is(.checked, [aria-pressed="true"]) { + background: var(--toolbarbutton-checked-background); + color: var(--toolbarbutton-checked-color); + + &:focus { + background-color: var(--toolbarbutton-checked-focus-background); + } +} + +.devtools-togglebutton[aria-pressed="true"] { + background-color: var(--theme-toolbarbutton-checked-background); + color: var(--theme-toolbarbutton-checked-color); +} + +.devtools-togglebutton[aria-pressed="true"]:hover:not(:active) { + background: var(--theme-toolbarbutton-checked-hover-background); + color: var(--theme-toolbarbutton-checked-hover-color); +} + +.devtools-togglebutton:active { + background: var(--theme-toolbarbutton-active-background); + color: var(--theme-toolbarbutton-active-color); +} + +.devtools-togglebutton::-moz-focus-inner { + border-color: transparent; +} + +/* Icons */ + +.devtools-button.devtools-clear-icon::before { + background-image: url("chrome://devtools/skin/images/clear.svg"); +} + +.devtools-option-toolbarbutton { + list-style-image: url("chrome://devtools/skin/images/settings.svg"); +} + +.devtools-button.devtools-feature-callout::after { + content: url("chrome://global/skin/icons/badge-blue.svg"); + width: 14px; + height: 14px; + display: block; + position: absolute; + top: -2px; + right: 0; +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput, +.devtools-filterinput { + appearance: none; + margin: 0; + padding: 0 4px; + font: inherit; + border: 1px solid transparent; + background-color: var(--theme-body-background); + color: var(--theme-body-color); + flex-grow: 1; + + &::placeholder { + /* override UA style */ + opacity: 1; + /* Set a dimmed color that still gives us enough contrast */ + color: var(--theme-text-color-alt); + } +} + +.devtools-searchinput, +.devtools-filterinput { + padding-inline-start: 22px; + background-position: 7px center; + background-size: 12px; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); +} + +.devtools-searchinput { + background-image: url(chrome://devtools/skin/images/search.svg); +} + +.devtools-filterinput { + background-image: url(chrome://devtools/skin/images/filter-small.svg); +} + +.devtools-searchinput:-moz-locale-dir(rtl), +.devtools-searchinput:dir(rtl), +.devtools-filterinput:-moz-locale-dir(rtl), +.devtools-filterinput:dir(rtl) { + background-position-x: right 7px; +} + +.devtools-searchinput .textbox-input::placeholder, +.devtools-filterinput .textbox-input::placeholder { + font-style: normal; +} + +/* Searchbox with extra button(s) (MDN help or clear button) */ +.devtools-searchbox { + display: inline-flex; + flex-grow: 1; + position: relative; + border: 1px solid transparent; + height: 100%; + box-sizing: border-box; +} + +.devtools-searchbox > .devtools-searchinput, +.devtools-searchbox > .devtools-filterinput { + /* Those classes can be applied on , which have a default styling. + We want .devtools-searchbox to handle the background, border and outline, so we + need to reset them here */ + background-color: transparent; + border: none; + outline: none; + box-shadow: none; + flex-grow: 1; + min-width: 0; + width: 100%; +} + +/* Display an outline on the container when the child input is focused. If another element + is focused (e.g. a button), we only want the outline on that element */ +.devtools-searchbox:focus-within:has(input:focus-visible) { + outline: var(--theme-focus-outline); + outline-offset: -2px; + + &.devtools-searchbox-no-match { + outline-color: var(--searchbox-no-match-stroke-color); + } +} + +.devtools-searchbox-no-match { + background-color: var(--searchbox-no-match-background-color); + border-color: var(--searchbox-no-match-stroke-color); +} + +/* Clear icon within the searchbox */ +.devtools-searchinput-clear { + flex: 0 0 auto; + align-self: center; + margin: 0 4px; + padding: 0; + border: 0; + width: 16px; + height: 16px; + background-color: transparent; + background-image: url("chrome://devtools/skin/images/search-clear.svg"); + -moz-context-properties: fill, fill-opacity; + fill: var(--theme-icon-color); + fill-opacity: 0.8; +} + +.devtools-searchbox-no-match > .devtools-searchinput-clear { + fill: var(--searchbox-no-match-stroke-color); +} + +.devtools-searchinput-clear:hover { + fill-opacity: 1; +} + +/* MDN link within the searchbox */ +.devtools-searchbox .learn-more-link::before { + opacity: 0.6; +} + +.devtools-searchbox:not(:hover) .learn-more-link { + visibility: hidden; +} + +.devtools-searchbox .devtools-searchinput-summary { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + color: var(--theme-comment); + align-self: center; +} + +/* Autocomplete popup within the searchbox */ +.devtools-searchbox .devtools-autocomplete-popup { + position: absolute; + left: 0; + top: 100%; + width: 100%; + line-height: initial !important; + /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index + is more than z-index of requests-list-headers-wrapper in netmonitor */ + z-index: 1001; +} + +/* Twisty and checkbox controls */ + +.theme-twisty { + width: 14px; + height: 14px; + cursor: pointer; + background-image: url("chrome://devtools/skin/images/arrow.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 10px; + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); + transform: rotate(-90deg); +} + +/* Mirror the twisty for rtl direction */ +.theme-twisty:dir(rtl), +.theme-twisty:-moz-locale-dir(rtl) { + transform: rotate(90deg); +} + +.theme-selected ~ .theme-twisty { + fill: var(--theme-selection-color); +} + +.theme-twisty:is( + .open, + [open], + [aria-expanded="true"] +) { + transform: none; +} + +.theme-twisty[invisible] { + visibility: hidden; +} + +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + margin-inline-end: 0.5em; + width: 1em; + height: 1em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: 1.1s linear throbber-spin infinite; +} + +@keyframes throbber-spin { + from { + transform: none; + } + to { + transform: rotate(360deg); + } +} + +/* Common tabs styles */ + +.all-tabs-menu { + position: absolute; + + top: 0; + inset-inline-end: 0; + width: 15px; + height: 100%; + + padding: 0; + border: none; + border-inline-start: 1px solid var(--theme-splitter-color); + + background: var(--theme-tab-toolbar-background); + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: var(--theme-icon-color); + /* The button is often displayed next to the window edge, so adjust the layout to make the offset visible */ + outline-offset: -2px; +} + +.all-tabs-menu:hover { + background-color: var(--theme-toolbar-hover); +} + +.all-tabs-menu:hover:active { + background-color: var(--theme-toolbar-hover-active); +} + +.devtools-tab-line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 2px; + background: transparent; + transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve); + opacity: 0; + transform: scaleX(0); +} + +.devtools-tab:hover .devtools-tab-line, +.tabs-menu-item:hover .devtools-tab-line { + background: var(--tab-line-hover-color); + opacity: 1; + transform: scaleX(1); +} + +.devtools-tab.selected .devtools-tab-line, +.tabs-menu-item.is-active .devtools-tab-line { + background: var(--tab-line-selected-color); + opacity: 1; + transform: scaleX(1); +} + +@media (prefers-reduced-motion) { + .devtools-tab-line { + transition: none; + } +} + +.devtools-tab:not(.selected):focus .devtools-tab-line { + background: var(--tab-line-hover-color); + opacity: 1; + transform: scaleX(1); +} + +/* No result message styles */ + +.devtools-sidepanel-no-result { + font-style: italic; + padding: 0.5em 20px; + user-select: none; + font-size: 12px; + line-height: calc(16 / 12); +} + +/* Checkbox Toggle */ + +.devtools-checkbox-toggle { + --x-pos: .15em; + /* Reset native checkbox styling. */ + appearance: none; + background-color: var(--toggle-track-color); + cursor: pointer; + /* Change font-size to scale. */ + font-size: 16px; + width: 2em; + height: 1em; + border-radius: 1em; + border: 1px solid transparent; + box-sizing: content-box; + /* Animate the thumb position between states of the checkbox. */ + transition: background-color .1s ease-out; +} + +.devtools-checkbox-toggle[disabled]{ + opacity: 0.5; +} + +/* For right-to-left layout, the toggle thumb goes in the opposite direction. */ +html[dir="rtl"] .devtools-checkbox-toggle { + --x-pos: -.15em; +} + +.devtools-checkbox-toggle:checked { + --x-pos: 1.15em; + background-color: var(--blue-55); +} + +html[dir="rtl"] .devtools-checkbox-toggle:checked { + --x-pos: -1.15em; +} + +.devtools-checkbox-toggle::before { + position: relative; + width: calc(1em - .3em); + height: calc(1em - .3em); + transform: translateY(.15em) translateX(var(--x-pos)); + border-radius: 100%; + display: block; + content: ""; + background-color: var(--toggle-thumb-color); + transition: transform .1s ease-out; +} + +.devtools-checkbox-toggle:checked::before { + background-color: white; +} diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css new file mode 100644 index 0000000000..0fd3c7f00d --- /dev/null +++ b/devtools/client/themes/compatibility.css @@ -0,0 +1,328 @@ +/* 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/. */ + +:root { + --compatibility-base-unit: 4px; + --compatibility-cause-color: var(--theme-text-color-alt); + --compatibility-issue-icon-size: calc(var(--compatibility-base-unit) * 3); + --compatibility-issue-item-height: calc(var(--compatibility-base-unit) * 4); + --compatibility-issue-mdn-icon-fill-color: var(--grey-60); + --compatibility-browser-icon-size: calc(var(--compatibility-base-unit) * 4); + --compatibility-browser-icon-fill-color: var(--theme-icon-dimmed-color); + --compatibility-browser-version-background-color: var(--theme-icon-error-color); + --compatibility-browser-version-color: white; +} + +:root.theme-dark { + --compatibility-issue-mdn-icon-fill-color: var(--grey-40); + --compatibility-browser-version-color: black; +} + +/* + * In dark mode, the tooltip background is slightly lighter than the compatibility panel + * background, so we need to adjust colors to have good contrast. + */ +:root.theme-dark .devtools-tooltip-css-compatibility { + --compatibility-browser-icon-fill-color: var(--theme-icon-color); + --compatibility-browser-version-background-color: var(--red-40-a90); +} + +.compatibility-app { + height: 100%; +} + +.compatibility-app__throbber { + display: flex; + align-items: center; + justify-content: center; + height: calc(var(--compatibility-base-unit) * 8); +} + +.compatibility-app__container { + display: grid; + grid-template-rows: 1fr calc(var(--compatibility-base-unit) * 7); + height: 100%; +} + +.compatibility-app__container-hidden { + display: none; +} + +.compatibility-app__main { + overflow: auto; +} + +.compatibility-issue-list { + list-style: none; + margin: 0; + padding: 0; +} + +/* + * Layout of the issue item + * +--------+-------------------+ + * | [icon] | issue description | + * +--------+-------------------+ + * | | aliases | + * +--------+-------------------+ + * | | occurrences | + * +--------+-------------------+ + */ +.compatibility-issue-item { + display: grid; + column-gap: var(--compatibility-base-unit); + padding: calc(var(--compatibility-base-unit) * 2); + grid-template-areas: "icon description" + ". aliases" + ". node-pane"; + grid-template-columns: auto 1fr; +} + +.compatibility-issue-item:not(:last-child) { + border-block-end: 1px solid var(--theme-splitter-color); +} + +.compatibility-issue-item::before { + grid-area: icon; + content: ""; + display: block; + width: var(--compatibility-issue-item-height); + height: var(--compatibility-issue-item-height); + background-size: var(--compatibility-issue-icon-size); + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; + /* In order to fit to the position */ + position: relative; + top: -1px; +} + +.compatibility-issue-item--experimental::before, +.compatibility-issue-item--unsupported::before { + background-image: url(chrome://devtools/skin/images/info.svg); + fill: currentColor; +} + +.compatibility-issue-item--deprecated::before { + background-image: url(chrome://devtools/skin/images/alert-small.svg); + fill: var(--theme-icon-warning-color); +} + +/* + * Layout of the issue description + * +--------------+----------------+---------------------------+ + * | issue factor | (issue causes) | unsupported browser icons | + * +--------------+----------------+---------------------------+ + */ +.compatibility-issue-item__description { + grid-area: description; + display: flex; + column-gap: var(--compatibility-base-unit); + row-gap: var(--compatibility-base-unit); + flex-wrap: wrap; + justify-content: space-between; +} + +.compatibility-issue-item__causes { + flex: auto; + color: var(--compatibility-cause-color); +} + +.compatibility-issue-item__property { + color: var(--theme-link-color); + unicode-bidi: plaintext; + display: flex; + gap: var(--compatibility-base-unit); +} + +.compatibility-issue-item__mdn-link::after { + content: ""; + width: 12px; + height: 12px; + display: inline-block; + background-image: url("chrome://devtools/skin/images/mdn.svg"); + background-size: contain; + background-repeat: no-repeat; + border: 1px solid var(--compatibility-issue-mdn-icon-fill-color); + -moz-context-properties: fill; + fill: var(--compatibility-issue-mdn-icon-fill-color); +} + +.compatibility-issue-item__aliases { + grid-area: aliases; + list-style: none; + margin: 0; + padding-inline-start: calc(var(--compatibility-base-unit) * 2); + padding-block-end: var(--compatibility-base-unit); +} + +.compatibility-issue-item__alias { + unicode-bidi: plaintext; +} + +.compatibility-unsupported-browser-list { + list-style: none; + padding: 0; + flex: 1 0 auto; + display: flex; + column-gap: 6px; + justify-content: end; +} + +.compatibility-browser { + display: flex; + flex-direction: column; + align-items: center; + padding-inline: 1px; +} + +.compatibility-browser-icon { + display: inline-block; + width: var(--compatibility-browser-icon-size); + height: var(--compatibility-browser-icon-size); + position: relative; +} + +.compatibility-browser-icon--mobile::after { + content: ""; + width: calc(var(--compatibility-base-unit) * 2); + height: calc(var(--compatibility-base-unit) * 3); + background-color: var(--theme-body-background); + background-size: calc(var(--compatibility-base-unit) * 2 - 2px); + background-position: center; + background-repeat: no-repeat; + background-image: url(chrome://devtools/skin/images/browsers/mobile.svg); + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); + position: absolute; + right: calc(var(--compatibility-base-unit) * -1); + bottom: calc(var(--compatibility-base-unit) * -1); +} + +.compatibility-browser-icon__image { + width: 100%; + height: 100%; + fill: var(--compatibility-browser-icon-fill-color); + -moz-context-properties: fill; +} + +.compatibility-browser .compatibility-browser-version { + font-size: 9px; + border-radius: 2px; + padding: 1px 2px; + line-height: 1; + background-color: var(--compatibility-browser-version-background-color); + color: var(--compatibility-browser-version-color); +} + +.compatibility-node-pane { + grid-area: node-pane; +} + +.compatibility-node-pane__summary { + color: var(--theme-comment); + cursor: pointer; + font-variant-numeric: tabular-nums; + padding-block-end: var(--compatibility-base-unit); +} + +.compatibility-node-list { + list-style: none; + margin: 0; + padding-inline-start: calc(var(--compatibility-base-unit) * 2); +} + +.compatibility-node-item:not(:last-child) { + padding-block-end: var(--compatibility-base-unit); +} + +.compatibility-footer { + border-top: 1px solid var(--theme-splitter-color); + display: flex; + justify-content: space-evenly; +} + +.compatibility-footer__button { + background: none; + border: none; + display: flex; + align-items: center; + column-gap: var(--compatibility-base-unit); +} + +.compatibility-footer__icon { + -moz-context-properties: fill; + fill: var(--theme-icon-color); + width: calc(var(--compatibility-base-unit) * 4); + height: calc(var(--compatibility-base-unit) * 4); +} + +.compatibility-footer__label { + color: var(--theme-toolbar-color); + font-size: calc(var(--compatibility-base-unit) * 3); +} + +.compatibility-settings { + width: 100%; + height: 100%; + background-color: var(--theme-body-background); + overflow: auto; +} + +.compatibility-settings__header { + display: grid; + grid-template-columns: 1fr auto; + padding-block: calc(var(--compatibility-base-unit) * 3); + padding-inline: calc(var(--compatibility-base-unit) * 4); +} + +.compatibility-settings__header-label { + color: var(--theme-toolbar-color); + font-size: calc(var(--compatibility-base-unit) * 3); + font-weight: bold; +} + +.compatibility-settings__header-button { + background: none; + border: none; +} + +.compatibility-settings__header-icon { + -moz-context-properties: fill; + fill: var(--theme-icon-color); + width: calc(var(--compatibility-base-unit) * 4); + height: calc(var(--compatibility-base-unit) * 4); +} + +.compatibility-settings__target-browsers-header { + font-size: calc(var(--compatibility-base-unit) * 3); + line-height: calc(var(--compatibility-base-unit) * 4); + padding-block: var(--compatibility-base-unit); + padding-inline: calc(var(--compatibility-base-unit) * 4); + background-color: var(--theme-toolbar-background); + border-block: 1px solid var(--theme-splitter-color); +} + +.compatibility-settings__target-browsers-list { + display: grid; + list-style: none; + margin: 0; + padding-block: calc(var(--compatibility-base-unit) * 3); + padding-inline: calc(var(--compatibility-base-unit) * 4); + row-gap: calc(var(--compatibility-base-unit) * 2); +} + +.compatibility-settings__target-browsers-item { + display: grid; + grid-template-columns: auto auto 1fr; + align-items: center; + padding-inline-start: calc(var(--compatibility-base-unit) * 2); + column-gap: calc(var(--compatibility-base-unit) * 2); +} + +.compatibility-settings__target-browsers-item-label { + display: grid; + grid-template-columns: subgrid; + grid-column: 2/-1; +} diff --git a/devtools/client/themes/components-frame.css b/devtools/client/themes/components-frame.css new file mode 100644 index 0000000000..f647f68a7f --- /dev/null +++ b/devtools/client/themes/components-frame.css @@ -0,0 +1,68 @@ +/* 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/. */ + +/** + * Frame Component + * Styles for React component at `devtools/client/shared/components/Frame.js` + */ + +.theme-light { + --frame-link-line-color: var(--theme-link-color); + --frame-link-source: var(--theme-highlight-purple); +} + +.theme-dark { + --frame-link-line-color: hsl(210, 40%, 60%); + --frame-link-source: var(--blue-40); +} + +.stack-trace { + display: grid; + grid-template-columns: auto auto; + justify-content: start; +} + +.stack-trace .frame-link-async-cause { + grid-column: 1 / -1; +} + +.stack-trace .frame-link { + display: contents; +} + +.frame-link-async-cause { + color: var(--theme-comment); +} + +.frame-link .frame-link-source { + color: var(--frame-link-source); +} + +.frame-link a.frame-link-source { + cursor: pointer; + text-decoration: underline; + text-decoration-skip-ink: none; + font-style: normal; +} + +.frame-link .frame-link-host { + margin-inline-start: 5px; + font-size: 90%; + color: var(--theme-comment); +} + +.frame-link .frame-link-function-display-name { + margin-inline-end: 5px; + color: var(--console-output-color, currentColor); +} + +.frame-link .frame-link-line { + color: var(--frame-link-line-color); +} + +.focused .frame-link .frame-link-source, +.focused .frame-link .frame-link-line, +.focused .frame-link .frame-link-host { + color: var(--theme-selection-color); +} diff --git a/devtools/client/themes/components-h-split-box.css b/devtools/client/themes/components-h-split-box.css new file mode 100644 index 0000000000..7d0befc269 --- /dev/null +++ b/devtools/client/themes/components-h-split-box.css @@ -0,0 +1,23 @@ +/* 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/. */ + +/** + * HSplitBox Component + * Styles for React component at `devtools/client/shared/components/HSplitBox.js` + */ + +.h-split-box, +.h-split-box-pane { + overflow: auto; + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + +.h-split-box { + display: flex; + flex-direction: row; + flex: 1; +} diff --git a/devtools/client/themes/computed.css b/devtools/client/themes/computed.css new file mode 100644 index 0000000000..6b6257059e --- /dev/null +++ b/devtools/client/themes/computed.css @@ -0,0 +1,263 @@ +/* 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/. */ + + .theme-dark { + --row-striped-background: rgba(255, 255, 255, 0.05); + } + +.theme-light { + --row-striped-background: rgba(247, 247, 247, 0.8); +} + +#sidebar-panel-computedview { + margin: 0; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + +/* Reset the global rotation of the icon done for RTL layout. + Computed view is always LTR */ +#sidebar-panel-computedview .theme-twisty:not(.open):dir(rtl), +#sidebar-panel-computedview .theme-twisty:not([open]):-moz-locale-dir(rtl) { + transform: rotate(-90deg); +} + +#computedview-panel .inspector-tabpanel { + min-width: 0; +} + +#computedview-panel #browser-style-checkbox-label { + overflow: hidden; + text-overflow: ellipsis; +} + +#computed-container { + overflow: auto; + height: 100%; +} + +/* This extra wrapper only serves as a way to get the content of the view focusable. + So that when the user reaches it either via keyboard or mouse, we know that the view + is focused and therefore can handle shortcuts. + However, for accessibility reasons, tabindex is set to -1 to avoid having to tab + through it, and the outline is hidden. */ +#computed-container-focusable { + height: 100%; + outline: none; +} + +#computed-toolbar { + display: flex; + align-items: center; + user-select: none; +} + +#browser-style-checkbox { + /* Bug 1200073 - extra space before the browser styles checkbox so + they aren't squished together in a small window. Put also + an extra space after. */ + margin-inline-start: 5px; + margin-inline-end: 0; +} + +#browser-style-checkbox-label { + white-space: nowrap; + padding-inline-start: 5px; + margin-inline-end: 5px; +} + +#computed-property-container { + user-select: text; + overflow-y: auto; + overflow-x: hidden; + list-style: none; + margin: 0; + padding: 0; + /* Ajust outline to make it visible, otherwise it could be clipped, as the container takes the whole window size */ + outline-offset: -2px; +} + +#computed-property-container > :nth-child(2n of .computed-property-view) { + background: var(--row-striped-background); +} + +.computed-property-hidden { + display: none; +} + +.computed-property-view { + padding: 2px 0px; + padding-inline-start: 5px; + display: flex; + flex-wrap: wrap; + /* Ajust outline to make it visible as the list items take the the whole window width */ + outline-offset: -2px; +} + +.computed-property-name-container { + width: 230px; +} + +.computed-property-value-container { + display: flex; + flex: 1 1 168px; + overflow: hidden; +} + +.computed-property-name-container > *, +.computed-property-value-container > * { + display: inline-block; + vertical-align: middle; +} + +.computed-property-name { + outline: 0 !important; +} + +.computed-other-property-value::before { + content: ""; + display: inline-block; + vertical-align: -0.5px; + width: 8px; + height: 8px; + margin: 0 1px; + background-image: url(images/arrow-e.svg); + background-repeat: no-repeat; + background-size: contain; + -moz-context-properties: fill; + fill: var(--theme-text-color-inactive); +} + +.computed-other-property-value:dir(rtl)::before { + transform: scaleX(-1); +} + +.computed-property-value { + padding-inline-start: 14px; + outline: 0 !important; +} + +.matchedselectors { + width: 100%; + padding-inline-start: 12px; + + /* + * Matched selectors element is always created, but is empty until the arrow is expanded. + * We only want the margin to appear when the matched selectors are visible. + */ + &:not(:empty) { + margin-block-start: 4px; + } +} + +/* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements. + We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737). + Therefore we use

elements around matched selectors and need this class + to keep them inline. We do that to avoid doing any formatting logic in JS. + Once Bug 1360238 will be fixed, we'll probably have to change the behavior + and remove this class. */ +.fix-get-selection { + display: inline; +} + +.visually-hidden { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + +/* From skin */ +.computed-expander { + visibility: hidden; +} + +.computed-expandable { + visibility: visible; +} + +.match { + visibility: hidden; +} + +.matchedselectors > p { + clear: both; + margin: 0; + margin-inline-end: 2px; + padding: 2px; + overflow-x: hidden; + border-style: dotted; + border-color: var(--theme-splitter-color); + border-width: 1px 1px 0 1px; +} + +.matchedselectors > p:last-of-type { + border-bottom-width: 1px; +} + +.rule-text.matched { + text-decoration: line-through; +} + +.rule-text.parentmatch { + opacity: 0.5; +} + +#computed-no-results { + height: 100%; +} + +.onlyuserstyles { + cursor: pointer; +} + +.legendKey { + margin: 0 5px; +} + +.computed-link { + padding: 0 3px; + cursor: pointer; + float: inline-end; +} + +/* Take away these two :visited rules to get a core dumper */ +/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ + +.computed-link { + text-decoration: underline; + text-decoration-skip-ink: none; +} + +.computed-colorswatch { + border-radius: 50%; + width: 0.9em; + height: 0.9em; + vertical-align: middle; + margin-inline-end: 5px; + display: inline-block; + position: relative; +} + +.computed-colorswatch::before { + content: ''; + background-color: #eee; + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); + background-size: 12px 12px; + background-position: 0 0, 6px 6px; + position: absolute; + border-radius: 50%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; +} diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css new file mode 100644 index 0000000000..4dffefd9cf --- /dev/null +++ b/devtools/client/themes/dark-theme.css @@ -0,0 +1,296 @@ +/* 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/. */ + +@import url(chrome://devtools/skin/variables.css); +@import url(chrome://devtools/skin/common.css); +@import url(chrome://devtools/skin/toolbars.css); +@import url(chrome://devtools/skin/tooltips.css); + +body { + margin: 0; +} + +.theme-body { + background: var(--theme-body-background); + color: var(--theme-body-color); +} + +.theme-sidebar { + background: var(--theme-sidebar-background); + color: var(--theme-body-color); +} + +.theme-selected, +.CodeMirror-hint-active { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.variable-or-property:not([overridden])[changed] { + background: var(--theme-contrast-background); +} + +.theme-link, +.cm-s-mozilla .cm-link, +.cm-editor .tok-link, +.CodeMirror-Tern-type { + color: var(--grey-50); +} + +/* + * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion + * failures in debug builds. + */ + :is( + .theme-link, + .cm-s-mozilla .cm-link, + .cm-editor .tok-link +):visited { + color: var(--theme-link-color); +} + +.theme-comment, +.cm-s-mozilla .cm-meta, +.cm-s-mozilla .cm-hr, +.cm-s-mozilla .cm-comment, +.cm-editor :is( + .tok-meta, + .tok-comment +), +.variable-or-property .token-undefined, +.variable-or-property .token-null, +.CodeMirror-Tern-completion-unknown:before { + color: var(--theme-comment); +} + +.cm-s-mozilla .cm-unused-line { + text-decoration: line-through; + text-decoration-color: #0072ab; +} + +.cm-s-mozilla .cm-executed-line { + background-color: #133c26; +} + +.cm-s-mozilla .cm-number, +.cm-editor .tok-number, +.variable-or-property .token-number, +.variable-or-property[return] > .title > .name, +.variable-or-property[scope] > .title > .name { + color: #709AFF; +} + +.CodeMirror-Tern-completion-number:before { + background-color: #5c9966; +} + +.theme-fg-color1, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-builtin, +.cm-s-mozilla .cm-keyword, +.cm-editor .tok-keyword, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-red); +} + +.cm-s-mozilla .cm-def, +.cm-s-mozilla .cm-variable-2, +.cm-editor :is( + .tok-variableName.tok-definition, + .tok-variableName +) { + color: var(--theme-highlight-blue); +} + +.cm-s-mozilla .cm-variable, +.cm-editor .tok-variableName2 { + color: var(--theme-highlight-purple); +} + +.cm-s-mozilla .cm-property, +.cm-editor .tok-propertyName { + color: var(--theme-highlight-green); +} + +.CodeMirror-Tern-completion-object:before { + background-color: #3689b2; +} + +.theme-fg-color3, +.cm-s-mozilla .cm-tag, +.cm-s-mozilla .cm-header, +.cm-s-mozilla .cm-bracket, +.cm-s-mozilla .cm-qualifier, +.cm-editor .tok-heading, +.variables-view-property > .title > .name { + color: var(--theme-highlight-blue); +} + +.CodeMirror-Tern-completion-array:before { + background-color: var(--theme-highlight-bluegrey); +} + +.theme-fg-color2 { + color: var(--theme-highlight-purple); +} + +.cm-s-mozilla .cm-string, +.cm-s-mozilla .cm-string-2, +.cm-editor .tok-string, +.variable-or-property .token-string, +.CodeMirror-Tern-farg { + color: #709AFF; +} + +.CodeMirror-Tern-completion-string:before, +.CodeMirror-Tern-completion-fn:before { + background-color: #b26b47; +} + +.cm-s-mozilla .cm-atom, +.cm-s-mozilla .cm-quote, +.cm-s-mozilla .cm-error, +.cm-editor :is( + .tok-atom, + .tok-bool, + .tok-invalid +), +.variable-or-property .token-boolean, +.variable-or-property .token-domnode, +.variable-or-property[exception] > .title > .name { + color: var(--theme-highlight-red); +} + +.CodeMirror-Tern-completion-bool:before { + background-color: #bf5656; +} + +.variable-or-property .token-domnode { + font-weight: bold; +} + +.theme-toolbar, +.devtools-toolbar, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, +.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */ + color: var(--theme-body-color); + background-color: var(--theme-toolbar-background); + border-color: var(--theme-splitter-color); +} + +.theme-bg-contrast { + background: var(--theme-contrast-background); +} + +.theme-fg-contrast { + color: var(--theme-contrast-color); +} + +.ruleview-swatch, +.computed-colorswatch { + box-shadow: 0 0 0 1px #818181; +} + +/* CodeMirror specific styles. + * Best effort to match the existing theme, some of the colors + * are duplicated here to prevent weirdness in the main theme. */ + +.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */ + font-family: inherit; + font-size: inherit; + background: transparent; +} + +.CodeMirror.cm-s-mozilla pre, +.CodeMirror.cm-s-mozilla pre.CodeMirror-line, +.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like { + color: var(--theme-text-color-strong); +} + +.cm-s-mozilla .cm-operator, +.cm-editor :is( + .tok-punctuation, + .tok-operator +) { + color: var(--theme-body-color); +} + +.cm-s-mozilla .cm-variable-3, +.cm-s-mozilla .cm-special { + color: var(--theme-text-color-strong); +} + +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { + border-left: solid 1px #fff; +} +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor.CodeMirror-secondarycursor { + border-left-color: #aaa; +} + +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ + background: var(--theme-selection-background-hover); +} + +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ + background: var(--theme-selection-background-hover); +} + +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(185, 215, 253, .15); +} + +div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ + outline: solid 1px rgba(255, 255, 255, .25); + color: white; +} + +/* Highlight for a line that contains an error. */ +div.CodeMirror div.error-line { + background: rgba(255,0,0,0.2); +} + +/* Generic highlighted text */ +div.CodeMirror span.marked-text { + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); + margin-inline-start: -1px; + margin-inline-end: -1px; +} + + +.cm-s-mozilla .empty-line .CodeMirror-linenumber { + color: var(--grey-50); +} + +/* Blackboxing lines */ +.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) { + color: #806414cc; +} + +/* Highlight for evaluating current statement. */ +div.CodeMirror span.eval-text { + background-color: #556; +} + +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ + color: var(--grey-40); +} + +.cm-s-mozilla .CodeMirror-gutters, +.cm-editor .cm-gutters { /* vertical line next to line numbers */ + border-right-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); +} + +.CodeMirror-Tern-fname { + color: #f7f7f7; +} + +.CodeMirror-hints, +.CodeMirror-Tern-tooltip { + box-shadow: 0 0 4px rgba(255, 255, 255, .3); + background-color: #0f171f; + color: var(--theme-body-color); +} diff --git a/devtools/client/themes/devtools-browser.css b/devtools/client/themes/devtools-browser.css new file mode 100644 index 0000000000..bc208e3bc8 --- /dev/null +++ b/devtools/client/themes/devtools-browser.css @@ -0,0 +1,14 @@ +/* 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/. */ + +@import url("chrome://devtools/skin/splitters.css"); +/* Imports the styles that will apply to the browser window for Responsive Design Mode. + This is dynamically loaded when either the toolbox or RDM is open. */ +@import url("chrome://devtools/content/responsive/responsive-browser.css"); + +/* Set min-height to 29px as it matches the height of the .devtools-tabbar (/devtools/client/themes/toolbox.css#67) + * This prevents the shrinking of the toolbox until it disappears. */ +.devtools-toolbox-bottom-iframe { + min-height: 29px; +} diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css new file mode 100644 index 0000000000..5be2513052 --- /dev/null +++ b/devtools/client/themes/fonts.css @@ -0,0 +1,477 @@ +/* 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/. */ + +/* CSS Variables specific to the font editor that aren't defined by the themes */ +:root { + --highlight-color: var(--blue-55); + --input-background-color: white; + --input-border-color: var(--grey-30); + --preview-input-background: var(--theme-toolbar-background); + --slider-thumb-color: var(--grey-50); + --slider-track-color: var(--grey-30); +} + +:root.theme-dark { + --input-background-color: var(--grey-70); + --input-border-color: var(--grey-70); + --preview-input-background: #222225; + --slider-thumb-color: var(--grey-40); + --slider-track-color: var(--grey-60); +} + +#sidebar-panel-fontinspector { + margin: 0; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: auto; +} + +#font-container, #font-editor { + min-width: var(--min-container-width); +} + +#font-container { + flex: auto; +} + +#font-editor { + padding-bottom: .5em; +} + +#font-editor summary { + user-select: none; + cursor: pointer; + margin-bottom: .4em; + width: -moz-fit-content; +} + +#font-editor details { + padding-bottom: .5em; +} + +#font-editor details .label-open, +#font-editor details .label-close { + display: none; +} + +#font-editor details[open] .label-close, +#font-editor details:not([open]) .label-open { + display: inline-block; +} + +#font-editor .devtools-sidepanel-no-result { + padding-bottom: 0; +} + +.fonts-list { + padding: 0; + margin: 0; + list-style: none; +} + +.font { + border: 1px solid var(--theme-splitter-color); + border-width: 0 0 1px 0; + display: grid; + grid-template-columns: 1fr auto; + grid-column-gap: 10px; + padding: 10px 20px; + overflow: auto; +} + +#font-container .theme-twisty { + display: inline-block; + cursor: pointer; + vertical-align: bottom; +} + +#font-preview-input-container { + background: var(--preview-input-background); + border-bottom: 1px solid var(--theme-splitter-color); + display: flex; + height: 25px; +} + +#font-preview-input-container input { + background-image: none; + flex: 1; + padding-inline: 19px; +} + +.font-preview { + grid-column: 2; + grid-row: 1 / span 2; + object-fit: contain; + height: 50px; + width: 100%; +} + +.font-name, +.font-family-name { + font-weight: normal; + white-space: nowrap; +} + +.font-name { + display: inline-block; + margin-bottom: 0.6em; + font-size: 1em; + color: var(--theme-text-color-alt); +} + +.font-family-name { + margin-bottom: 0.2em; + font-size: 1.2em; +} + +.font-group { + margin-bottom: .5em; +} + +.font-group .font-name { + white-space: unset; +} + +.font-group .font-name::after { + content: ","; +} + +.font-group .font-name:nth-last-child(1)::after { + content: ""; +} + +/* Make font-name hoverable as doing so highlights text runs in the page. + The hit target is 3px around the font name, which is why we offset them with a -3px + horizontal margin so they appear at the same place as they normall would. */ + +.font-name { + padding: 3px; + margin-inline-start: -3px; + border-radius: 3px; +} + +.font-name:hover { + background-color: var(--theme-selection-background-hover); +} + +.font-css-code { + /* Force text direction in LTR and RTL */ + direction: ltr; + text-align: left; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + color: var(--theme-text-color-strong); + grid-column: span 2; +} + +.font-css-code .theme-twisty { + margin-inline-start: -3px; +} + +/* Force arrow direction in LTR and RTL */ +.font-css-code .theme-twisty:not([open]) { + transform: rotate(-90deg) !important; +} + +.font-css-code-expander::before { + content: "\2026"; + display: inline-block; + width: 12px; + height: 8px; + margin: 0 2px; + line-height: 3px; + color: var(--theme-text-color-inactive); + border-radius: 3px; + border-style: solid; + border-width: 1px; + text-align: center; + vertical-align: middle; +} + +.font-control { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + padding: 0 20px; + margin: .6em 0; +} + +/* Style *all* axis controls with a top separator. See reset below. */ +.font-control-axis { + border-top: 1px solid var(--theme-splitter-color); + padding-top: 1.1em; +} + +/* Remove styles form all axis controls aside from the first one. + Workaround for :first-of-type which doesn't work with class names. */ +.font-control-axis ~ .font-control-axis { + border-top: unset; + padding-top: unset; +} + +.font-control-used-fonts { + align-items: flex-start; + border-bottom: 1px solid var(--theme-splitter-color); + margin-block: 0 1em; + padding-top: 1em; +} + +.font-control-box, +.font-control-input { + flex: 4; + min-width: 100px; +} + +.font-control-input { + display: flex; + flex-wrap: nowrap; + align-items: center; +} + +.font-control-input .devtools-checkbox-toggle { + margin: 2px 0; +} + +.font-control-label { + display: inline-block; + flex: 1; + font-size: 12px; + min-width: 70px; + margin-inline-end: 10px; + user-select: none; +} + +.font-control-label-text { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.font-control-label-detail { + color: var(--theme-text-color-alt); + font-size: smaller; +} + +.font-value-input { + text-align: right; + width: 60px; + padding: 2px 3px; + padding-inline-end: 5px; +} + +.font-value-input, +.font-value-select { + color: var(--theme-text-color-strong); + border: 1px solid var(--input-border-color); + background-color: var(--input-background-color); +} + +/* Styles for disabled input fields */ +.font-value-input[disabled], +.font-value-select[disabled], +.font-value-slider[disabled] { + opacity: 0.5; +} + +/* Do not use browser "invalid" state */ +.font-value-slider:-moz-ui-invalid, +.font-value-input:-moz-ui-invalid { + box-shadow: none; +} + +/* Do not show dotted line focus outline */ +.font-value-input:-moz-focusring { + outline: none; +} + +/* Make native number steppers disappear by treating it as text field*/ +.font-value-input[type=number] { + appearance: textfield; +} + +/* Swap around order of value input and unit dropdown for RTL */ +.font-value-input:dir(rtl) { + order: 3; +} + +.font-value-label { + /* Combined width of .font-value-input and .font-value-select */ + width: calc(60px + 3.8em); + padding-block: 2px 4px; +} + +/* Mock separator because inputs don't have distinguishable borders in dark theme */ +.theme-dark .font-value-input + .font-value-select:dir(ltr) { + margin-inline-start: 2px; +} +.theme-dark .font-value-input + .font-value-select:dir(rtl) { + margin-inline-end: 2px; +} + +/* Custom styles for