From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- devtools/client/themes/animationinspector.css | 623 ++++++++ devtools/client/themes/audio/moz.build | 9 + devtools/client/themes/audio/shutter.wav | Bin 0 -> 25744 bytes devtools/client/themes/boxmodel.css | 258 ++++ devtools/client/themes/canvasdebugger.css | 353 +++++ devtools/client/themes/commandline.css | 172 +++ devtools/client/themes/commandline.inc.css | 217 +++ devtools/client/themes/common.css | 791 ++++++++++ devtools/client/themes/components-frame.css | 53 + devtools/client/themes/components-h-split-box.css | 24 + devtools/client/themes/computed.css | 237 +++ devtools/client/themes/dark-theme.css | 348 +++++ devtools/client/themes/debugger.css | 670 ++++++++ devtools/client/themes/devtools-browser.css | 26 + devtools/client/themes/dom.css | 9 + devtools/client/themes/firebug-theme.css | 235 +++ .../themes/floating-scrollbars-dark-theme.css | 59 + .../floating-scrollbars-responsive-design.css | 47 + devtools/client/themes/fonts.css | 128 ++ devtools/client/themes/images/add.svg | 6 + .../client/themes/images/alerticon-warning.png | Bin 0 -> 613 bytes .../client/themes/images/alerticon-warning@2x.png | Bin 0 -> 432 bytes devtools/client/themes/images/angle-swatch.svg | 17 + .../client/themes/images/animation-fast-track.svg | 8 + devtools/client/themes/images/arrow-e.png | Bin 0 -> 168 bytes devtools/client/themes/images/arrow-e@2x.png | Bin 0 -> 417 bytes .../themes/images/breadcrumbs-scrollbutton.png | Bin 0 -> 260 bytes .../themes/images/breadcrumbs-scrollbutton@2x.png | Bin 0 -> 627 bytes devtools/client/themes/images/breakpoint.svg | 45 + devtools/client/themes/images/clear.svg | 7 + devtools/client/themes/images/close.svg | 6 + devtools/client/themes/images/command-console.svg | 7 + .../client/themes/images/command-eyedropper.svg | 7 + devtools/client/themes/images/command-frames.svg | 6 + devtools/client/themes/images/command-measure.svg | 7 + .../client/themes/images/command-noautohide.svg | 6 + .../client/themes/images/command-paintflashing.svg | 7 + devtools/client/themes/images/command-pick.svg | 9 + .../themes/images/command-responsivemode.svg | 9 + devtools/client/themes/images/command-rulers.svg | 7 + .../client/themes/images/command-screenshot.svg | 7 + devtools/client/themes/images/commandline-icon.svg | 42 + devtools/client/themes/images/controls.png | Bin 0 -> 1630 bytes devtools/client/themes/images/controls@2x.png | Bin 0 -> 2045 bytes .../client/themes/images/cubic-bezier-swatch.png | Bin 0 -> 1184 bytes .../themes/images/cubic-bezier-swatch@2x.png | Bin 0 -> 1661 bytes devtools/client/themes/images/debugger-step-in.svg | 6 + .../client/themes/images/debugger-step-out.svg | 6 + .../client/themes/images/debugger-step-over.png | Bin 0 -> 306 bytes .../client/themes/images/debugger-step-over.svg | 7 + .../client/themes/images/debugger-step-over@2x.png | Bin 0 -> 472 bytes .../themes/images/debugger-toggleBreakpoints.svg | 6 + devtools/client/themes/images/debugging-addons.svg | 6 + .../client/themes/images/debugging-devices.svg | 7 + devtools/client/themes/images/debugging-tabs.svg | 3 + .../client/themes/images/debugging-workers.svg | 11 + devtools/client/themes/images/diff.svg | 9 + devtools/client/themes/images/dock-bottom.svg | 6 + devtools/client/themes/images/dock-side.svg | 3 + devtools/client/themes/images/dock-undock.svg | 8 + devtools/client/themes/images/dropmarker.svg | 6 + devtools/client/themes/images/editor-error.png | Bin 0 -> 3794 bytes .../themes/images/emojis/emoji-command-pick.svg | 7 + .../themes/images/emojis/emoji-tool-canvas.svg | 11 + .../themes/images/emojis/emoji-tool-debugger.svg | 11 + .../client/themes/images/emojis/emoji-tool-dom.svg | 11 + .../themes/images/emojis/emoji-tool-inspector.svg | 13 + .../themes/images/emojis/emoji-tool-memory.svg | 9 + .../themes/images/emojis/emoji-tool-network.svg | 8 + .../themes/images/emojis/emoji-tool-profiler.svg | 11 + .../themes/images/emojis/emoji-tool-scratchpad.svg | 10 + .../images/emojis/emoji-tool-shadereditor.svg | 96 ++ .../themes/images/emojis/emoji-tool-storage.svg | 8 + .../images/emojis/emoji-tool-styleeditor.svg | 11 + .../themes/images/emojis/emoji-tool-webaudio.svg | 12 + .../themes/images/emojis/emoji-tool-webconsole.svg | 8 + devtools/client/themes/images/fast-forward.svg | 6 + .../client/themes/images/filetypes/dir-close.svg | 6 + .../client/themes/images/filetypes/dir-open.svg | 7 + devtools/client/themes/images/filetypes/globe.svg | 7 + devtools/client/themes/images/filter-swatch.svg | 12 + devtools/client/themes/images/filter.svg | 16 + devtools/client/themes/images/filters.svg | 31 + .../client/themes/images/firebug/arrow-down.svg | 6 + devtools/client/themes/images/firebug/arrow-up.svg | 6 + .../themes/images/firebug/breadcrumbs-divider.svg | 18 + .../client/themes/images/firebug/breakpoint.svg | 13 + devtools/client/themes/images/firebug/close.svg | 25 + .../themes/images/firebug/command-console.svg | 31 + .../themes/images/firebug/command-eyedropper.svg | 38 + .../themes/images/firebug/command-frames.svg | 25 + .../themes/images/firebug/command-measure.svg | 26 + .../themes/images/firebug/command-noautohide.svg | 47 + .../images/firebug/command-paintflashing.svg | 38 + .../client/themes/images/firebug/command-pick.svg | 20 + .../images/firebug/command-responsivemode.svg | 39 + .../themes/images/firebug/command-rulers.svg | 20 + .../themes/images/firebug/command-scratchpad.svg | 38 + .../themes/images/firebug/command-screenshot.svg | 39 + .../themes/images/firebug/commandline-icon.svg | 26 + .../themes/images/firebug/debugger-blackbox.svg | 30 + .../themes/images/firebug/debugger-prettyprint.svg | 18 + .../themes/images/firebug/debugger-step-in.svg | 26 + .../themes/images/firebug/debugger-step-out.svg | 26 + .../themes/images/firebug/debugger-step-over.svg | 24 + .../images/firebug/debugger-toggleBreakpoints.svg | 13 + devtools/client/themes/images/firebug/disable.svg | 6 + .../client/themes/images/firebug/dock-bottom.svg | 25 + .../client/themes/images/firebug/dock-side.svg | 25 + .../client/themes/images/firebug/dock-undock.svg | 27 + devtools/client/themes/images/firebug/moz.build | 11 + .../client/themes/images/firebug/pane-collapse.svg | 29 + .../client/themes/images/firebug/pane-expand.svg | 29 + devtools/client/themes/images/firebug/pause.svg | 31 + devtools/client/themes/images/firebug/play.svg | 18 + .../client/themes/images/firebug/read-only.svg | 34 + devtools/client/themes/images/firebug/rewind.svg | 18 + devtools/client/themes/images/firebug/spinner.png | Bin 0 -> 6125 bytes .../themes/images/firebug/tool-debugger-paused.svg | 14 + .../client/themes/images/firebug/tool-options.svg | 18 + .../images/firebug/twisty-closed-firebug.svg | 14 + .../themes/images/firebug/twisty-open-firebug.svg | 14 + devtools/client/themes/images/geometry-editor.svg | 7 + devtools/client/themes/images/globe.svg | 8 + devtools/client/themes/images/grid.svg | 6 + devtools/client/themes/images/import.svg | 8 + .../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 + devtools/client/themes/images/item-toggle.svg | 7 + devtools/client/themes/images/magnifying-glass.png | Bin 0 -> 192 bytes .../client/themes/images/magnifying-glass@2x.png | Bin 0 -> 449 bytes devtools/client/themes/images/noise.png | Bin 0 -> 2118 bytes devtools/client/themes/images/pane-collapse.svg | 7 + devtools/client/themes/images/pane-expand.svg | 7 + devtools/client/themes/images/pause.svg | 6 + .../client/themes/images/performance-icons.svg | 42 + devtools/client/themes/images/play.svg | 6 + devtools/client/themes/images/power.svg | 7 + .../client/themes/images/profiler-stopwatch.svg | 11 + devtools/client/themes/images/pseudo-class.svg | 7 + devtools/client/themes/images/reload.svg | 6 + .../responsive-horizontal-resizer.png | Bin 0 -> 102 bytes .../responsive-horizontal-resizer@2x.png | Bin 0 -> 129 bytes .../responsivemode/responsive-se-resizer.png | Bin 0 -> 129 bytes .../responsivemode/responsive-se-resizer@2x.png | Bin 0 -> 205 bytes .../responsivemode/responsive-vertical-resizer.png | Bin 0 -> 105 bytes .../responsive-vertical-resizer@2x.png | Bin 0 -> 141 bytes .../images/responsivemode/responsiveui-home.png | Bin 0 -> 276 bytes .../images/responsivemode/responsiveui-rotate.png | Bin 0 -> 245 bytes .../responsivemode/responsiveui-rotate@2x.png | Bin 0 -> 438 bytes .../responsivemode/responsiveui-screenshot.png | Bin 0 -> 303 bytes .../responsivemode/responsiveui-screenshot@2x.png | Bin 0 -> 531 bytes .../images/responsivemode/responsiveui-touch.png | Bin 0 -> 470 bytes .../responsivemode/responsiveui-touch@2x.png | Bin 0 -> 927 bytes devtools/client/themes/images/rewind.svg | 6 + .../client/themes/images/search-clear-dark.svg | 15 + .../client/themes/images/search-clear-failed.svg | 15 + .../client/themes/images/search-clear-light.svg | 15 + devtools/client/themes/images/search.svg | 6 + .../client/themes/images/security-state-broken.svg | 9 + .../themes/images/security-state-insecure.svg | 38 + .../client/themes/images/security-state-secure.svg | 27 + .../client/themes/images/security-state-weak.svg | 31 + devtools/client/themes/images/sort-arrows.svg | 12 + devtools/client/themes/images/toggle-tools.png | Bin 0 -> 883 bytes devtools/client/themes/images/toggle-tools@2x.png | Bin 0 -> 1834 bytes devtools/client/themes/images/tool-canvas.svg | 9 + .../client/themes/images/tool-debugger-paused.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 | 7 + .../client/themes/images/tool-memory-active.svg | 10 + devtools/client/themes/images/tool-memory.svg | 10 + devtools/client/themes/images/tool-network.svg | 9 + devtools/client/themes/images/tool-options.svg | 7 + .../client/themes/images/tool-profiler-active.svg | 9 + devtools/client/themes/images/tool-profiler.svg | 9 + devtools/client/themes/images/tool-scratchpad.svg | 7 + .../client/themes/images/tool-shadereditor.svg | 12 + devtools/client/themes/images/tool-storage.svg | 7 + devtools/client/themes/images/tool-styleeditor.svg | 6 + devtools/client/themes/images/tool-webaudio.svg | 6 + devtools/client/themes/images/tool-webconsole.svg | 7 + devtools/client/themes/images/tracer-icon.png | Bin 0 -> 290 bytes devtools/client/themes/images/tracer-icon@2x.png | Bin 0 -> 469 bytes devtools/client/themes/images/vview-delete.png | Bin 0 -> 136 bytes devtools/client/themes/images/vview-delete@2x.png | Bin 0 -> 168 bytes devtools/client/themes/images/vview-edit.png | Bin 0 -> 160 bytes devtools/client/themes/images/vview-edit@2x.png | Bin 0 -> 302 bytes devtools/client/themes/images/vview-lock.png | Bin 0 -> 177 bytes devtools/client/themes/images/vview-lock@2x.png | Bin 0 -> 272 bytes .../client/themes/images/vview-open-inspector.png | Bin 0 -> 98 bytes .../themes/images/vview-open-inspector@2x.png | Bin 0 -> 116 bytes devtools/client/themes/images/webconsole.svg | 101 ++ devtools/client/themes/inspector.css | 216 +++ devtools/client/themes/jit-optimizations.css | 108 ++ devtools/client/themes/layout.css | 14 + devtools/client/themes/light-theme.css | 338 ++++ devtools/client/themes/markup.css | 351 +++++ devtools/client/themes/memory.css | 637 ++++++++ devtools/client/themes/moz.build | 16 + devtools/client/themes/netmonitor.css | 975 ++++++++++++ devtools/client/themes/performance.css | 794 ++++++++++ .../client/themes/projecteditor/projecteditor.css | 184 +++ devtools/client/themes/responsivedesign.inc.css | 355 +++++ devtools/client/themes/rules.css | 561 +++++++ devtools/client/themes/scratchpad.css | 12 + devtools/client/themes/shadereditor.css | 109 ++ devtools/client/themes/shims/common.css | 10 + devtools/client/themes/shims/jar.mn | 6 + devtools/client/themes/shims/moz.build | 8 + devtools/client/themes/splitters.css | 80 + devtools/client/themes/splitview.css | 75 + devtools/client/themes/storage.css | 49 + devtools/client/themes/styleeditor.css | 445 ++++++ devtools/client/themes/toolbars.css | 216 +++ devtools/client/themes/toolbox.css | 408 +++++ .../themes/tooltip/arrow-horizontal-dark.png | Bin 0 -> 1418 bytes .../themes/tooltip/arrow-horizontal-dark@2x.png | Bin 0 -> 1796 bytes .../themes/tooltip/arrow-horizontal-light.png | Bin 0 -> 1434 bytes .../themes/tooltip/arrow-horizontal-light@2x.png | Bin 0 -> 1870 bytes .../client/themes/tooltip/arrow-vertical-dark.png | Bin 0 -> 1401 bytes .../themes/tooltip/arrow-vertical-dark@2x.png | Bin 0 -> 1866 bytes .../client/themes/tooltip/arrow-vertical-light.png | Bin 0 -> 1377 bytes .../themes/tooltip/arrow-vertical-light@2x.png | Bin 0 -> 1752 bytes devtools/client/themes/tooltips.css | 456 ++++++ devtools/client/themes/variables.css | 203 +++ devtools/client/themes/webaudioeditor.css | 195 +++ devtools/client/themes/webconsole.css | 793 ++++++++++ devtools/client/themes/widgets.css | 1621 ++++++++++++++++++++ 232 files changed, 15568 insertions(+) create mode 100644 devtools/client/themes/animationinspector.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/boxmodel.css create mode 100644 devtools/client/themes/canvasdebugger.css create mode 100644 devtools/client/themes/commandline.css create mode 100644 devtools/client/themes/commandline.inc.css create mode 100644 devtools/client/themes/common.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/debugger.css create mode 100644 devtools/client/themes/devtools-browser.css create mode 100644 devtools/client/themes/dom.css create mode 100644 devtools/client/themes/firebug-theme.css create mode 100644 devtools/client/themes/floating-scrollbars-dark-theme.css create mode 100644 devtools/client/themes/floating-scrollbars-responsive-design.css create mode 100644 devtools/client/themes/fonts.css create mode 100644 devtools/client/themes/images/add.svg create mode 100644 devtools/client/themes/images/alerticon-warning.png create mode 100644 devtools/client/themes/images/alerticon-warning@2x.png 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/arrow-e.png create mode 100644 devtools/client/themes/images/arrow-e@2x.png create mode 100644 devtools/client/themes/images/breadcrumbs-scrollbutton.png create mode 100644 devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png create mode 100644 devtools/client/themes/images/breakpoint.svg create mode 100644 devtools/client/themes/images/clear.svg create mode 100644 devtools/client/themes/images/close.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 100755 devtools/client/themes/images/command-noautohide.svg create mode 100644 devtools/client/themes/images/command-paintflashing.svg create mode 100644 devtools/client/themes/images/command-pick.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/commandline-icon.svg create mode 100644 devtools/client/themes/images/controls.png create mode 100644 devtools/client/themes/images/controls@2x.png create mode 100644 devtools/client/themes/images/cubic-bezier-swatch.png create mode 100644 devtools/client/themes/images/cubic-bezier-swatch@2x.png create mode 100644 devtools/client/themes/images/debugger-step-in.svg create mode 100644 devtools/client/themes/images/debugger-step-out.svg create mode 100644 devtools/client/themes/images/debugger-step-over.png create mode 100644 devtools/client/themes/images/debugger-step-over.svg create mode 100644 devtools/client/themes/images/debugger-step-over@2x.png create mode 100644 devtools/client/themes/images/debugger-toggleBreakpoints.svg create mode 100644 devtools/client/themes/images/debugging-addons.svg create mode 100644 devtools/client/themes/images/debugging-devices.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/diff.svg create mode 100644 devtools/client/themes/images/dock-bottom.svg create mode 100644 devtools/client/themes/images/dock-side.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/editor-error.png create mode 100755 devtools/client/themes/images/emojis/emoji-command-pick.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-canvas.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-debugger.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-dom.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-inspector.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-memory.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-network.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-profiler.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-scratchpad.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-storage.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-styleeditor.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-webaudio.svg create mode 100644 devtools/client/themes/images/emojis/emoji-tool-webconsole.svg create mode 100644 devtools/client/themes/images/fast-forward.svg create mode 100644 devtools/client/themes/images/filetypes/dir-close.svg create mode 100644 devtools/client/themes/images/filetypes/dir-open.svg create mode 100644 devtools/client/themes/images/filetypes/globe.svg create mode 100644 devtools/client/themes/images/filter-swatch.svg create mode 100644 devtools/client/themes/images/filter.svg create mode 100644 devtools/client/themes/images/filters.svg create mode 100644 devtools/client/themes/images/firebug/arrow-down.svg create mode 100644 devtools/client/themes/images/firebug/arrow-up.svg create mode 100644 devtools/client/themes/images/firebug/breadcrumbs-divider.svg create mode 100644 devtools/client/themes/images/firebug/breakpoint.svg create mode 100644 devtools/client/themes/images/firebug/close.svg create mode 100644 devtools/client/themes/images/firebug/command-console.svg create mode 100644 devtools/client/themes/images/firebug/command-eyedropper.svg create mode 100644 devtools/client/themes/images/firebug/command-frames.svg create mode 100644 devtools/client/themes/images/firebug/command-measure.svg create mode 100644 devtools/client/themes/images/firebug/command-noautohide.svg create mode 100644 devtools/client/themes/images/firebug/command-paintflashing.svg create mode 100644 devtools/client/themes/images/firebug/command-pick.svg create mode 100644 devtools/client/themes/images/firebug/command-responsivemode.svg create mode 100644 devtools/client/themes/images/firebug/command-rulers.svg create mode 100644 devtools/client/themes/images/firebug/command-scratchpad.svg create mode 100644 devtools/client/themes/images/firebug/command-screenshot.svg create mode 100644 devtools/client/themes/images/firebug/commandline-icon.svg create mode 100644 devtools/client/themes/images/firebug/debugger-blackbox.svg create mode 100644 devtools/client/themes/images/firebug/debugger-prettyprint.svg create mode 100644 devtools/client/themes/images/firebug/debugger-step-in.svg create mode 100644 devtools/client/themes/images/firebug/debugger-step-out.svg create mode 100644 devtools/client/themes/images/firebug/debugger-step-over.svg create mode 100644 devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg create mode 100644 devtools/client/themes/images/firebug/disable.svg create mode 100644 devtools/client/themes/images/firebug/dock-bottom.svg create mode 100644 devtools/client/themes/images/firebug/dock-side.svg create mode 100644 devtools/client/themes/images/firebug/dock-undock.svg create mode 100644 devtools/client/themes/images/firebug/moz.build create mode 100644 devtools/client/themes/images/firebug/pane-collapse.svg create mode 100644 devtools/client/themes/images/firebug/pane-expand.svg create mode 100644 devtools/client/themes/images/firebug/pause.svg create mode 100644 devtools/client/themes/images/firebug/play.svg create mode 100644 devtools/client/themes/images/firebug/read-only.svg create mode 100644 devtools/client/themes/images/firebug/rewind.svg create mode 100644 devtools/client/themes/images/firebug/spinner.png create mode 100644 devtools/client/themes/images/firebug/tool-debugger-paused.svg create mode 100644 devtools/client/themes/images/firebug/tool-options.svg create mode 100644 devtools/client/themes/images/firebug/twisty-closed-firebug.svg create mode 100644 devtools/client/themes/images/firebug/twisty-open-firebug.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/import.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 100755 devtools/client/themes/images/item-arrow-rtl.svg create mode 100644 devtools/client/themes/images/item-toggle.svg create mode 100644 devtools/client/themes/images/magnifying-glass.png create mode 100644 devtools/client/themes/images/magnifying-glass@2x.png create mode 100644 devtools/client/themes/images/noise.png 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/performance-icons.svg create mode 100644 devtools/client/themes/images/play.svg create mode 100644 devtools/client/themes/images/power.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/responsivemode/responsive-horizontal-resizer.png create mode 100644 devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png create mode 100644 devtools/client/themes/images/responsivemode/responsive-se-resizer.png create mode 100644 devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png create mode 100644 devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png create mode 100644 devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-home.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-rotate.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-screenshot.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-touch.png create mode 100644 devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png create mode 100644 devtools/client/themes/images/rewind.svg create mode 100644 devtools/client/themes/images/search-clear-dark.svg create mode 100644 devtools/client/themes/images/search-clear-failed.svg create mode 100644 devtools/client/themes/images/search-clear-light.svg create mode 100644 devtools/client/themes/images/search.svg create mode 100644 devtools/client/themes/images/security-state-broken.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/sort-arrows.svg create mode 100644 devtools/client/themes/images/toggle-tools.png create mode 100644 devtools/client/themes/images/toggle-tools@2x.png create mode 100644 devtools/client/themes/images/tool-canvas.svg create mode 100644 devtools/client/themes/images/tool-debugger-paused.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-active.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-options.svg create mode 100644 devtools/client/themes/images/tool-profiler-active.svg create mode 100644 devtools/client/themes/images/tool-profiler.svg create mode 100644 devtools/client/themes/images/tool-scratchpad.svg create mode 100644 devtools/client/themes/images/tool-shadereditor.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-webaudio.svg create mode 100644 devtools/client/themes/images/tool-webconsole.svg create mode 100644 devtools/client/themes/images/tracer-icon.png create mode 100644 devtools/client/themes/images/tracer-icon@2x.png create mode 100644 devtools/client/themes/images/vview-delete.png create mode 100644 devtools/client/themes/images/vview-delete@2x.png create mode 100644 devtools/client/themes/images/vview-edit.png create mode 100644 devtools/client/themes/images/vview-edit@2x.png create mode 100644 devtools/client/themes/images/vview-lock.png create mode 100644 devtools/client/themes/images/vview-lock@2x.png create mode 100644 devtools/client/themes/images/vview-open-inspector.png create mode 100644 devtools/client/themes/images/vview-open-inspector@2x.png create mode 100644 devtools/client/themes/images/webconsole.svg create mode 100644 devtools/client/themes/inspector.css create mode 100644 devtools/client/themes/jit-optimizations.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/netmonitor.css create mode 100644 devtools/client/themes/performance.css create mode 100644 devtools/client/themes/projecteditor/projecteditor.css create mode 100644 devtools/client/themes/responsivedesign.inc.css create mode 100644 devtools/client/themes/rules.css create mode 100644 devtools/client/themes/scratchpad.css create mode 100644 devtools/client/themes/shadereditor.css create mode 100644 devtools/client/themes/shims/common.css create mode 100644 devtools/client/themes/shims/jar.mn create mode 100644 devtools/client/themes/shims/moz.build 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/tooltip/arrow-horizontal-dark.png create mode 100644 devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png create mode 100644 devtools/client/themes/tooltip/arrow-horizontal-light.png create mode 100644 devtools/client/themes/tooltip/arrow-horizontal-light@2x.png create mode 100644 devtools/client/themes/tooltip/arrow-vertical-dark.png create mode 100644 devtools/client/themes/tooltip/arrow-vertical-dark@2x.png create mode 100644 devtools/client/themes/tooltip/arrow-vertical-light.png create mode 100644 devtools/client/themes/tooltip/arrow-vertical-light@2x.png create mode 100644 devtools/client/themes/tooltips.css create mode 100644 devtools/client/themes/variables.css create mode 100644 devtools/client/themes/webaudioeditor.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/animationinspector.css b/devtools/client/themes/animationinspector.css new file mode 100644 index 000000000..6a17ca02f --- /dev/null +++ b/devtools/client/themes/animationinspector.css @@ -0,0 +1,623 @@ +/* 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 */ + +.theme-dark { + --even-animation-timeline-background-color: rgba(255,255,255,0.03); + --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg); + --pause-image: url(chrome://devtools/skin/images/pause.svg); + --rewind-image: url(chrome://devtools/skin/images/rewind.svg); + --play-image: url(chrome://devtools/skin/images/play.svg); +} + +.theme-light { + --even-animation-timeline-background-color: rgba(128,128,128,0.03); + --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg); + --pause-image: url(chrome://devtools/skin/images/pause.svg); + --rewind-image: url(chrome://devtools/skin/images/rewind.svg); + --play-image: url(chrome://devtools/skin/images/play.svg); +} + +.theme-firebug { + --even-animation-timeline-background-color: rgba(128,128,128,0.03); + --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg); + --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg); + --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg); + --play-image: url(chrome://devtools/skin/images/firebug/play.svg); +} + +:root { + /* How high should toolbars be */ + --toolbar-height: 20px; + /* How wide should the sidebar be (should be wide enough to contain long + property names like 'border-bottom-right-radius' without ellipsis) */ + --timeline-sidebar-width: 200px; + /* How high should animations displayed in the timeline be */ + --timeline-animation-height: 20px; + /* The size of a keyframe marker in the keyframes diagram */ + --keyframes-marker-size: 10px; + /* The color of the time graduation borders */ + --time-graduation-border-color: rgba(128, 136, 144, .5); +} + +.animation { + --timeline-border-color: var(--theme-body-color); + --timeline-background-color: var(--theme-splitter-color); + /* The color of the endDelay hidden progress */ + --enddelay-hidden-progress-color: var(--theme-graphs-grey); + /* The color of none fill mode */ + --fill-none-color: var(--theme-highlight-gray); + /* The color of enable fill mode */ + --fill-enable-color: var(--timeline-border-color); +} + +.animation.cssanimation { + --timeline-border-color: var(--theme-highlight-lightorange); + --timeline-background-color: var(--theme-contrast-background); +} + +.animation.csstransition { + --timeline-border-color: var(--theme-highlight-bluegrey); + --timeline-background-color: var(--theme-highlight-blue); +} + +.animation.scriptanimation { + --timeline-border-color: var(--theme-highlight-green); + --timeline-background-color: var(--theme-graphs-green); +} + +html { + height: 100%; +} + +body { + margin: 0; + padding: 0; + display : flex; + flex-direction: column; + height: 100%; + overflow: hidden; + color: var(--theme-content-color3); +} + +/* The top toolbar, containing the toggle-all button. And the timeline toolbar, + containing playback control buttons, shown only when there are animations + displayed in the timeline */ + +#global-toolbar, +#timeline-toolbar { + border-bottom: 1px solid var(--theme-splitter-color); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + height: var(--toolbar-height); +} + +#timeline-toolbar { + display: none; + justify-content: flex-start; +} + +[timeline] #global-toolbar { + display: none; +} + +[timeline] #timeline-toolbar { + display: flex; +} + +/* The main animations container */ + +#sidebar-panel-animationinspector { + height: 100%; + width: 100%; +} + +#players { + height: calc(100% - var(--toolbar-height)); + overflow-x: hidden; + overflow-y: auto; +} + +[empty] #players { + display: none; +} + +/* The error message, shown when an invalid/unanimated element is selected */ + +#error-message { + padding-top: 10%; + text-align: center; + flex: 1; + overflow: auto; + + /* The error message is hidden by default */ + display: none; +} + +[empty] #error-message { + display: block; +} + +/* Element picker, toggle-all buttons, timeline pause button, ... */ + +#global-toolbar > *, +#timeline-toolbar > * { + min-height: var(--toolbar-height); + border-color: var(--theme-splitter-color); + border-width: 0 0 0 1px; + display: flex; + justify-content: center; + align-items: center; +} + +#global-toolbar .label, +#timeline-toolbar .label { + padding: 0 5px; + border-style: solid; +} + +#global-toolbar .devtools-button, +#timeline-toolbar .devtools-button { + margin: 0; + padding: 0; +} + +#timeline-toolbar .devtools-button, +#timeline-toolbar .label { + border-width: 0 1px 0 0; +} + +#element-picker::before { + background-image: var(--command-pick-image); +} + +.pause-button::before { + background-image: var(--pause-image); +} + +#rewind-timeline::before { + background-image: var(--rewind-image); +} + +.pause-button.paused::before { + background-image: var(--play-image); +} + +#timeline-rate select.devtools-button { + -moz-appearance: none; + text-align: center; + font-family: inherit; + color: var(--theme-body-color); + font-size: 1em; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-repeat: no-repeat; + background-position: calc(100% - 4px) center; + padding-right: 1em; +} + +#timeline-rate { + position: relative; + width: 4.5em; +} + +/* Animation timeline component */ + +.animation-timeline { + position: relative; + display: flex; + flex-direction: column; +} + +/* Useful for positioning animations or keyframes in the timeline */ +.animation-timeline .track-container { + position: absolute; + top: 0; + left: var(--timeline-sidebar-width); + /* Leave the width of a marker right of a track so the 100% markers can be + selected easily */ + right: var(--keyframes-marker-size); + height: var(--timeline-animation-height); +} + +.animation-timeline .scrubber-wrapper { + position: absolute; + left: var(--timeline-sidebar-width); + /* Leave the width of a marker right of a track so the 100% markers can be + selected easily */ + right: var(--keyframes-marker-size); + height: 100%; +} + +.animation-timeline .scrubber { + z-index: 5; + pointer-events: none; + position: absolute; + /* Make the scrubber as tall as the viewport minus the toolbar height and the + header-wrapper's borders */ + height: calc(100vh - var(--toolbar-height) - 1px); + min-height: 100%; + width: 0; + border-right: 1px solid red; + box-sizing: border-box; +} + +/* The scrubber handle is a transparent element displayed on top of the scrubber + line that allows users to drag it */ +.animation-timeline .scrubber .scrubber-handle { + position: absolute; + height: 100%; + /* Make it thick enough for easy dragging */ + width: 6px; + right: -1.5px; + cursor: col-resize; + pointer-events: all; +} + +.animation-timeline .scrubber .scrubber-handle::before { + content: ""; + position: sticky; + top: 0; + width: 1px; + border-top: 5px solid red; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} + +.animation-timeline .time-header { + min-height: var(--timeline-animation-height); + cursor: col-resize; + -moz-user-select: none; +} + +.animation-timeline .time-header .header-item { + position: absolute; + height: 100%; + padding-top: 3px; + border-left: 0.5px solid var(--time-graduation-border-color); +} + +.animation-timeline .header-wrapper { + position: sticky; + top: 0; + background-color: var(--theme-body-background); + border-bottom: 1px solid var(--time-graduation-border-color); + z-index: 3; + height: var(--timeline-animation-height); + overflow: hidden; +} + +.animation-timeline .time-body { + height: 100%; +} + +.animation-timeline .time-body .time-tick { + -moz-user-select: none; + position: absolute; + width: 0; + /* When scroll bar is shown, make it covers entire time-body */ + height: 100%; + /* When scroll bar is hidden, make it as tall as the viewport minus the + timeline animation height and the header-wrapper's borders */ + min-height: calc(100vh - var(--timeline-animation-height) - 1px); + border-left: 0.5px solid var(--time-graduation-border-color); +} + +.animation-timeline .animations { + width: 100%; + height: 100%; + padding: 0; + list-style-type: none; + margin-top: 0; +} + +/* Animation block widgets */ + +.animation-timeline .animation { + margin: 2px 0; + height: var(--timeline-animation-height); + position: relative; +} + +/* We want animations' background colors to alternate, but each animation has + a sibling (hidden by default) that contains the animated properties and + keyframes, so we need to alternate every 4 elements. */ +.animation-timeline .animation:nth-child(4n+1) { + background-color: var(--even-animation-timeline-background-color); +} + +.animation-timeline .animation .target { + width: var(--timeline-sidebar-width); + height: 100%; + overflow: hidden; + display: flex; + align-items: center; +} + +.animation-timeline .animation-target { + background-color: transparent; +} + +.animation-timeline .animation .time-block { + cursor: pointer; +} + +/* Animation summary graph */ +.animation-timeline .animation .summary { + position: absolute; + width: 100%; + height: 100%; +} + +.animation-timeline .animation .summary path { + fill: var(--timeline-background-color); + stroke: var(--timeline-border-color); +} + +.animation-timeline .animation .summary .infinity.copied { + opacity: .3; +} + +.animation-timeline .animation .summary path.delay-path.negative, +.animation-timeline .animation .summary path.enddelay-path.negative { + fill: none; + stroke: var(--enddelay-hidden-progress-color); + stroke-dasharray: 2, 2; +} + +.animation-timeline .animation .name { + position: absolute; + color: var(--theme-content-color3); + top: 0px; + left: 0px; + height: 100%; + width: 100%; + display: flex; + align-items: center; + padding: 0 2px; + box-sizing: border-box; + --fast-track-icon-width: 15px; + z-index: 1; +} + +.animation-timeline .animation .name div { + /* Flex items don't support text-overflow, so a child div is used */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + background-color: rgba(255, 255, 255, 0.7); + max-width: 50%; +} + +.animation-timeline .fast-track .name::after { + /* Animations running on the compositor have the fast-track background image*/ + content: ""; + display: block; + position: absolute; + top: 1px; + right: 0; + height: 100%; + width: var(--fast-track-icon-width); + z-index: 1; +} + +.animation-timeline .all-properties .name::after { + background-color: var(--theme-content-color3); + clip-path: url(images/animation-fast-track.svg#thunderbolt); + background-repeat: no-repeat; + background-position: center; +} + +.animation-timeline .some-properties .name::after { + background-color: var(--theme-content-color3); + clip-path: url(images/animation-fast-track.svg#thunderbolt); + background-repeat: no-repeat; + background-position: center; +} + +.animation-timeline .animation .delay, +.animation-timeline .animation .end-delay { + position: absolute; + border-bottom: 3px solid var(--fill-none-color); + bottom: -0.5px; +} + +.animation-timeline .animation .delay::after, +.animation-timeline .animation .end-delay::after { + content: ""; + position: absolute; + top: -2px; + width: 3px; + height: 3px; + border: 2px solid var(--fill-none-color); + background-color: var(--fill-none-color); + border-radius: 50%; +} + +.animation-timeline .animation .negative.delay::after, +.animation-timeline .animation .positive.end-delay::after { + right: -3px; +} + +.animation-timeline .animation .positive.delay::after, +.animation-timeline .animation .negative.end-delay::after { + left: -3px; +} + +.animation-timeline .animation .fill.delay, +.animation-timeline .animation .fill.end-delay { + border-color: var(--fill-enable-color); +} + +.animation-timeline .animation .fill.delay::after, +.animation-timeline .animation .fill.end-delay::after { + border-color: var(--fill-enable-color); + background-color: var(--fill-enable-color); +} + +/* Animation target node gutter, contains a preview of the dom node */ + +.animation-target { + background-color: var(--theme-toolbar-background); + padding: 0 4px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; +} + +.animation-target .attribute-name { + padding-left: 4px; +} + +.animation-target .node-highlighter { + background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-right: 5px; + cursor: pointer; +} + +.animation-target .node-highlighter:hover { + filter: url(images/filters.svg#checked-icon-state); +} + +.animation-target .node-highlighter:active, +.animation-target .node-highlighter.selected { + filter: url(images/filters.svg#checked-icon-state) brightness(0.9); +} + +/* Inline keyframes info in the timeline */ + +.animation-timeline .animated-properties:not(.selected) { + display: none; +} + +.animation-timeline .animated-properties { + background-color: var(--theme-selection-background-semitransparent); +} + +.animation-timeline .animated-properties ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.animation-timeline .animated-properties .property { + height: var(--timeline-animation-height); + position: relative; +} + +.animation-timeline .animated-properties .property:nth-child(2n) { + background-color: var(--even-animation-timeline-background-color); +} + +.animation-timeline .animated-properties .name { + width: var(--timeline-sidebar-width); + padding-right: var(--keyframes-marker-size); + box-sizing: border-box; + height: 100%; + color: var(--theme-body-color-alt); + white-space: nowrap; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.animation-timeline .animated-properties .name div { + overflow: hidden; + text-overflow: ellipsis; +} + +.animated-properties.cssanimation { + --background-color: var(--theme-contrast-background); +} + +.animated-properties.csstransition { + --background-color: var(--theme-highlight-blue); +} + +.animated-properties.scriptanimation { + --background-color: var(--theme-graphs-green); +} + +.animation-timeline .animated-properties .oncompositor::before { + content: ""; + display: inline-block; + width: 17px; + height: 17px; + background-color: var(--background-color); + clip-path: url(images/animation-fast-track.svg#thunderbolt); + vertical-align: middle; +} + +.animation-timeline .animated-properties .warning { + text-decoration: underline dotted; +} + +.animation-timeline .animated-properties .frames { + /* The frames list is absolutely positioned and the left and width properties + are dynamically set from javascript to match the animation's startTime and + duration */ + position: absolute; + top: 0; + height: 100%; + /* Using flexbox to vertically center the frames */ + display: flex; + align-items: center; +} + +/* Keyframes diagram, displayed below the timeline, inside the animation-details + element. */ + +.keyframes { + /* Actual keyframe markers are positioned absolutely within this container and + their position is relative to its size (we know the offset of each frame + in percentage) */ + position: relative; + width: 100%; + height: 0; +} + +.keyframes.cssanimation { + background-color: var(--theme-contrast-background); +} + +.keyframes.csstransition { + background-color: var(--theme-highlight-blue); +} + +.keyframes.scriptanimation { + background-color: var(--theme-graphs-green); +} + +.keyframes .frame { + position: absolute; + top: 0; + width: 0; + height: 0; + background-color: inherit; + cursor: pointer; +} + +.keyframes .frame::before { + content: ""; + display: block; + transform: + translateX(calc(var(--keyframes-marker-size) * -.5)) + /* The extra pixel on the Y axis is so that markers are centered on the + horizontal line in the keyframes diagram. */ + translateY(calc(var(--keyframes-marker-size) * -.5 + 1px)); + width: var(--keyframes-marker-size); + height: var(--keyframes-marker-size); + border-radius: 100%; + background-color: inherit; +} diff --git a/devtools/client/themes/audio/moz.build b/devtools/client/themes/audio/moz.build new file mode 100644 index 000000000..b68b29b8d --- /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 000000000..e9d742913 Binary files /dev/null and b/devtools/client/themes/audio/shutter.wav differ diff --git a/devtools/client/themes/boxmodel.css b/devtools/client/themes/boxmodel.css new file mode 100644 index 000000000..5a3289fae --- /dev/null +++ b/devtools/client/themes/boxmodel.css @@ -0,0 +1,258 @@ +/* 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/ */ + +#boxmodel-wrapper { + border-bottom-style: solid; + border-bottom-width: 1px; + border-color: var(--theme-splitter-color); +} + +#boxmodel-container { + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; + margin: 0px auto; + padding: 0; +} + +/* Header */ + +#boxmodel-header, +#boxmodel-info { + display: flex; + align-items: center; + padding: 4px 17px; +} + +#layout-geometry-editor { + visibility: hidden; +} + +#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; + box-sizing: border-box; + /* The regions are semi-transparent, so the white background is partly + visible */ + background-color: white; + color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 0 14px 4px 14px; + width: calc(100% - 2 * 14px); +} + +.boxmodel-margin, +.boxmodel-size { + color: var(--theme-highlight-blue); +} + +/* Regions are 3 nested elements with wide borders and outlines */ + +#boxmodel-content { + height: 18px; +} + +#boxmodel-margins, +#boxmodel-borders, +#boxmodel-padding { + border-color: hsla(210,100%,85%,0.2); + border-width: 18px; + border-style: solid; + outline: dotted 1px hsl(210,100%,85%); +} + +#boxmodel-margins { + /* This opacity applies to all of the regions, since they are nested */ + opacity: .8; +} + +/* Regions colors */ + +#boxmodel-margins { + border-color: #edff64; +} + +#boxmodel-borders { + border-color: #444444; +} + +#boxmodel-padding { + border-color: #6a5acd; +} + +#boxmodel-content { + background-color: #87ceeb; +} + +.theme-firebug #boxmodel-main, +.theme-firebug #boxmodel-borders, +.theme-firebug #boxmodel-content { + border-style: solid; +} + +.theme-firebug #boxmodel-main, +.theme-firebug #boxmodel-header { + font-family: var(--proportional-font-family); +} + +.theme-firebug #boxmodel-main { + color: var(--theme-body-color); + font-size: var(--theme-toolbar-font-size); +} + +.theme-firebug #boxmodel-header { + font-size: var(--theme-toolbar-font-size); +} + +/* Editable region sizes are contained in absolutely positioned

*/ + +#boxmodel-main > p { + position: absolute; + pointer-events: none; + margin: 0; + text-align: center; +} + +#boxmodel-main > p > span, +#boxmodel-main > p > input { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.boxmodel-top, +.boxmodel-bottom { + width: calc(100% - 2px); + text-align: center; +} + +.boxmodel-padding.boxmodel-top { + top: 37px; +} + +.boxmodel-padding.boxmodel-bottom { + bottom: 38px; +} + +.boxmodel-border.boxmodel-top { + top: 19px; +} + +.boxmodel-border.boxmodel-bottom { + bottom: 20px; +} + +.boxmodel-margin.boxmodel-top { + top: 1px; +} + +.boxmodel-margin.boxmodel-bottom { + bottom: 2px; +} + +.boxmodel-size, +.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; +} + +.boxmodel-size { + width: calc(100% - 2px); +} + +.boxmodel-margin.boxmodel-right, +.boxmodel-margin.boxmodel-left, +.boxmodel-border.boxmodel-left, +.boxmodel-border.boxmodel-right, +.boxmodel-padding.boxmodel-right, +.boxmodel-padding.boxmodel-left { + width: 21px; +} + +.boxmodel-padding.boxmodel-left { + left: 35px; +} + +.boxmodel-padding.boxmodel-right { + right: 35px; +} + +.boxmodel-border.boxmodel-left { + left: 16px; +} + +.boxmodel-border.boxmodel-right { + right: 17px; +} + +.boxmodel-margin.boxmodel-right { + right: 0; +} + +.boxmodel-margin.boxmodel-left { + left: 0; +} + +.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) { + transform: rotate(-90deg); +} + +.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) { + transform: rotate(90deg); +} + +/* Legend: displayed inside regions */ + +.boxmodel-legend { + position: absolute; + margin: 2px 6px; + z-index: 1; +} + +.boxmodel-legend[data-box="margin"] { + color: var(--theme-highlight-blue); +} + +/* Editable fields */ + +.boxmodel-editable { + border: 1px dashed transparent; + -moz-user-select: text; +} + +.boxmodel-editable:hover { + border-bottom-color: hsl(0, 0%, 50%); +} + +.styleinspector-propertyeditor { + border: 1px solid #ccc; + padding: 0; +} + +/* Make sure the content size doesn't appear as editable like the other sizes */ + +.boxmodel-size > span { + cursor: default; +} + +/* Box Model Info: contains the position and size of the element */ + +#boxmodel-element-size { + flex: 1; +} + +#boxmodel-position-group { + display: flex; + align-items: center; +} diff --git a/devtools/client/themes/canvasdebugger.css b/devtools/client/themes/canvasdebugger.css new file mode 100644 index 000000000..39162a96f --- /dev/null +++ b/devtools/client/themes/canvasdebugger.css @@ -0,0 +1,353 @@ +/* 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 { + --gutter-width: 3em; + --gutter-padding-start: 22px; + --checkerboard-pattern: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), + linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); +} + +:root.theme-dark { + --draw-call-background: rgba(112,191,83,0.15); + --interesting-call-background: rgba(223,128,255,0.15); +} + +:root.theme-light { + --draw-call-background: rgba(44,187,15,0.1); + --interesting-call-background: rgba(184,46,229,0.1); +} + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + color: var(--theme-body-color-alt); +} + +#empty-notice > button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(images/profiler-stopwatch.svg); +} + +#empty-notice > button .button-text { + display: none; +} + +#waiting-notice { + font-size: 110%; +} + +/* Snapshots pane */ + +#snapshots-pane { + border-inline-end: 1px solid var(--theme-splitter-color); +} + +#record-snapshot { + list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch.svg"); +} + +#import-snapshot { + list-style-image: url("images/import.svg"); +} + +/* Snapshots items */ + +.snapshot-item-thumbnail { + image-rendering: -moz-crisp-edges; + background-image: var(--checkerboard-pattern); + background-size: 12px 12px, 12px 12px; + background-position: 0px 0px, 6px 6px; + background-repeat: repeat, repeat; +} + +.snapshot-item-thumbnail[flipped=true] { + transform: scaleY(-1); +} + +.snapshot-item-thumbnail { + background-color: var(--theme-body-background); +} + +.snapshot-item-details { + padding-inline-start: 6px; +} + +.snapshot-item-calls { + padding-top: 4px; + font-size: 80%; +} + +.snapshot-item-save { + padding-bottom: 2px; + font-size: 90%; +} + +.snapshot-item-calls, +.snapshot-item-save { + color: var(--theme-body-color-alt); +} + +.snapshot-item-save { + text-decoration: underline; + cursor: pointer; +} + +.snapshot-item-save[disabled=true] { + text-decoration: none; + pointer-events: none; +} + +.snapshot-item-footer.devtools-throbber::before { + margin-top: -2px; +} + +#snapshots-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Debugging pane controls */ +#resume { + list-style-image: url(images/play.svg); +} + +#step-over { + list-style-image: url(images/debugger-step-over.svg); +} + +#step-in { + list-style-image: url(images/debugger-step-in.svg); +} + +#step-out { + list-style-image: url(images/debugger-step-out.svg); +} + +#calls-slider { + padding-inline-end: 24px; +} + +#calls-slider .scale-slider { + margin: 0; +} + +#debugging-toolbar-sizer-button { + /* This button's only purpose in life is to make the + container .devtools-toolbar have the right height. */ + visibility: hidden; + min-width: 1px; +} + +/* Calls list pane */ + +#calls-list .side-menu-widget-container { + background: transparent; +} + +/* Calls list items */ + +#calls-list .side-menu-widget-item { + padding: 0; + border-color: var(--theme-splitter-color); + border-bottom-color: transparent; +} + +.call-item-view:hover { + background-color: rgba(128,128,128,0.05); +} + +.call-item-view[draw-call] { + background-color: var(--draw-call-background); +} + +.call-item-view[interesting-call] { + background-color: var(--interesting-call-background); +} + +.call-item-gutter { + width: calc(var(--gutter-width) + var(--gutter-padding-start)); + padding-inline-start: var(--gutter-padding-start); + padding-inline-end: 4px; + padding-top: 2px; + padding-bottom: 2px; + border-inline-end: 1px solid var(--theme-splitter-color); + margin-inline-end: 6px; + background-color: var(--theme-sidebar-background); + color: var(--theme-content-color3); +} + +.selected .call-item-gutter { + background-color: #2cbb0f; + color: white; +} + +.call-item-index { + text-align: end; +} + +.call-item-context { + color: var(--theme-highlight-orange); +} + +.call-item-name { + color: var(--theme-highlight-blue); +} + +.call-item-location { + padding-inline-start: 2px; + padding-inline-end: 6px; + text-align: end; + cursor: pointer; + color: var(--theme-highlight-bluegrey); + border-color: var(--theme-splitter-color); +} + +.call-item-location:hover { + color: var(--theme-highlight-blue); +} + +.call-item-view:hover .call-item-location, +.call-item-view[expanded] .call-item-location { + text-decoration: underline; +} + +.call-item-stack { + padding-inline-start: calc(var(--gutter-width) + var(--gutter-padding-start)); + padding-bottom: 10px; +} + +.theme-dark .call-item-stack { + background: rgba(0,0,0,0.9); +} + +.theme-light .call-item-stack { + background: rgba(255,255,255,0.9); +} + +.call-item-stack-fn { + padding-top: 2px; + padding-bottom: 2px; +} + +.call-item-stack-fn-location { + padding-inline-start: 2px; + padding-inline-end: 6px; + text-align: end; + cursor: pointer; + text-decoration: underline; +} + +.call-item-stack-fn-name { + color: var(--theme-content-color3); +} + +.call-item-stack-fn-location { + color: var(--theme-highlight-bluegrey); +} + +.call-item-stack-fn-location:hover { + color: var(--theme-highlight-blue); +} + +#calls-list .selected .call-item-contents > label:not(.call-item-gutter) { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Rendering preview */ + +#screenshot-container { + background-color: var(--theme-body-background); + background-image: var(--checkerboard-pattern); + background-size: 30px 30px, 30px 30px; + background-position: 0px 0px, 15px 15px; + background-repeat: repeat, repeat; +} + +@media (min-width: 701px) { + #screenshot-container { + width: 30vw; + max-width: 50vw; + min-width: 100px; + } +} + +@media (max-width: 700px) { + #screenshot-container { + height: 40vh; + max-height: 70vh; + min-height: 100px; + } +} + +#screenshot-image { + background-image: -moz-element(#screenshot-rendering); + background-size: contain; + background-position: center, center; + background-repeat: no-repeat; +} + +#screenshot-image[flipped=true] { + transform: scaleY(-1); +} + +#screenshot-dimensions { + padding-top: 4px; + padding-bottom: 4px; + text-align: center; +} + +.theme-dark #screenshot-dimensions { + background-color: rgba(0,0,0,0.4); +} + +.theme-light #screenshot-dimensions { + background-color: rgba(255,255,255,0.8); +} + +/* Snapshot filmstrip */ + +#snapshot-filmstrip { + border-top: 1px solid var(--theme-splitter-color); + overflow: hidden; +} + +.theme-dark #snapshot-filmstrip { + color: var(--theme-selection-color); +} + +.theme-light #snapshot-filmstrip { + color: var(--theme-body-color-alt); +} + +.filmstrip-thumbnail { + image-rendering: -moz-crisp-edges; + background-color: var(--theme-body-background); + background-image: var(--checkerboard-pattern); + background-size: 12px 12px, 12px 12px; + background-position: 0px -1px, 6px 5px; + background-repeat: repeat, repeat; + background-origin: content-box; + cursor: pointer; + padding-top: 1px; + padding-bottom: 1px; + border-inline-end: 1px solid var(--theme-splitter-color); + transition: opacity 0.1s ease-in-out; +} + +.filmstrip-thumbnail[flipped=true] { + transform: scaleY(-1); +} + +#snapshot-filmstrip > .filmstrip-thumbnail:hover, +#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] { + border: 1px solid var(--theme-highlight-blue); + margin: 0 0 0 -1px; + padding: 0; + opacity: 0.66; +} diff --git a/devtools/client/themes/commandline.css b/devtools/client/themes/commandline.css new file mode 100644 index 000000000..9dce964ed --- /dev/null +++ b/devtools/client/themes/commandline.css @@ -0,0 +1,172 @@ +/* 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/. */ + + +/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. + We are copy/pasting variables from light-theme and dark-theme, + since they aren't loaded in this context (within commandlineoutput.xhtml + and commandlinetooltip.xhtml). */ +:root[devtoolstheme="light"] { + --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */ + --gcli-input-color: #393f4c; /* --theme-body-color */ + --gcli-border-color: #dde1e4; /* --theme-splitter-color */ +} + +:root[devtoolstheme="dark"] { + --gcli-background-color: #272b35; /* --theme-toolbar-background */ + --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */ + --gcli-input-color: #b6babf; /* --theme-body-color-alt */ + --gcli-border-color: #454d5d; /* --theme-splitter-color */ +} + +.gcli-body { + margin: 0; + font: message-box; + color: var(--gcli-input-color); +} + +#gcli-output-root, +#gcli-tooltip-root { + border: 1px solid var(--gcli-border-color); + border-radius: 3px; + background-color: var(--gcli-background-color); +} + +#gcli-output-root { + padding: 5px 10px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: 0; +} + +#gcli-tooltip-root { + padding: 5px 0px; +} + +#gcli-tooltip-connector { + margin-top: -1px; + margin-left: 8px; + width: 20px; + height: 10px; + border-left: 1px solid var(--gcli-border-color); + border-right: 1px solid var(--gcli-border-color); + background-color: var(--gcli-background-color); +} + +.gcli-tt-description, +.gcli-tt-error { + padding: 0 10px; +} + +.gcli-row-out { + padding: 0 5px; + line-height: 1.2em; + border-top: none; + border-bottom: none; + color: var(--gcli-input-color); +} + +.gcli-row-out p, +.gcli-row-out h1, +.gcli-row-out h2, +.gcli-row-out h3 { + margin: 5px 0; +} + +.gcli-row-out h1, +.gcli-row-out h2, +.gcli-row-out h3, +.gcli-row-out h4, +.gcli-row-out h5, +.gcli-row-out th, +.gcli-row-out strong, +.gcli-row-out pre { + color: var(--gcli-input-color); +} + +.gcli-row-out pre { + font-size: 80%; +} + +.gcli-row-out td { + white-space: nowrap; +} + +.gcli-out-shortcut, +.gcli-help-synopsis { + padding: 0 3px; + margin: 0 4px; + font-weight: normal; + font-size: 90%; + border-radius: 3px; + background-color: var(--gcli-background-color); + border: 1px solid var(--gcli-border-color); +} + +.gcli-out-shortcut:before, +.gcli-help-synopsis:before { + color: var(--gcli-input-color); + padding-inline-end: 2px; +} + +.gcli-help-arrow { + color: #666; +} + +.gcli-help-description { + margin: 0 20px; + padding: 0; +} + +.gcli-help-parameter { + margin: 0 30px; + padding: 0; +} + +.gcli-help-header { + margin: 10px 0 6px; +} + +.gcli-menu-name { + padding-inline-start: 8px; +} + +.gcli-menu-desc { + padding-inline-end: 8px; + color: var(--gcli-input-color); +} + +.gcli-menu-name:hover, +.gcli-menu-desc:hover { + background-color: var(--gcli-input-focused-background); +} + +.gcli-menu-highlight, +.gcli-menu-highlight:hover { + background-color: hsla(0,100%,100%,.1); +} + +.gcli-menu-typed { + color: hsl(25,78%,50%); +} + +.gcli-menu-more { + font-size: 80%; + text-align: end; + padding-inline-end: 8px; +} + +.gcli-addon-disabled { + opacity: 0.6; + text-decoration: line-through; +} + +.gcli-breakpoint-label { + font-weight: bold; +} + +.gcli-breakpoint-lineText { + font-family: monospace; +} diff --git a/devtools/client/themes/commandline.inc.css b/devtools/client/themes/commandline.inc.css new file mode 100644 index 000000000..db78bedf3 --- /dev/null +++ b/devtools/client/themes/commandline.inc.css @@ -0,0 +1,217 @@ +%if 0 +/* 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/. */ +%endif + +/* Developer toolbar */ + +/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. + We are copy/pasting variables from light-theme and dark-theme, + since they aren't loaded in this context (within browser.css). */ +:root[devtoolstheme="light"] #developer-toolbar { + --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */ + --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ + --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */ + --gcli-input-color: #393f4c; /* --theme-body-color */ + --gcli-border-color: #dde1e4; /* --theme-splitter-color */ + --selection-background: #4c9ed9; /* --theme-selection-background */ + --selection-color: #f5f7fa; /* --theme-selection-color */ + --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */ + --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */ +} + +:root[devtoolstheme="dark"] #developer-toolbar { + --gcli-background-color: #272b35; /* --theme-toolbar-background */ + --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */ + --gcli-input-color: #b6babf; /* --theme-body-color-alt */ + --gcli-border-color: #454d5d; /* --theme-splitter-color */ + --selection-background: #5675b9; /* --theme-selection-background */ + --selection-color: #f5f7fa; /* --theme-selection-color */ + --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */ + --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */ +} + +#developer-toolbar { + -moz-appearance: none; + padding: 0; + min-height: 32px; + background-color: var(--gcli-background-color); + border-top: 1px solid var(--gcli-border-color); +} + +#developer-toolbar > toolbarbutton { + -moz-appearance: none; + border: none; + background-color: transparent; + margin: 0; + padding: 0 10px; + width: 32px; +} + +.developer-toolbar-button > image { + margin: auto 10px; +} + +:root[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image, +:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before { + filter: invert(1); +} + +.developer-toolbar-button > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +/* The toolkit close button is low contrast in the dark theme so invert it. */ +:root[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image { + filter: invert(1); +} + +#developer-toolbar-toolbox-button { + list-style-image: url("chrome://devtools/skin/images/toggle-tools.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +#developer-toolbar-toolbox-button > label { + display: none; +} + +#developer-toolbar-toolbox-button:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +#developer-toolbar-toolbox-button:hover:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} + +#developer-toolbar-toolbox-button[checked=true] { + -moz-image-region: rect(0px, 64px, 16px, 48px); +} + +@media (min-resolution: 1.1dppx) { + #developer-toolbar-toolbox-button { + list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png"); + -moz-image-region: rect(0px, 32px, 32px, 0px); + } + + #developer-toolbar-toolbox-button:hover { + -moz-image-region: rect(0px, 64px, 32px, 32px); + } + + #developer-toolbar-toolbox-button:hover:active { + -moz-image-region: rect(0px, 96px, 32px, 64px); + } + + #developer-toolbar-toolbox-button[checked=true] { + -moz-image-region: rect(0px, 128px, 32px, 96px); + } +} + +/* GCLI */ + +html|*#gcli-tooltip-frame, +html|*#gcli-output-frame { + padding: 0; + border-width: 0; + background-color: transparent; +} + +#gcli-output, +#gcli-tooltip { + border-width: 0; + background-color: transparent; + -moz-appearance: none; +} + +.gclitoolbar-input-node, +.gclitoolbar-complete-node { + margin: 0; + -moz-box-align: center; + padding-top: 0; + padding-bottom: 0; + padding-right: 8px; + text-shadow: none; + box-shadow: none; + border-width: 0; + background-color: transparent; + border-radius: 0; +} + +.gclitoolbar-input-node { + -moz-appearance: none; + color: var(--gcli-input-color); + background-color: var(--gcli-input-background); + background-repeat: no-repeat; + background-position: 4px center; + box-shadow: 1px 0 0 var(--gcli-border-color) inset, + -1px 0 0 var(--gcli-border-color) inset; + + line-height: 32px; + outline-style: none; + padding: 0; +} + +.gclitoolbar-input-node[focused="true"] { + background-color: var(--gcli-input-focused-background); +} + +.gclitoolbar-input-node::before { + content: ""; + display: inline-block; + -moz-box-ordinal-group: 0; + width: 16px; + height: 16px; + margin: 0 2px; + background-image: var(--command-line-image); +} + +.gclitoolbar-input-node[focused="true"]::before { + background-image: var(--command-line-image-focus); +} + +.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { + background-color: var(--selection-background); + color: var(--selection-color); + text-shadow: none; +} + +.gclitoolbar-complete-node { + padding-left: 21px; + background-color: transparent; + color: transparent; + z-index: 100; + pointer-events: none; +} + +.gcli-in-incomplete, +.gcli-in-error, +.gcli-in-ontab, +.gcli-in-todo, +.gcli-in-closebrace, +.gcli-in-param, +.gcli-in-valid { + margin: 0; + padding: 0; +} + +.gcli-in-incomplete { + border-bottom: 2px dotted #999; +} + +.gcli-in-error { + border-bottom: 2px dotted #F00; +} + +.gcli-in-ontab { + color: hsl(210,0%,35%); +} + +.gcli-in-todo { + color: hsl(210,50%,35%); +} + +.gcli-in-closebrace { + color: hsl(0,0%,80%); +} diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css new file mode 100644 index 000000000..3d713ada7 --- /dev/null +++ b/devtools/client/themes/common.css @@ -0,0 +1,791 @@ +/* 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("resource://devtools/client/themes/splitters.css"); + +:root { + font: message-box; +} + +:root[platform="mac"] { + --monospace-font-family: Menlo, monospace; +} + +:root[platform="win"] { + --monospace-font-family: Consolas, monospace; +} + +:root[platform="linux"], +:root.theme-firebug { + --monospace-font-family: monospace; +} + +:root.theme-firebug { + --proportional-font-family: Lucida Grande, Tahoma, sans-serif; +} + +.devtools-monospace { + font-family: var(--monospace-font-family); +} + +:root[platform="linux"] .devtools-monospace { + font-size: 80%; +} + + +/* Autocomplete Popup */ + +.devtools-autocomplete-popup { + box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; + background-color: transparent; + border-radius: 3px; + overflow-x: hidden; + max-height: 20rem; + + /* 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; +} + +:root[platform="linux"] .devtools-autocomplete-popup { + /* Root font size is bigger on Linux, adjust rem-based values. */ + max-height: 16rem; +} + +.devtools-autocomplete-listbox { + -moz-appearance: none !important; + background-color: transparent; + border-width: 0px !important; + margin: 0; + padding: 2px; +} + +.devtools-autocomplete-listbox .autocomplete-item { + width: 100%; + background-color: transparent; + border-radius: 4px; + padding: 1px 0; +} + +.devtools-autocomplete-listbox .autocomplete-selected { + background-color: rgba(0,0,0,0.2); +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-selected, +.devtools-autocomplete-listbox.dark-theme .autocomplete-item:hover { + background-color: rgba(0,0,0,0.5); +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-selected > .autocomplete-value, +.devtools-autocomplete-listbox:focus.dark-theme .autocomplete-selected > .initial-value { + color: hsl(208,100%,60%); +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-selected > span { + color: #eee; +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-item > span { + color: #ccc; +} + +.devtools-autocomplete-listbox .autocomplete-item > .initial-value, +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value { + margin: 0; + padding: 0; + cursor: default; +} + +.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count { + text-align: end; +} + +/* Rest of the dark and light theme */ + +.devtools-autocomplete-popup, +.theme-dark .CodeMirror-hints, +.theme-dark .CodeMirror-Tern-tooltip { + border: 1px solid hsl(210,11%,10%); + background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%)); +} + +.devtools-autocomplete-popup.light-theme, +.light-theme .CodeMirror-hints, +.light-theme .CodeMirror-Tern-tooltip { + border: 1px solid hsl(210,24%,90%); + background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%)); +} + +.devtools-autocomplete-popup.light-theme { + box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset; +} + +.theme-firebug .devtools-autocomplete-popup { + border-color: var(--theme-splitter-color); + border-radius: 5px; + font-size: var(--theme-autompletion-font-size); +} + +.devtools-autocomplete-popup.firebug-theme { + background: var(--theme-body-background); +} + +.devtools-autocomplete-listbox.firebug-theme .autocomplete-selected, +.devtools-autocomplete-listbox.firebug-theme .autocomplete-item:hover, +.devtools-autocomplete-listbox.light-theme .autocomplete-selected, +.devtools-autocomplete-listbox.light-theme .autocomplete-item:hover { + background-color: rgba(128,128,128,0.3); +} + +.devtools-autocomplete-listbox.firebug-theme .autocomplete-selected > .autocomplete-value, +.devtools-autocomplete-listbox:focus.firebug-theme .autocomplete-selected > .initial-value, +.devtools-autocomplete-listbox.light-theme .autocomplete-selected > .autocomplete-value, +.devtools-autocomplete-listbox:focus.light-theme .autocomplete-selected > .initial-value { + color: #222; +} + +.devtools-autocomplete-listbox.firebug-theme .autocomplete-item > span, +.devtools-autocomplete-listbox.light-theme .autocomplete-item > span { + color: #666; +} + +/* 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; +} + +/* links to source code, like displaying `myfile.js:45` */ + +.devtools-source-link { + font-family: var(--monospace-font-family); + color: var(--theme-highlight-blue); + cursor: pointer; + white-space: nowrap; + display: flex; + text-decoration: none; + font-size: 11px; + width: 12em; /* probably should be changed for each tool */ +} + +.devtools-source-link:hover { + text-decoration: underline; +} + +.devtools-source-link > .filename { + text-overflow: ellipsis; + text-align: end; + overflow: hidden; + margin: 2px 0px; + cursor: pointer; +} + +.devtools-source-link > .line-number { + flex: none; + margin: 2px 0px; + cursor: pointer; +} + +/* Keyboard focus highlight styles */ + +:-moz-focusring { + outline: var(--theme-focus-outline); + outline-offset: -1px; +} + +textbox[focused="true"] { + border-color: var(--theme-focus-border-color-textbox); + box-shadow: var(--theme-focus-box-shadow-textbox); + transition: all 0.2s ease-in-out +} + +textbox :-moz-focusring { + box-shadow: none; + outline: none; +} + +/* Form fields should already have box-shadow hightlight */ +select:-moz-focusring, +input[type="radio"]:-moz-focusring, +input[type="checkbox"]:-moz-focusring, +checkbox:-moz-focusring { + outline: none; +} + +/* Toolbar buttons */ +.devtools-menulist, +.devtools-toolbarbutton, +.devtools-button { + -moz-appearance: none; + background: transparent; + min-height: 18px; + text-shadow: none; + border: none; + border-radius: 0; + color: var(--theme-body-color); + transition: background 0.05s ease-in-out; +} + +.devtools-menulist, +.devtools-toolbarbutton { + -moz-box-align: center; + min-width: 78px; + padding: 1px; + margin: 2px 1px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, +.devtools-button::before { + width: 16px; + height: 16px; + transition: opacity 0.05s ease-in-out; +} + +/* HTML buttons */ +.devtools-button { + margin: 2px 1px; + padding: 1px; + min-width: 32px; + /* The icon is absolutely positioned in the button using ::before */ + position: relative; +} + +.devtools-button::before { + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-size: cover; + background-repeat: no-repeat; + transition: opacity 0.05s ease-in-out; +} + +.devtools-button:-moz-focusring { + outline: none; +} + +/* Standalone buttons */ +.devtools-button[standalone], +.devtools-button[data-standalone], +.devtools-toolbarbutton[standalone], +.devtools-toolbarbutton[data-standalone] { + border-width: 1px; + border-style: solid; + min-height: 32px; + background-color: var(--theme-toolbar-background); +} + +.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { + margin-inline-end: 5px; +} + +.devtools-toolbarbutton[label][standalone] { + min-height: 2em; +} + +.devtools-menulist, +.devtools-toolbarbutton, +.devtools-button { + border-color: var(--toolbar-button-border-color); +} + +/* Icon button styles */ +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 32px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { + margin: 0; +} + +/* Menu button styles (eg. web console filters) */ +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { + -moz-appearance: none; + color: inherit; + border-width: 0; + -moz-box-orient: horizontal; + padding: 0; +} + +.devtools-toolbarbutton[type=menu-button] { + padding: 0 1px; + -moz-box-align: stretch; +} + +.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + margin-inline-end: 4px; +} + +.devtools-menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); + -moz-box-align: center; + min-width: 16px; +} + +.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { + -moz-appearance: none !important; + list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); + -moz-box-align: center; + padding: 0 3px; +} + +/* Icon-only buttons */ +.devtools-button:empty::before, +.devtools-toolbarbutton:not([label]):not([disabled]) > image { + opacity: 0.8; +} + +.devtools-button:hover:empty:not(:disabled):before, +.devtools-button.checked:empty::before, +.devtools-button[checked]:empty::before, +.devtools-button[open]:empty::before, +.devtools-toolbarbutton:not([label]):not([disabled=true]):hover > image, +.devtools-toolbarbutton:not([label])[checked=true] > image, +.devtools-toolbarbutton:not([label])[open=true] > image { + opacity: 1; +} + +.devtools-button:disabled, +.devtools-button[disabled], +.devtools-toolbarbutton[disabled] { + opacity: 0.5 !important; +} + +.devtools-button[checked]:empty::before, +.devtools-button[open]:empty::before, +.devtools-button.checked::before, +.devtools-toolbarbutton:not([label])[checked=true] > image, +.devtools-toolbarbutton:not([label])[open=true] > image { + filter: var(--checked-icon-filter); +} + +/* Checked/opened icon button background */ +.theme-firebug .devtools-button[checked]:empty, +.theme-firebug .devtools-button[open]:empty, +.theme-firebug .devtools-button.checked, +.theme-firebug .devtools-toolbarbutton:not([label])[checked=true], +.theme-firebug .devtools-toolbarbutton:not([label])[open=true] { + background-color: #C8D8E7; +} + +/* Icon-and-text buttons */ +.devtools-toolbarbutton.icon-and-text .toolbarbutton-text { + margin-inline-start: .5em !important; + font-weight: 600; +} + +/* Text-only buttons */ +.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-light .devtools-toolbarbutton[data-text-only], +.theme-light .devtools-button:not(:empty) { + background-color: var(--toolbar-tab-hover); +} +.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-dark .devtools-toolbarbutton[data-text-only], +.theme-dark .devtools-button:not(:empty) { + background-color: rgba(0, 0, 0, .2); /* Splitter */ +} + +/* Text-only button states */ +.theme-dark .devtools-button:not(:empty):not(:disabled):hover, +.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-button:not(:empty):not(:disabled):hover, +.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-button:not(:empty):not(:disabled):hover:active, +.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-button:not(:empty):not(:disabled):hover:active, +.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active { + background: var(--toolbar-tab-hover-active); +} + +.theme-dark .devtools-toolbarbutton:not([disabled])[label][checked=true], +.theme-dark .devtools-toolbarbutton:not([disabled])[label][open], +.theme-dark .devtools-button:not(:empty)[checked=true] { + background: var(--theme-selection-background-semitransparent); + color: var(--theme-selection-color); +} +.theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true], +.theme-light .devtools-toolbarbutton:not([disabled])[label][open], +.theme-light .devtools-button:not(:empty)[checked=true] { + background: rgba(76, 158, 217, .3); /* Select highlight blue */ +} + +:root { + --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); +} + +.devtools-button.devtools-clear-icon::before { + background-image: var(--clear-icon-url); +} + +.devtools-button.devtools-filter-icon::before { + background-image: var(--filter-image); +} + +.devtools-toolbarbutton.devtools-clear-icon { + list-style-image: var(--clear-icon-url); +} + +.devtools-option-toolbarbutton { + list-style-image: var(--tool-options-image); +} + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { + margin-inline-end: 0; +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { + margin-inline-start: 3px; +} + +.devtools-separator + .devtools-toolbarbutton { + margin-inline-start: 1px; +} + +/* + * Filter buttons + * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands + */ +.menu-filter-button { + -moz-appearance: none; + background: rgba(128,128,128,0.1); + border: none; + border-radius: 2px; + min-width: 0; + padding: 0 5px; + margin: 2px; + color: var(--theme-body-color); +} + +.menu-filter-button:hover { + background: rgba(128,128,128,0.2); +} + +.menu-filter-button:hover:active { + background-color: var(--theme-selection-background-semitransparent); +} + +.menu-filter-button:not(:active).checked { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput, +.devtools-filterinput { + -moz-appearance: none; + margin: 1px 3px; + border: 1px solid; + border-radius: 2px; + padding: 4px 6px; + border-color: var(--theme-splitter-color); + font: message-box; +} + +:root[platform="mac"] .devtools-textinput, +:root[platform="mac"] .devtools-searchinput, +:root[platform="mac"] .devtools-filterinput { + border-radius: 20px; +} + +.devtools-searchinput, +.devtools-filterinput { + padding: 0; + padding-inline-start: 22px; + padding-inline-end: 4px; + background-position: 8px center; + background-size: 11px 11px; + background-repeat: no-repeat; + font-size: inherit; +} + +/* + * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it + * once we have a standardized search and filter input across the toolboxes. + */ +.has-clear-btn > .devtools-searchinput, +.has-clear-btn > .devtools-filterinput { + padding-inline-end: 23px; +} + +.devtools-searchinput { + background-image: var(--magnifying-glass-image); +} + +.devtools-filterinput { + background-image: url(chrome://devtools/skin/images/filter.svg#filterinput); +} + +.devtools-searchinput:-moz-locale-dir(rtl), +.devtools-searchinput:dir(rtl), +.devtools-filterinput:-moz-locale-dir(rtl), +.devtools-filterinput:dir(rtl) { + background-position: calc(100% - 8px) center; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { + visibility: hidden; +} + +.devtools-searchinput .textbox-input::placeholder, +.devtools-filterinput .textbox-input::placeholder { + font-style: normal; +} + +.devtools-plaininput { + border-color: transparent; + background-color: transparent; +} + +.theme-dark .devtools-plaininput { + color: var(--theme-highlight-gray); +} + +/* Searchbox is a div container element for a search input element */ +.devtools-searchbox { + display: inline-flex; + flex: 1; + height: 23px; + position: relative; + padding: 0 3px; +} + +/* The spacing is accomplished with a padding on the searchbox */ +.devtools-searchbox > .devtools-textinput, +.devtools-searchbox > .devtools-searchinput, +.devtools-searchbox > .devtools-filterinput { + margin-left: 0; + margin-right: 0; + width: 100%; +} + +.devtools-textinput:focus, +.devtools-searchinput:focus, +.devtools-filterinput:focus { + border-color: var(--theme-focus-border-color-textbox); + box-shadow: var(--theme-focus-box-shadow-textbox); + transition: all 0.2s ease-in-out; + outline: none; +} + +/* Don't add 'double spacing' for inputs that are at beginning / end + of a toolbar (since the toolbar has it's own spacing). */ +.devtools-toolbar > .devtools-textinput:first-child, +.devtools-toolbar > .devtools-searchinput:first-child, +.devtools-toolbar > .devtools-filterinput:first-child { + margin-inline-start: 0; +} +.devtools-toolbar > .devtools-textinput:last-child, +.devtools-toolbar > .devtools-searchinput:last-child, +.devtools-toolbar > .devtools-filterinput:last-child { + margin-inline-end: 0; +} +.devtools-toolbar > .devtools-searchbox:first-child { + padding-inline-start: 0; +} +.devtools-toolbar > .devtools-searchbox:last-child { + padding-inline-end: 0; +} + +.devtools-rule-searchbox { + -moz-box-flex: 1; + width: 100%; +} + +.devtools-filterinput:-moz-any([filled],.filled) { + background-color: var(--searchbox-background-color); + border-color: var(--searchbox-border-color); +} + +.devtools-style-searchbox-no-match { + background-color: var(--searcbox-no-match-background-color) !important; + border-color: var(--searcbox-no-match-border-color) !important; +} + +.devtools-searchinput-clear { + position: absolute; + top: 3.5px; + offset-inline-end: 7px; + padding: 0; + border: 0; + width: 16px; + height: 16px; + background-position: 0 0; + background-repeat: no-repeat; + background-color: transparent; +} + +.devtools-searchinput-clear:dir(rtl) { + right: unset; + left: 7px; +} + +.theme-dark .devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/images/search-clear-dark.svg"); +} + +.theme-light .devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/images/search-clear-light.svg"); +} + +.devtools-style-searchbox-no-match + .devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important; +} + +.devtools-searchinput-clear:hover { + background-position: -16px 0; +} + +.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear, +.theme-dark .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { + list-style-image: url("chrome://devtools/skin/images/search-clear-dark.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear, +.theme-light .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { + list-style-image: url("chrome://devtools/skin/images/search-clear-light.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { + margin-bottom: 0; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +/* Twisty and checkbox controls */ +.theme-twisty, .theme-checkbox { + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-image: url("chrome://devtools/skin/images/controls.png"); + background-size: 56px 28px; +} + +.theme-twisty { + cursor: pointer; + background-position: 0 -14px; +} + +.theme-selected ~ .theme-twisty, +.theme-dark .theme-twisty { + background-position: -28px -14px; +} + +.theme-twisty:-moz-focusring { + outline-style: none; +} + +.theme-twisty[open], .theme-twisty.open { + background-position: -14px -14px; +} + +.theme-selected ~ .theme-twisty[open], +.theme-dark .theme-twisty[open], .theme-dark .theme-twisty.open { + background-position: -42px -14px; +} + +.theme-twisty[invisible] { + visibility: hidden; +} + +/* Mirror the twisty for rtl direction */ +.theme-twisty:dir(rtl), +.theme-twisty:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.theme-checkbox { + display: inline-block; + border: 0; + padding: 0; + outline: none; + background-position: 0 0; +} + +.theme-dark .theme-checkbox { + background-position: -28px 0; +} + +.theme-checkbox[checked] { + background-position: -14px 0; +} + +.theme-dark .theme-checkbox[checked] { + background-position: -42px 0; +} + +@media (min-resolution: 1.1dppx) { + .theme-twisty, .theme-checkbox { + background-image: url("chrome://devtools/skin/images/controls@2x.png"); + } +} + +/* 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); + } +} diff --git a/devtools/client/themes/components-frame.css b/devtools/client/themes/components-frame.css new file mode 100644 index 000000000..cbdc3d2cf --- /dev/null +++ b/devtools/client/themes/components-frame.css @@ -0,0 +1,53 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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` + */ + +.frame-link { + display: flex; + justify-content: space-between; +} + +.frame-link-async-cause { + color: var(--theme-body-color-inactive); +} + +.frame-link .frame-link-source { + flex: initial; + color: var(--theme-highlight-blue); +} + +.frame-link a.frame-link-source { + cursor: pointer; + text-decoration: none; + font-style: normal; +} + +.frame-link a.frame-link-source:hover { + text-decoration: underline; +} + +.frame-link .frame-link-host { + margin-inline-start: 5px; + font-size: 90%; + color: var(--theme-content-color2); +} + +.frame-link .frame-link-function-display-name { + margin-inline-end: 5px; +} + +.frame-link .frame-link-line { + color: var(--theme-highlight-orange); +} + +.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 000000000..270b007c7 --- /dev/null +++ b/devtools/client/themes/components-h-split-box.css @@ -0,0 +1,24 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/h-split-box.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 000000000..d36637ac9 --- /dev/null +++ b/devtools/client/themes/computed.css @@ -0,0 +1,237 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +#sidebar-panel-computedview { + margin: 0; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + +#computedview-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. */ +#computedview-container-focusable { + height: 100%; + outline: none; +} + +#computedview-toolbar { + display: flex; + align-items: center; +} + +#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 { + padding-inline-start: 5px; + margin-inline-end: 5px; +} + +#propertyContainer { + -moz-user-select: text; + overflow-y: auto; + overflow-x: hidden; + flex: auto; +} + +.row-striped { + background: var(--theme-body-background); +} + +.property-view-hidden, +.property-content-hidden { + display: none; +} + +.property-view { + padding: 2px 0px; + padding-inline-start: 5px; + display: flex; + flex-wrap: wrap; +} + +.property-name-container { + width: 202px; +} + +.property-value-container { + display: flex; + flex: 1 1 168px; + overflow: hidden; +} + +.property-name-container > *, +.property-value-container > * { + display: inline-block; + vertical-align: middle; +} + +.property-name { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + outline: 0 !important; +} + +.other-property-value { + background-image: url(images/arrow-e.png); + background-repeat: no-repeat; + background-size: 5px 8px; +} + +@media (min-resolution: 1.1dppx) { + .other-property-value { + background-image: url(images/arrow-e@2x.png); + } +} + +.property-value { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-inline-start: 14px; + outline: 0 !important; +} + +.other-property-value { + background-position: left center; + padding-inline-start: 8px; +} + +.other-property-value:dir(rtl) { + background-position-x: right; +} + +.property-content { + padding-inline-start: 17px; +} + +.theme-firebug .property-view, +.theme-firebug .property-content { + font-family: var(--proportional-font-family); +} + +.theme-firebug .property-view { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +/* From skin */ +.expander { + visibility: hidden; +} + +.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: rgba(128,128,128,0.4); + border-width: 1px 1px 0 1px; +} + +.matchedselectors > p:last-of-type { + border-bottom-width: 1px; +} + +.matched { + text-decoration: line-through; +} + +.parentmatch { + opacity: 0.5; +} + +#computedview-no-results { + height: 100%; +} + +.onlyuserstyles { + cursor: pointer; +} + +.legendKey { + margin: 0 5px; +} + +.link { + padding: 0 3px; + cursor: pointer; + float: right; +} + +/* Workaround until float: inline-end; is enabled by default */ +.link:dir(rtl) { + float: left; +} + +/* Take away these two :visited rules to get a core dumper */ +/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ + +.link, +.link:visited { + color: #0091ff; +} + +.link, +.helplink, +.link:visited, +.helplink:visited { + text-decoration: none; +} + +.link:hover { + text-decoration: underline; +} + +.computedview-colorswatch { + border-radius: 50%; + width: 0.9em; + height: 0.9em; + vertical-align: middle; + margin-inline-end: 5px; + display: inline-block; + position: relative; +} + +.computedview-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 000000000..2035f8b22 --- /dev/null +++ b/devtools/client/themes/dark-theme.css @@ -0,0 +1,348 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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(resource://devtools/client/themes/variables.css); +@import url(resource://devtools/client/themes/common.css); +@import url(toolbars.css); +@import url(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-content-color1); +} + +::-moz-selection { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-darker { + background-color: var(--theme-selection-background-semitransparent); +} + +.theme-selected, +.CodeMirror-hint-active { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-contrast, +.variable-or-property:not([overridden])[changed] { + background: var(--theme-contrast-background); +} + +.theme-link, +.cm-s-mozilla .cm-link, +.cm-s-mozilla .cm-keyword { + color: var(--theme-highlight-green); +} + +/* + * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion + * failures in debug builds. + */ +.theme-link:visited, +.cm-s-mozilla .cm-link:visited, +.CodeMirror-Tern-type { + color: var(--theme-highlight-blue); +} + + +.theme-comment, +.cm-s-mozilla .cm-meta, +.cm-s-mozilla .cm-hr, +.cm-s-mozilla .cm-comment, +.variable-or-property .token-undefined, +.variable-or-property .token-null, +.CodeMirror-Tern-completion-unknown:before { + color: var(--theme-comment); +} + +.theme-gutter { + background-color: var(--theme-tab-toolbar-background); + color: var(--theme-content-color3); + border-color: var(--theme-splitter-color); +} + +.theme-separator { + border-color: var(--theme-splitter-color); +} + +.theme-fg-color1, +.cm-s-mozilla .cm-number, +.variable-or-property .token-number, +.variable-or-property[return] > .title > .name, +.variable-or-property[scope] > .title > .name { + color: var(--theme-highlight-red); +} + +.CodeMirror-Tern-completion-number:before { + background-color: #5c9966; +} + +.theme-fg-color2, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-def, +.cm-s-mozilla .cm-property, +.cm-s-mozilla .cm-qualifier, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-purple); +} + +.CodeMirror-Tern-completion-object:before { + background-color: #3689b2; +} + +.cm-s-mozilla .cm-unused-line { + text-decoration: line-through; + text-decoration-color: #0072ab; +} + +.cm-s-mozilla .cm-executed-line { + background-color: #133c26; +} + +.theme-fg-color3, +.cm-s-mozilla .cm-builtin, +.cm-s-mozilla .cm-tag, +.cm-s-mozilla .cm-header, +.cm-s-mozilla .cm-bracket, +.variables-view-property > .title > .name { + color: var(--theme-highlight-green); +} + +.CodeMirror-Tern-completion-array:before { + background-color: var(--theme-highlight-bluegrey); +} + +.theme-fg-color4 { + color: var(--theme-highlight-purple); +} + +.theme-fg-color5 { + color: var(--theme-highlight-purple); +} + +.theme-fg-color6, +.cm-s-mozilla .cm-string, +.cm-s-mozilla .cm-string-2, +.variable-or-property .token-string, +.cm-s-mozilla .cm-variable, +.CodeMirror-Tern-farg { + color: var(--theme-highlight-gray); +} + +.CodeMirror-Tern-completion-string:before, +.CodeMirror-Tern-completion-fn:before { + background-color: #b26b47; +} + +.theme-fg-color7, +.cm-s-mozilla .cm-atom, +.cm-s-mozilla .cm-quote, +.cm-s-mozilla .cm-error, +.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-alt); + background-color: var(--theme-toolbar-background); + border-color: var(--theme-splitter-color); +} + +.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ + color: black; +} + +.ruleview-swatch, +.computedview-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, +.cm-s-mozilla .cm-variable-2, +.cm-s-mozilla .cm-variable-3, +.cm-s-mozilla .cm-operator, +.cm-s-mozilla .cm-special { + color: var(--theme-content-color1); +} + +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { + border-left: solid 1px #fff; +} + +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ + background: rgb(185, 215, 253); +} + +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ + background: rgb(176, 176, 176); +} + +.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; +} + +/* Highlight for evaluating current statement. */ +div.CodeMirror span.eval-text { + background-color: #556; +} + +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ + color: var(--theme-content-color3); +} + +.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ + border-right-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); +} + +.cm-s-markup-view pre { + line-height: 1.4em; + min-height: 1.4em; +} + +/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */ + +.theme-tooltip-panel .panel-arrowcontent { + padding: 5px; + background: rgba(19, 28, 38, .9); + border-radius: 5px; + box-shadow: none; + border: 3px solid #434850; +} + +/* Overring panel arrow images to fit with our light and dark themes */ + +.theme-tooltip-panel .panel-arrow { + --arrow-margin: -4px; +} + +:root[platform="win"] .theme-tooltip-panel .panel-arrow { + --arrow-margin: -7px; +} + +.theme-tooltip-panel .panel-arrow[side="top"], +.theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png"); + /* !important is needed to override the popup.css rules in toolkit/themes */ + width: 39px !important; + height: 16px !important; +} + +.theme-tooltip-panel .panel-arrow[side="left"], +.theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png"); + /* !important is needed to override the popup.css rules in toolkit/themes */ + width: 16px !important; + height: 39px !important; +} + +.theme-tooltip-panel .panel-arrow[side="top"] { + margin-bottom: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + margin-top: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + margin-right: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="right"] { + margin-left: var(--arrow-margin); +} + +@media (min-resolution: 1.1dppx) { + .theme-tooltip-panel .panel-arrow[side="top"], + .theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png"); + } + + .theme-tooltip-panel .panel-arrow[side="left"], + .theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png"); + } +} + +.theme-tooltip-panel .devtools-tooltip-simple-text { + color: white; + border-bottom: 1px solid #434850; +} + +.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { + border-bottom: 0; +} + +.devtools-textinput, +.devtools-searchinput, +.devtools-filterinput { + background-color: rgba(24, 29, 32, 1); + color: rgba(184, 200, 217, 1); +} + +.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/debugger.css b/devtools/client/themes/debugger.css new file mode 100644 index 000000000..3f2d49a0f --- /dev/null +++ b/devtools/client/themes/debugger.css @@ -0,0 +1,670 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* Sources and breakpoints pane */ + +#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter { + border-color: transparent; +} + +#sources-pane > tabs { + border-inline-end: 1px solid; +} + +#sources-pane .devtools-toolbar { + border: none; /* Remove the devtools-toolbar bottom border. */ + border-inline-end: 1px solid; +} + +#sources-pane > tabs, +#sources-pane .devtools-toolbar { + border-inline-end-color: var(--theme-splitter-color); +} + +/* Sources and breakpoints list */ + +.dbg-source-item { + padding: 2px 0px; +} + +.dbg-wasm-item .icon { + display: block; + background-image: url(chrome://devtools/skin/images/webconsole.svg); + background-repeat: no-repeat; + background-size: 72px 60px; + /* show warning icon */ + background-position: -24px -24px; + width: 10px; + height: 10px; + position: absolute; + margin-inline-start: -15px; + margin-top: 3px; +} + +.dbg-breakpoint-line { + font-weight: 600; +} + +.dbg-breakpoint-text { + padding-inline-start: 6px; + font-style: italic; + font-size: 90%; +} + +.dbg-breakpoint-checkbox { + width: 16px; + height: 16px; + margin: 2px; +} + +/* Firebug theme uses breakpoint icon istead of a checkbox */ + +.theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check { + -moz-appearance: none; + border: none; + background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%; +} + +.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) > .checkbox-check, +.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) ~ * { + opacity: 0.5; +} + +.theme-firebug #sources-pane .dbg-breakpoint-checkbox { + padding-inline-end: 0; + margin-inline-end: 0; +} + +.dbg-breakpoint-condition-thrown-message { + display: none; + color: var(--theme-highlight-red); +} + +.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message { + display: block; + padding-inline-start: 0; +} + +/* Sources toolbar */ + +#sources-toolbar > .devtools-toolbarbutton, +#sources-controls > .devtools-toolbarbutton { + min-width: 32px; +} + +#black-box { + list-style-image: url(images/item-toggle.svg); +} + +.theme-firebug #black-box { + list-style-image: url(images/firebug/debugger-blackbox.svg); +} + +#pretty-print { + list-style-image: url(images/tool-styleeditor.svg); +} + +.theme-firebug #pretty-print { + list-style-image: url(images/firebug/debugger-prettyprint.svg); +} + +#toggle-breakpoints { + list-style-image: url(images/debugger-toggleBreakpoints.svg); + -moz-image-region: rect(0,32px,16px,16px); +} + +.theme-firebug #toggle-breakpoints { + list-style-image: url(images/firebug/debugger-toggleBreakpoints.svg); + -moz-image-region: unset; +} + +#toggle-breakpoints[checked] { + -moz-image-region: rect(0,16px,16px,0); +} + +#toggle-breakpoints[checked] > image { + /* This button has a special checked image, don't make it blue */ + filter: none; +} + +#sources .black-boxed { + color: rgba(128,128,128,0.4); +} + +#sources .selected .black-boxed { + color: rgba(255,255,255,0.4); +} + +#sources .black-boxed ~ .dbg-breakpoint { + display: none; +} + +/* Debugger unblackbox button */ + +#black-boxed-message-button > .button-box > .button-icon { + width: 16px; + height: 16px; + background-image: url(images/item-toggle.svg); + background-position: 0 0; + background-size: cover; +} + +/* Black box message and source progress meter */ + +#black-boxed-message, +#source-progress-container { + /* Prevent the container deck from aquiring the size from this message. */ + min-width: 1px; + min-height: 1px; +} + +#source-progress { + min-height: 2em; + min-width: 40em; +} + +#black-boxed-message-label, +#black-boxed-message-button { + text-align: center; + font-size: 120%; +} + +#black-boxed-message-button { + margin-top: 1em; + padding: .25em; +} + +/* Breadcrumbs stack frames view */ + +.dbg-stackframe-details { + padding-inline-start: 4px; +} + +/* Classic stack frames view */ + +.dbg-classic-stackframe { + display: block; +} + +.dbg-classic-stackframe-title { + font-weight: 600; +} + +.dbg-classic-stackframe-details:-moz-locale-dir(ltr) { + float: right; +} + +.dbg-classic-stackframe-details:-moz-locale-dir(rtl) { + float: left; +} + +.dbg-classic-stackframe-details-url { + max-width: 90%; + text-align: end; +} + +.dbg-classic-stackframe-details-url { + color: var(--theme-content-color1); +} + +.dbg-classic-stackframe-details-sep { + color: var(--theme-body-color-alt) +} + +.dbg-classic-stackframe-details-line { + color: var(--theme-highlight-bluegrey); +} + +#callstack-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Tracer */ + +#trace { + list-style-image: url(images/tracer-icon.png); +} + +@media (min-resolution: 1.1dppx) { + #trace { + list-style-image: url(images/tracer-icon@2x.png); + } +} + +#clear-tracer { + /* Make this button as narrow as the text inside it. */ + min-width: 1px; +} + +.trace-name { + padding-inline-start: 4px; +} + +/* Tracer dark theme */ + +.theme-dark .trace-item { + color: var(--theme-selection-color); +} + +.theme-dark .trace-item.black-boxed { + color: rgba(128,128,128,0.4); +} + +.theme-dark .trace-item.selected-matching { + background-color: rgba(86, 117, 185, .4); /* Select highlight blue at 40% alpha */ +} + +.theme-dark .selected > .trace-item { + background-color: rgba(86, 117, 185, .6); /* Select highlight blue at 60% alpha */ +} + +.trace-call { + color: var(--theme-highlight-blue); +} + +.trace-return, +.trace-yield { + color: var(--theme-highlight-green); +} + +.trace-throw { + color: var(--theme-highlight-red); +} + +.trace-param { + color: var(--theme-content-color1); +} + +.theme-dark .trace-syntax { + color: var(--theme-content-color2); +} + +/* Tracer light theme */ +.theme-light .trace-item { + color: var(--theme-content-color1); +} + +.theme-light .trace-item.black-boxed { + color: rgba(128,128,128,0.4); +} + +.theme-light .trace-item.selected-matching { + background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */ +} + +.theme-light .selected > .trace-item { + background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */ +} + +#tracer-traces .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Watch expressions view */ + +#expressions { + min-height: 10px; + max-height: 125px; +} + +.dbg-expression { + height: 20px; +} + +.dbg-expression-arrow { + background-image: var(--theme-command-line-image-focus); + width: 16px; + height: 16px; + margin: 2px; +} + +.dbg-expression-input { + color: inherit; +} + +.dbg-expression-button { + -moz-appearance: none; + border: none; + background: none; + text-decoration: underline; + cursor: pointer; +} + +.dbg-expression-button { + color: var(--theme-highlight-blue); +} + +/* Event listeners view */ + +.dbg-event-listener-type { + font-weight: 600; +} + +.dbg-event-listener-location { + color: var(--theme-content-color1); +} + +.dbg-event-listener-separator { + color: var(--theme-body-color-alt); +} + +.dbg-event-listener-targets { + color: var(--theme-highlight-bluegrey); +} + +.theme-dark #event-listeners .selected { + /* Selected items shouldn't be displayed differently. */ + background: none; + color: #fff; +} + +.theme-light #event-listeners .selected { + /* Selected items shouldn't be displayed differently. */ + background: none; + color: #000; +} + +/* Searchbox and the search operations help panel */ + +#searchbox { + min-width: 220px; + margin-inline-start: 1px; +} + +#filter-label { + margin-inline-start: 2px; +} + +#searchbox-panel-operators { + margin-top: 5px; + margin-bottom: 8px; + margin-inline-start: 2px; +} + +.searchbox-panel-operator-button { + min-width: 26px; + margin-top: 0; + margin-bottom: 0; + margin-inline-start: 2px; + margin-inline-end: 6px; + text-align: center; +} + +.searchbox-panel-operator-label { + padding-bottom: 2px; +} + +/* Searchbox results panel */ + +#results-panel { + border: none; +} + +.results-panel-item { + padding: 6px 8px; + border-top: 1px solid rgba(128,128,128,0.2); +} + +.results-panel-item:first-of-type { + border-top: none; +} + +.results-panel-item-label { + font-weight: 600; +} + +.results-panel-item-label-before { + padding-inline-end: 6px; +} + +.theme-dark .results-panel-item-label { + color: var(--theme-selection-color); +} + +.theme-light .results-panel-item-label { + color: var(--theme-body-color); +} + +.results-panel-item-label-before { + color: var(--theme-highlight-bluegrey); +} + +.results-panel-item-label-below { + color: var(--theme-content-color3); +} + +#results-panel .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Sources search view */ + +#globalsearch { + min-height: 10px; + max-height: 50vh; +} + +.dbg-results-header { + padding-inline-start: 6px; +} + +.dbg-results-header-location { + font-weight: 600; +} + +.dbg-results-header-match-count { + padding-inline-start: 6px; +} + +.dbg-results-line-number { + min-width: 3em; + border-inline-end: 1px solid rgba(128,128,128,0.2); + padding-inline-end: 4px; + text-align: end; +} + +.dbg-results-line-contents { + padding-inline-start: 4px; +} + +.dbg-results-line-contents-string[match=true] { + background-color: rgba(255,255,0,0.2); + border: 1px solid rgba(128,128,128,0.7); + border-radius: 4px; + margin-top: -1px !important; + margin-bottom: -1px !important; + cursor: pointer; +} + +.dbg-results-line-contents-string[match=true][focusing] { + transition: transform 0.3s ease-in-out; +} + +.dbg-results-line-contents-string[match=true][focused] { + transition-duration: 0.1s; + transform: scale(1.75, 1.75); +} + +.dbg-source-results:not(.selected):hover { + background-color: var(--theme-sidebar-background); +} + +.dbg-results-header { + background-color: var(--theme-tab-toolbar-background); +} + +.theme-dark .dbg-results-header { + color: var(--theme-content-color1); +} + +.theme-light .dbg-results-header { + color: var(--theme-content-color3); +} + +.theme-dark .dbg-search-result:hover { + background-color: rgba(86, 117, 185, .2); /* Select highlight blue at 40% alpha */ +} + +.theme-light .dbg-search-result:hover { + background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */ +} + +.dbg-results-header-match-count { + color: var(--theme-content-color3); +} + +.dbg-results-line-number { + background-color: var(--theme-tab-toolbar-background); + color: var(--theme-body-color-alt); +} + +.dbg-results-line-contents-string { + color: var(--theme-body-color-alt); +} + +.theme-dark .dbg-results-line-contents-string[match=true] { + color: var(--theme-selection-color); +} + +.theme-light .dbg-results-line-contents-string[match=true] { + color: var(--theme-body-color); +} + +/* Toolbar controls */ + +#resume { + list-style-image: url(images/pause.svg); +} + +#resume[checked] { + list-style-image: url(images/play.svg); +} + +.theme-firebug #resume { + list-style-image: url(images/firebug/pause.svg); +} + +.theme-firebug #resume[checked] { + list-style-image: url(images/firebug/play.svg); +} + +#resume[break-on-next] { + background: var(--theme-highlight-lightorange); +} + +#step-over { + list-style-image: url(images/debugger-step-over.svg); +} + +#step-in { + list-style-image: url(images/debugger-step-in.svg); +} + +#step-out { + list-style-image: url(images/debugger-step-out.svg); +} + +.theme-firebug #step-over { + list-style-image: url(images/firebug/debugger-step-over.svg); +} + +.theme-firebug #step-in { + list-style-image: url(images/firebug/debugger-step-in.svg); +} + +.theme-firebug #step-out { + list-style-image: url(images/firebug/debugger-step-out.svg); +} + +#instruments-pane-toggle { + list-style-image: var(--theme-pane-collapse-image); +} + +#instruments-pane-toggle.pane-collapsed { + list-style-image: var(--theme-pane-expand-image); +} + +/* Horizontal vs. vertical layout */ + +#vertical-layout-panes-container { + min-height: 35vh; + max-height: 80vh; +} + +#body[layout=vertical] #sources-pane > tabs { + border-inline-end: none; +} + +#body[layout=vertical] #instruments-pane { + margin: 0 !important; + /* To prevent all the margin hacks to hide the sidebar. */ +} + +#body[layout=vertical] .side-menu-widget-container, +#body[layout=vertical] .side-menu-widget-empty-text { + box-shadow: none !important; +} + +#body[layout=vertical] .side-menu-widget-item-arrow { + background-image: none !important; +} + +#body[layout=vertical] .side-menu-widget-group, +#body[layout=vertical] .side-menu-widget-item { + margin-inline-end: 0; +} + +/* Firebug theme customization of source group title */ +.theme-firebug #sources-pane .side-menu-widget-group-title { + border-bottom: none; + padding: 2px 4px; + background: var(--theme-header-background); + font-weight: bold; +} + +/* Sections titles (toolbars) in Variables panel they have different height */ +.theme-firebug #variables-tabpanel .title.devtools-toolbar { + display: -moz-box; + height: 20px !important; +} + +/* Firebug theme support for the Callstack Panel */ + +.theme-firebug #callstack-list { + font-family: var(--proportional-font-family); +} + +.theme-firebug #callstack-list .dbg-classic-stackframe-title { + color: var(--theme-content-color2); + font-weight: normal; + font-family: monospace; +} + +.theme-firebug #callstack-list .side-menu-widget-item { + padding-top: 2px; + padding-bottom: 2px; +} + +.theme-firebug #callstack-list .dbg-classic-stackframe-details-url, +.theme-firebug #callstack-list .dbg-classic-stackframe-details-sep, +.theme-firebug #callstack-list .dbg-classic-stackframe-details-line { + color: blue; + font-weight: bold; +} + +.theme-firebug #callstack-list .side-menu-widget-item { + margin: 0 4px; +} + +.theme-firebug #callstack-list .side-menu-widget-item.selected { + color: var(--theme-selection-color); +} + +.theme-firebug #callstack-list .side-menu-widget-item:first-child { + border-top: none; +} diff --git a/devtools/client/themes/devtools-browser.css b/devtools/client/themes/devtools-browser.css new file mode 100644 index 000000000..de846b8f3 --- /dev/null +++ b/devtools/client/themes/devtools-browser.css @@ -0,0 +1,26 @@ +/* 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("resource://devtools/client/themes/splitters.css"); + +/* Bottom-docked toolbox minimize transition */ +.devtools-toolbox-bottom-iframe { + transition: margin-bottom .1s; +} + +.devtools-toolbox-side-iframe { + min-width: 465px; +} + +/* Eyedropper Widget */ +/* added to mainPopupSet */ + +.devtools-eyedropper-panel { + pointer-events: none; + -moz-appearance: none; + width: 156px; + height: 120px; + background-color: transparent; + border: none; +} diff --git a/devtools/client/themes/dom.css b/devtools/client/themes/dom.css new file mode 100644 index 000000000..53eb8bb28 --- /dev/null +++ b/devtools/client/themes/dom.css @@ -0,0 +1,9 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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.theme-dark { +} +:root.theme-light { +} diff --git a/devtools/client/themes/firebug-theme.css b/devtools/client/themes/firebug-theme.css new file mode 100644 index 000000000..ea06235c9 --- /dev/null +++ b/devtools/client/themes/firebug-theme.css @@ -0,0 +1,235 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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(resource://devtools/client/themes/variables.css); +@import url(resource://devtools/client/themes/common.css); +@import url(light-theme.css); + +:root { + font-size: 11px; + font-family: var(--proportional-font-family); +} + +/* CodeMirror Color Syntax */ + +.theme-firebug .cm-keyword {color: BlueViolet; font-weight: bold;} +.theme-firebug .cm-atom {color: #219;} +.theme-firebug .cm-number {color: #164;} +.theme-firebug .cm-def {color: #00f;} +.theme-firebug .cm-variable {color: black;} +.theme-firebug .cm-variable-2 {color: black;} +.theme-firebug .cm-variable-3 {color: black;} +.theme-firebug .cm-property {color: black;} +.theme-firebug .cm-operator {color: black;} +.theme-firebug .cm-comment {color: Silver;} +.theme-firebug .cm-string {color: Red;} +.theme-firebug .cm-string-2 {color: Red;} +.theme-firebug .cm-meta {color: rgb(120, 120, 120); font-style: italic;} +.theme-firebug .cm-error {color: #f00;} +.theme-firebug .cm-qualifier {color: #555;} +.theme-firebug .cm-builtin {color: #30a;} +.theme-firebug .cm-bracket {color: #997;} +.theme-firebug .cm-tag {color: blue;} +.theme-firebug .cm-attribute {color: rgb(0, 0, 136);} +.theme-firebug .cm-header {color: blue;} +.theme-firebug .cm-quote {color: #090;} +.theme-firebug .cm-hr {color: #999;} +.theme-firebug .cm-link {color: #00c;} + +.theme-firebug .theme-fg-color3, +.theme-firebug .cm-s-mozilla .kind-Object .cm-variable{ /* dark blue */ + color: #006400; + font-style: normal; + font-weight: bold; +} + +.theme-firebug .console-string { + color: #FF183C; +} + +/* Variables View */ + +.theme-firebug .variables-view-variable > .title > .name, +.theme-firebug .variables-view-variable > .title > .value { + color: var(--theme-body-color); +} + +/* Firebug theme support for tabbar and panel tabs + (both, main and side panels )*/ + +/* Only apply bottom-border for: + 1) The main tab list. + 2) The side tab list if there is no scroll-box that has its own border. + + Use !important to override even the rule in webconsole.css that uses + ID in the selector. */ +.theme-firebug .devtools-tabbar, +.theme-firebug .devtools-sidebar-tabs tabs { + background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0)); + border-bottom: 1px solid rgb(170, 188, 207) !important; +} + +.theme-firebug .devtools-sidebar-tabs tabs { + background-color: var(--theme-tab-toolbar-background) !important; + background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)); +} + +/* Add a negative bottom margin to overlap bottom border + of the parent element (see also the next comment for 'tabs') */ +.theme-firebug .devtools-tab, +.theme-firebug .devtools-sidebar-tabs tab { + margin: 3px 0 -1px 0; + padding: 2px 0 0 0; + border: 1px solid transparent !important; + border-radius: 4px 4px 0 0; + font-weight: bold; + color: var(--theme-body-color); + -moz-box-flex: initial; + min-width: 0; +} + +/* Also add negative bottom margin for side panel tabs*/ +.theme-firebug .devtools-sidebar-tabs tab { +} + +/* In order to hide bottom-border of side panel tabs we need + to make the parent element overflow visible, so child element + can move one pixel down to hide the bottom border of the parent. */ +.theme-firebug .devtools-sidebar-tabs tabs { + overflow: visible; +} + +.theme-firebug .devtools-tab:hover, +.theme-firebug .devtools-sidebar-tabs tab:hover { + border: 1px solid #C8C8C8 !important; + border-bottom: 1px solid transparent; +} + +.theme-firebug .devtools-tab[selected], +.theme-firebug .devtools-sidebar-tabs tab[selected] { + background-color: rgb(247, 251, 254); + border: 1px solid rgb(170, 188, 207) !important; + border-bottom-width: 0 !important; + padding-bottom: 2px; + color: inherit; +} + +.theme-firebug .devtools-tab spacer, +.theme-firebug .devtools-tab image { + display: none; +} + +.theme-firebug .toolbox-tab label { + margin: 0; +} + +.theme-firebug .devtools-sidebar-tabs tab label { + margin: 2px 0 0 0; +} + +/* Use different padding for labels inside tabs on Win platform. + Make sure this overrides the default in global.css */ +:root[platform="win"].theme-firebug .devtools-sidebar-tabs tab label { + margin: 0 4px !important; +} + +.theme-firebug #panelSideBox .devtools-tab[selected], +.theme-firebug .devtools-sidebar-tabs tab[selected] { + background-color: white; +} + +.theme-firebug #panelSideBox .devtools-tab:first-child, +.theme-firebug .devtools-sidebar-tabs tab:first-child { + margin-inline-start: 5px; +} + +/* Firebug theme support for the Option (panel) tab */ + +.theme-firebug #toolbox-tab-options { + margin-inline-end: 4px; + background-color: white; +} + +.theme-firebug #toolbox-tab-options::before { + content: url(chrome://devtools/skin/images/firebug/tool-options.svg); + display: block; + margin: 4px 7px 0; +} + +.theme-firebug #toolbox-tab-options:not([selected]):hover::before { + filter: brightness(80%); +} + +/* Toolbar */ + +.theme-firebug .theme-toolbar, +.theme-firebug toolbar, +.theme-firebug .devtools-toolbar { + border-bottom: 1px solid rgb(170, 188, 207) !important; + background-color: var(--theme-tab-toolbar-background) !important; + background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)); + padding-inline-end: 4px; +} + +/* The vbox for panel content also uses theme-toolbar class from some reason + but it shouldn't have the padding as defined above, so fix it here */ +.theme-firebug #toolbox-deck > .toolbox-panel.theme-toolbar { + padding-inline-end: 0; +} + +/* Space around toolbar buttons */ +.theme-firebug .devtools-toolbar { + padding: 3px; +} + +/* The height is the same for all toolbars and side panels tabs */ +.theme-firebug .theme-toolbar, +.theme-firebug .devtools-sidebar-tabs tabs, +.theme-firebug .devtools-toolbar { + height: 28px !important; +} + +/* Do not set the fixed height for rule viewtoolbar. This toolbar + is changing its height to show pseudo classes. */ +.theme-firebug #ruleview-toolbar-container { + height: auto !important; +} + +/* The Inspector panel side panels are using both + .devtools-toolbar and .theme-toolbar. We want the + proportional font for all labels in these toolbars */ +.theme-firebug .devtools-toolbar label, +.theme-firebug .devtools-toolbar .label, +.theme-firebug .theme-toolbar label, +.theme-firebug .theme-toolbar .label { + font-family: var(--proportional-font-family); +} + +/* Toolbar Buttons */ + +.theme-firebug .theme-toolbar button, +.theme-firebug .devtools-button, +.theme-firebug toolbarbutton { + margin: 1px; + border-radius: 2px; + color: var(--theme-body-color); + line-height: var(--theme-toolbar-font-size); + font-size: var(--theme-toolbar-font-size); +} + +.theme-firebug .theme-toolbar button, +.theme-firebug .devtools-button { + border-width: 1px !important; + min-width: 24px; +} + +.theme-firebug .devtools-toolbarbutton { + min-width: 24px; +} + + +.theme-firebug #element-picker { + min-height: 21px; +} diff --git a/devtools/client/themes/floating-scrollbars-dark-theme.css b/devtools/client/themes/floating-scrollbars-dark-theme.css new file mode 100644 index 000000000..042fe28cc --- /dev/null +++ b/devtools/client/themes/floating-scrollbars-dark-theme.css @@ -0,0 +1,59 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars + inside a . */ +*|*:not(html|select) > scrollbar { + -moz-appearance: none !important; + position: relative; + background-color: transparent; + background-image: none; + z-index: 2147483647; + padding: 2px; + pointer-events: auto; +} + +*|*:root[platform="mac"] > scrollbar, +*|*:root[platform="mac"] *|*:not(html|select) > scrollbar { + border: none; +} + +/* Scrollbar code will reset the margin to the correct side depending on + where layout actually puts the scrollbar */ +*|*:not(html|select) > scrollbar[orient="vertical"] { + margin-left: -10px; + min-width: 10px; + max-width: 10px; +} + +*|*:not(html|select) > scrollbar[orient="horizontal"] { + margin-top: -10px; + min-height: 10px; + max-height: 10px; +} + +*|*:not(html|select) > scrollbar thumb { + background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */ + -moz-appearance: none !important; + border-width: 0px !important; + border-radius: 3px !important; +} + +*|*:root[platform="mac"] > scrollbar slider, +*|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider { + -moz-appearance: none !important; +} + +*|*:root[platform="win"] > scrollbar scrollbarbutton, +*|*:root[platform="linux"] > scrollbar scrollbarbutton, +*|*:root[platform="win"] > scrollbar gripper, +*|*:root[platform="linux"] > scrollbar gripper, +*|*:root[platform="win"] *|*:not(html|select) > scrollbar scrollbarbutton, +*|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton, +*|*:root[platform="win"] *|*:not(html|select) > scrollbar gripper, +*|*:root[platform="linux"] *|*:not(html|select) > scrollbar gripper { + display: none; +} diff --git a/devtools/client/themes/floating-scrollbars-responsive-design.css b/devtools/client/themes/floating-scrollbars-responsive-design.css new file mode 100644 index 000000000..7709bdd34 --- /dev/null +++ b/devtools/client/themes/floating-scrollbars-responsive-design.css @@ -0,0 +1,47 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars + inside a . */ +*|*:not(html|select) > scrollbar { + -moz-appearance: none !important; + position: relative; + background-color: transparent; + background-image: none; + z-index: 2147483647; + padding: 2px; + border: none; +} + +/* Scrollbar code will reset the margin to the correct side depending on + where layout actually puts the scrollbar */ +*|*:not(html|select) > scrollbar[orient="vertical"] { + margin-left: -10px; + min-width: 10px; + max-width: 10px; +} + +*|*:not(html|select) > scrollbar[orient="horizontal"] { + margin-top: -10px; + min-height: 10px; + max-height: 10px; +} + +*|*:not(html|select) > scrollbar slider { + -moz-appearance: none !important; +} + +*|*:not(html|select) > scrollbar thumb { + -moz-appearance: none !important; + background-color: rgba(0,0,0,0.2); + border-width: 0px !important; + border-radius: 3px !important; +} + +*|*:not(html|select) > scrollbar scrollbarbutton, +*|*:not(html|select) > scrollbar gripper { + display: none; +} diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css new file mode 100644 index 000000000..8305e34f3 --- /dev/null +++ b/devtools/client/themes/fonts.css @@ -0,0 +1,128 @@ +/* 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/. */ + +#sidebar-panel-fontinspector { + margin: 0; + display: flex; + flex-direction: column; + padding-bottom: 20px; + width: 100%; + height: 100%; +} + +#sidebar-panel-fontinspector > .devtools-toolbar { + display: flex; +} + +#font-container { + overflow: auto; + flex: auto; +} + +#all-fonts { + padding: 0; + margin: 0; +} + +#font-showall { + cursor: pointer; + flex-shrink: 0; +} + +#font-showall:hover { + text-decoration: underline; +} + +.dim > #font-container, +.font:not(.has-code) .font-css-code, +.font-is-local, +.font-is-remote, +.font.is-local .font-format-url, +#font-template { + display: none; +} + +.font.is-remote .font-is-remote, +.font.is-local .font-is-local { + display: inline; +} + +.font-format::before { + content: "("; +} + +.font-format::after { + content: ")"; +} + +.preview-input-toolbar { + display: flex; + width: 100%; +} + +.font-preview-container { + overflow-x: auto; +} + +#font-preview-text-input { + margin-top: 1px; + margin-bottom: 1px; + padding-top: 0; + padding-bottom: 0; + flex: 1; +} + +.font { + padding: 10px 10px; +} + +.theme-dark .font { + border-bottom: 1px solid #444; +} + +.theme-light .font { + border-bottom: 1px solid #DDD; +} + +.font:last-of-type { + border-bottom: 0; +} + +.theme-light .font:nth-child(even) { + background: #F4F4F4; +} + +.font-preview { + margin-left: -4px; + height: 60px; + display: block; +} + +.font-info { + display: block; +} + +.font-name { + display: inline; +} + +.font-css-code { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + padding: 5px; +} + +.theme-light .font-css-code, +.theme-light .font-url { + border: 1px solid #CCC; + background: white; +} + +.theme-dark .font-css-code, +.theme-dark .font-url { + border: 1px solid #333; + background: black; + color: white; +} diff --git a/devtools/client/themes/images/add.svg b/devtools/client/themes/images/add.svg new file mode 100644 index 000000000..5eb43e78f --- /dev/null +++ b/devtools/client/themes/images/add.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/alerticon-warning.png b/devtools/client/themes/images/alerticon-warning.png new file mode 100644 index 000000000..5c5d0aec5 Binary files /dev/null and b/devtools/client/themes/images/alerticon-warning.png differ diff --git a/devtools/client/themes/images/alerticon-warning@2x.png b/devtools/client/themes/images/alerticon-warning@2x.png new file mode 100644 index 000000000..dc3a3b108 Binary files /dev/null and b/devtools/client/themes/images/alerticon-warning@2x.png differ diff --git a/devtools/client/themes/images/angle-swatch.svg b/devtools/client/themes/images/angle-swatch.svg new file mode 100644 index 000000000..83f9393a9 --- /dev/null +++ b/devtools/client/themes/images/angle-swatch.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/animation-fast-track.svg b/devtools/client/themes/images/animation-fast-track.svg new file mode 100644 index 000000000..4723bf582 --- /dev/null +++ b/devtools/client/themes/images/animation-fast-track.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/devtools/client/themes/images/arrow-e.png b/devtools/client/themes/images/arrow-e.png new file mode 100644 index 000000000..cfa950a1f Binary files /dev/null and b/devtools/client/themes/images/arrow-e.png differ diff --git a/devtools/client/themes/images/arrow-e@2x.png b/devtools/client/themes/images/arrow-e@2x.png new file mode 100644 index 000000000..c628ca0a5 Binary files /dev/null and b/devtools/client/themes/images/arrow-e@2x.png differ diff --git a/devtools/client/themes/images/breadcrumbs-scrollbutton.png b/devtools/client/themes/images/breadcrumbs-scrollbutton.png new file mode 100644 index 000000000..19af4c042 Binary files /dev/null and b/devtools/client/themes/images/breadcrumbs-scrollbutton.png differ diff --git a/devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png b/devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png new file mode 100644 index 000000000..043702401 Binary files /dev/null and b/devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png differ diff --git a/devtools/client/themes/images/breakpoint.svg b/devtools/client/themes/images/breakpoint.svg new file mode 100644 index 000000000..9be328b83 --- /dev/null +++ b/devtools/client/themes/images/breakpoint.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/clear.svg b/devtools/client/themes/images/clear.svg new file mode 100644 index 000000000..f9ba7087f --- /dev/null +++ b/devtools/client/themes/images/clear.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/close.svg b/devtools/client/themes/images/close.svg new file mode 100644 index 000000000..c5a597bae --- /dev/null +++ b/devtools/client/themes/images/close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/command-console.svg b/devtools/client/themes/images/command-console.svg new file mode 100644 index 000000000..77bb3a8e8 --- /dev/null +++ b/devtools/client/themes/images/command-console.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/command-eyedropper.svg b/devtools/client/themes/images/command-eyedropper.svg new file mode 100644 index 000000000..dff215857 --- /dev/null +++ b/devtools/client/themes/images/command-eyedropper.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/command-frames.svg b/devtools/client/themes/images/command-frames.svg new file mode 100644 index 000000000..6462c43c7 --- /dev/null +++ b/devtools/client/themes/images/command-frames.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/command-measure.svg b/devtools/client/themes/images/command-measure.svg new file mode 100644 index 000000000..0aa830f15 --- /dev/null +++ b/devtools/client/themes/images/command-measure.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/command-noautohide.svg b/devtools/client/themes/images/command-noautohide.svg new file mode 100755 index 000000000..ac53c7d54 --- /dev/null +++ b/devtools/client/themes/images/command-noautohide.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/command-paintflashing.svg b/devtools/client/themes/images/command-paintflashing.svg new file mode 100644 index 000000000..dfd627a8d --- /dev/null +++ b/devtools/client/themes/images/command-paintflashing.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/command-pick.svg b/devtools/client/themes/images/command-pick.svg new file mode 100644 index 000000000..382d236f9 --- /dev/null +++ b/devtools/client/themes/images/command-pick.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/command-responsivemode.svg b/devtools/client/themes/images/command-responsivemode.svg new file mode 100644 index 000000000..583e59c1a --- /dev/null +++ b/devtools/client/themes/images/command-responsivemode.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/command-rulers.svg b/devtools/client/themes/images/command-rulers.svg new file mode 100644 index 000000000..995eb53e4 --- /dev/null +++ b/devtools/client/themes/images/command-rulers.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/command-screenshot.svg b/devtools/client/themes/images/command-screenshot.svg new file mode 100644 index 000000000..8e81a334f --- /dev/null +++ b/devtools/client/themes/images/command-screenshot.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/commandline-icon.svg b/devtools/client/themes/images/commandline-icon.svg new file mode 100644 index 000000000..429d6a73b --- /dev/null +++ b/devtools/client/themes/images/commandline-icon.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/controls.png b/devtools/client/themes/images/controls.png new file mode 100644 index 000000000..569c266e4 Binary files /dev/null and b/devtools/client/themes/images/controls.png differ diff --git a/devtools/client/themes/images/controls@2x.png b/devtools/client/themes/images/controls@2x.png new file mode 100644 index 000000000..fb062516d Binary files /dev/null and b/devtools/client/themes/images/controls@2x.png differ diff --git a/devtools/client/themes/images/cubic-bezier-swatch.png b/devtools/client/themes/images/cubic-bezier-swatch.png new file mode 100644 index 000000000..2dcb58a2a Binary files /dev/null and b/devtools/client/themes/images/cubic-bezier-swatch.png differ diff --git a/devtools/client/themes/images/cubic-bezier-swatch@2x.png b/devtools/client/themes/images/cubic-bezier-swatch@2x.png new file mode 100644 index 000000000..64dbef89b Binary files /dev/null and b/devtools/client/themes/images/cubic-bezier-swatch@2x.png differ diff --git a/devtools/client/themes/images/debugger-step-in.svg b/devtools/client/themes/images/debugger-step-in.svg new file mode 100644 index 000000000..a74add83b --- /dev/null +++ b/devtools/client/themes/images/debugger-step-in.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/debugger-step-out.svg b/devtools/client/themes/images/debugger-step-out.svg new file mode 100644 index 000000000..abef878f1 --- /dev/null +++ b/devtools/client/themes/images/debugger-step-out.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/debugger-step-over.png b/devtools/client/themes/images/debugger-step-over.png new file mode 100644 index 000000000..ec28fc05e Binary files /dev/null and b/devtools/client/themes/images/debugger-step-over.png differ diff --git a/devtools/client/themes/images/debugger-step-over.svg b/devtools/client/themes/images/debugger-step-over.svg new file mode 100644 index 000000000..bdd5bde37 --- /dev/null +++ b/devtools/client/themes/images/debugger-step-over.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/debugger-step-over@2x.png b/devtools/client/themes/images/debugger-step-over@2x.png new file mode 100644 index 000000000..452f0d459 Binary files /dev/null and b/devtools/client/themes/images/debugger-step-over@2x.png differ diff --git a/devtools/client/themes/images/debugger-toggleBreakpoints.svg b/devtools/client/themes/images/debugger-toggleBreakpoints.svg new file mode 100644 index 000000000..9d0b23004 --- /dev/null +++ b/devtools/client/themes/images/debugger-toggleBreakpoints.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/debugging-addons.svg b/devtools/client/themes/images/debugging-addons.svg new file mode 100644 index 000000000..8a98d0275 --- /dev/null +++ b/devtools/client/themes/images/debugging-addons.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/debugging-devices.svg b/devtools/client/themes/images/debugging-devices.svg new file mode 100644 index 000000000..be2cd5af6 --- /dev/null +++ b/devtools/client/themes/images/debugging-devices.svg @@ -0,0 +1,7 @@ + + + + diff --git a/devtools/client/themes/images/debugging-tabs.svg b/devtools/client/themes/images/debugging-tabs.svg new file mode 100644 index 000000000..91ad8e925 --- /dev/null +++ b/devtools/client/themes/images/debugging-tabs.svg @@ -0,0 +1,3 @@ + + + diff --git a/devtools/client/themes/images/debugging-workers.svg b/devtools/client/themes/images/debugging-workers.svg new file mode 100644 index 000000000..c04c63252 --- /dev/null +++ b/devtools/client/themes/images/debugging-workers.svg @@ -0,0 +1,11 @@ + + + + diff --git a/devtools/client/themes/images/diff.svg b/devtools/client/themes/images/diff.svg new file mode 100644 index 000000000..ce237eb75 --- /dev/null +++ b/devtools/client/themes/images/diff.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/dock-bottom.svg b/devtools/client/themes/images/dock-bottom.svg new file mode 100644 index 000000000..09ce70258 --- /dev/null +++ b/devtools/client/themes/images/dock-bottom.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/dock-side.svg b/devtools/client/themes/images/dock-side.svg new file mode 100644 index 000000000..3855ca614 --- /dev/null +++ b/devtools/client/themes/images/dock-side.svg @@ -0,0 +1,3 @@ + + + diff --git a/devtools/client/themes/images/dock-undock.svg b/devtools/client/themes/images/dock-undock.svg new file mode 100644 index 000000000..d4b100a03 --- /dev/null +++ b/devtools/client/themes/images/dock-undock.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/devtools/client/themes/images/dropmarker.svg b/devtools/client/themes/images/dropmarker.svg new file mode 100644 index 000000000..7592790c4 --- /dev/null +++ b/devtools/client/themes/images/dropmarker.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/editor-error.png b/devtools/client/themes/images/editor-error.png new file mode 100644 index 000000000..39ef81e20 Binary files /dev/null and b/devtools/client/themes/images/editor-error.png differ diff --git a/devtools/client/themes/images/emojis/emoji-command-pick.svg b/devtools/client/themes/images/emojis/emoji-command-pick.svg new file mode 100755 index 000000000..4be436766 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-command-pick.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-canvas.svg b/devtools/client/themes/images/emojis/emoji-tool-canvas.svg new file mode 100644 index 000000000..97d8a91a0 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-canvas.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-debugger.svg b/devtools/client/themes/images/emojis/emoji-tool-debugger.svg new file mode 100644 index 000000000..07b9ebbb9 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-debugger.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-dom.svg b/devtools/client/themes/images/emojis/emoji-tool-dom.svg new file mode 100644 index 000000000..1d3e40fad --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-dom.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/devtools/client/themes/images/emojis/emoji-tool-inspector.svg b/devtools/client/themes/images/emojis/emoji-tool-inspector.svg new file mode 100644 index 000000000..093fb91b5 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-inspector.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-memory.svg b/devtools/client/themes/images/emojis/emoji-tool-memory.svg new file mode 100644 index 000000000..6387d5649 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-memory.svg @@ -0,0 +1,9 @@ + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-network.svg b/devtools/client/themes/images/emojis/emoji-tool-network.svg new file mode 100644 index 000000000..249ac7b62 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-network.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-profiler.svg b/devtools/client/themes/images/emojis/emoji-tool-profiler.svg new file mode 100644 index 000000000..bf4b660cc --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-profiler.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-scratchpad.svg b/devtools/client/themes/images/emojis/emoji-tool-scratchpad.svg new file mode 100644 index 000000000..08128eb5d --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-scratchpad.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg b/devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg new file mode 100644 index 000000000..1356caad1 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-storage.svg b/devtools/client/themes/images/emojis/emoji-tool-storage.svg new file mode 100644 index 000000000..d9be26108 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-storage.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-styleeditor.svg b/devtools/client/themes/images/emojis/emoji-tool-styleeditor.svg new file mode 100644 index 000000000..ef7153312 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-styleeditor.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-webaudio.svg b/devtools/client/themes/images/emojis/emoji-tool-webaudio.svg new file mode 100644 index 000000000..b57c0f886 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-webaudio.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/emojis/emoji-tool-webconsole.svg b/devtools/client/themes/images/emojis/emoji-tool-webconsole.svg new file mode 100644 index 000000000..78843dfd3 --- /dev/null +++ b/devtools/client/themes/images/emojis/emoji-tool-webconsole.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/fast-forward.svg b/devtools/client/themes/images/fast-forward.svg new file mode 100644 index 000000000..813c672d8 --- /dev/null +++ b/devtools/client/themes/images/fast-forward.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/filetypes/dir-close.svg b/devtools/client/themes/images/filetypes/dir-close.svg new file mode 100644 index 000000000..07d087816 --- /dev/null +++ b/devtools/client/themes/images/filetypes/dir-close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/filetypes/dir-open.svg b/devtools/client/themes/images/filetypes/dir-open.svg new file mode 100644 index 000000000..6528b7e09 --- /dev/null +++ b/devtools/client/themes/images/filetypes/dir-open.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/filetypes/globe.svg b/devtools/client/themes/images/filetypes/globe.svg new file mode 100644 index 000000000..440499941 --- /dev/null +++ b/devtools/client/themes/images/filetypes/globe.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/filter-swatch.svg b/devtools/client/themes/images/filter-swatch.svg new file mode 100644 index 000000000..1f63b4f08 --- /dev/null +++ b/devtools/client/themes/images/filter-swatch.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/devtools/client/themes/images/filter.svg b/devtools/client/themes/images/filter.svg new file mode 100644 index 000000000..90bc6165f --- /dev/null +++ b/devtools/client/themes/images/filter.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/devtools/client/themes/images/filters.svg b/devtools/client/themes/images/filters.svg new file mode 100644 index 000000000..12a5f7cc9 --- /dev/null +++ b/devtools/client/themes/images/filters.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/arrow-down.svg b/devtools/client/themes/images/firebug/arrow-down.svg new file mode 100644 index 000000000..30a31389b --- /dev/null +++ b/devtools/client/themes/images/firebug/arrow-down.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/firebug/arrow-up.svg b/devtools/client/themes/images/firebug/arrow-up.svg new file mode 100644 index 000000000..dd59e90dc --- /dev/null +++ b/devtools/client/themes/images/firebug/arrow-up.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/firebug/breadcrumbs-divider.svg b/devtools/client/themes/images/firebug/breadcrumbs-divider.svg new file mode 100644 index 000000000..e132ae2ab --- /dev/null +++ b/devtools/client/themes/images/firebug/breadcrumbs-divider.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/breakpoint.svg b/devtools/client/themes/images/firebug/breakpoint.svg new file mode 100644 index 000000000..7dc2ff8ce --- /dev/null +++ b/devtools/client/themes/images/firebug/breakpoint.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/close.svg b/devtools/client/themes/images/firebug/close.svg new file mode 100644 index 000000000..2e5a04af3 --- /dev/null +++ b/devtools/client/themes/images/firebug/close.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-console.svg b/devtools/client/themes/images/firebug/command-console.svg new file mode 100644 index 000000000..ff23daa64 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-console.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-eyedropper.svg b/devtools/client/themes/images/firebug/command-eyedropper.svg new file mode 100644 index 000000000..be8f15130 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-eyedropper.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-frames.svg b/devtools/client/themes/images/firebug/command-frames.svg new file mode 100644 index 000000000..257d036f4 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-frames.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-measure.svg b/devtools/client/themes/images/firebug/command-measure.svg new file mode 100644 index 000000000..92964c950 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-measure.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-noautohide.svg b/devtools/client/themes/images/firebug/command-noautohide.svg new file mode 100644 index 000000000..cd6f4c98d --- /dev/null +++ b/devtools/client/themes/images/firebug/command-noautohide.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-paintflashing.svg b/devtools/client/themes/images/firebug/command-paintflashing.svg new file mode 100644 index 000000000..84d5741b3 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-paintflashing.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-pick.svg b/devtools/client/themes/images/firebug/command-pick.svg new file mode 100644 index 000000000..157460da3 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-pick.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-responsivemode.svg b/devtools/client/themes/images/firebug/command-responsivemode.svg new file mode 100644 index 000000000..b292ffe7a --- /dev/null +++ b/devtools/client/themes/images/firebug/command-responsivemode.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-rulers.svg b/devtools/client/themes/images/firebug/command-rulers.svg new file mode 100644 index 000000000..0a7d4aaef --- /dev/null +++ b/devtools/client/themes/images/firebug/command-rulers.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-scratchpad.svg b/devtools/client/themes/images/firebug/command-scratchpad.svg new file mode 100644 index 000000000..a227f3c4b --- /dev/null +++ b/devtools/client/themes/images/firebug/command-scratchpad.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/command-screenshot.svg b/devtools/client/themes/images/firebug/command-screenshot.svg new file mode 100644 index 000000000..9cc343e01 --- /dev/null +++ b/devtools/client/themes/images/firebug/command-screenshot.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/commandline-icon.svg b/devtools/client/themes/images/firebug/commandline-icon.svg new file mode 100644 index 000000000..7770f2b61 --- /dev/null +++ b/devtools/client/themes/images/firebug/commandline-icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/debugger-blackbox.svg b/devtools/client/themes/images/firebug/debugger-blackbox.svg new file mode 100644 index 000000000..e36e5e2e4 --- /dev/null +++ b/devtools/client/themes/images/firebug/debugger-blackbox.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/debugger-prettyprint.svg b/devtools/client/themes/images/firebug/debugger-prettyprint.svg new file mode 100644 index 000000000..b720b39b0 --- /dev/null +++ b/devtools/client/themes/images/firebug/debugger-prettyprint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/debugger-step-in.svg b/devtools/client/themes/images/firebug/debugger-step-in.svg new file mode 100644 index 000000000..e9db77159 --- /dev/null +++ b/devtools/client/themes/images/firebug/debugger-step-in.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/debugger-step-out.svg b/devtools/client/themes/images/firebug/debugger-step-out.svg new file mode 100644 index 000000000..017995859 --- /dev/null +++ b/devtools/client/themes/images/firebug/debugger-step-out.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/debugger-step-over.svg b/devtools/client/themes/images/firebug/debugger-step-over.svg new file mode 100644 index 000000000..79960cb10 --- /dev/null +++ b/devtools/client/themes/images/firebug/debugger-step-over.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg b/devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg new file mode 100644 index 000000000..d85ab6391 --- /dev/null +++ b/devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/disable.svg b/devtools/client/themes/images/firebug/disable.svg new file mode 100644 index 000000000..d1f178099 --- /dev/null +++ b/devtools/client/themes/images/firebug/disable.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/firebug/dock-bottom.svg b/devtools/client/themes/images/firebug/dock-bottom.svg new file mode 100644 index 000000000..2e7efa341 --- /dev/null +++ b/devtools/client/themes/images/firebug/dock-bottom.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/dock-side.svg b/devtools/client/themes/images/firebug/dock-side.svg new file mode 100644 index 000000000..e275eeaeb --- /dev/null +++ b/devtools/client/themes/images/firebug/dock-side.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/dock-undock.svg b/devtools/client/themes/images/firebug/dock-undock.svg new file mode 100644 index 000000000..7d24ef4b6 --- /dev/null +++ b/devtools/client/themes/images/firebug/dock-undock.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/moz.build b/devtools/client/themes/images/firebug/moz.build new file mode 100644 index 000000000..1516b4030 --- /dev/null +++ b/devtools/client/themes/images/firebug/moz.build @@ -0,0 +1,11 @@ +# 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( + 'read-only.svg', + 'spinner.png', + 'twisty-closed-firebug.svg', + 'twisty-open-firebug.svg', +) diff --git a/devtools/client/themes/images/firebug/pane-collapse.svg b/devtools/client/themes/images/firebug/pane-collapse.svg new file mode 100644 index 000000000..7e4f00781 --- /dev/null +++ b/devtools/client/themes/images/firebug/pane-collapse.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/pane-expand.svg b/devtools/client/themes/images/firebug/pane-expand.svg new file mode 100644 index 000000000..c4857a065 --- /dev/null +++ b/devtools/client/themes/images/firebug/pane-expand.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/pause.svg b/devtools/client/themes/images/firebug/pause.svg new file mode 100644 index 000000000..8763c376d --- /dev/null +++ b/devtools/client/themes/images/firebug/pause.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/play.svg b/devtools/client/themes/images/firebug/play.svg new file mode 100644 index 000000000..7762ed8e9 --- /dev/null +++ b/devtools/client/themes/images/firebug/play.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/read-only.svg b/devtools/client/themes/images/firebug/read-only.svg new file mode 100644 index 000000000..7521a093c --- /dev/null +++ b/devtools/client/themes/images/firebug/read-only.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/rewind.svg b/devtools/client/themes/images/firebug/rewind.svg new file mode 100644 index 000000000..88e7bb9aa --- /dev/null +++ b/devtools/client/themes/images/firebug/rewind.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/spinner.png b/devtools/client/themes/images/firebug/spinner.png new file mode 100644 index 000000000..eec57a809 Binary files /dev/null and b/devtools/client/themes/images/firebug/spinner.png differ diff --git a/devtools/client/themes/images/firebug/tool-debugger-paused.svg b/devtools/client/themes/images/firebug/tool-debugger-paused.svg new file mode 100644 index 000000000..67e5b3f1b --- /dev/null +++ b/devtools/client/themes/images/firebug/tool-debugger-paused.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/tool-options.svg b/devtools/client/themes/images/firebug/tool-options.svg new file mode 100644 index 000000000..4fee4fc40 --- /dev/null +++ b/devtools/client/themes/images/firebug/tool-options.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/twisty-closed-firebug.svg b/devtools/client/themes/images/firebug/twisty-closed-firebug.svg new file mode 100644 index 000000000..a3cfc324e --- /dev/null +++ b/devtools/client/themes/images/firebug/twisty-closed-firebug.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/devtools/client/themes/images/firebug/twisty-open-firebug.svg b/devtools/client/themes/images/firebug/twisty-open-firebug.svg new file mode 100644 index 000000000..e20d7f6e0 --- /dev/null +++ b/devtools/client/themes/images/firebug/twisty-open-firebug.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/devtools/client/themes/images/geometry-editor.svg b/devtools/client/themes/images/geometry-editor.svg new file mode 100644 index 000000000..b766740cd --- /dev/null +++ b/devtools/client/themes/images/geometry-editor.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/devtools/client/themes/images/globe.svg b/devtools/client/themes/images/globe.svg new file mode 100644 index 000000000..a57a5af23 --- /dev/null +++ b/devtools/client/themes/images/globe.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/devtools/client/themes/images/grid.svg b/devtools/client/themes/images/grid.svg new file mode 100644 index 000000000..108ccafee --- /dev/null +++ b/devtools/client/themes/images/grid.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/import.svg b/devtools/client/themes/images/import.svg new file mode 100644 index 000000000..2cf948e3f --- /dev/null +++ b/devtools/client/themes/images/import.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/devtools/client/themes/images/item-arrow-dark-ltr.svg b/devtools/client/themes/images/item-arrow-dark-ltr.svg new file mode 100644 index 000000000..c2accabde --- /dev/null +++ b/devtools/client/themes/images/item-arrow-dark-ltr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/item-arrow-dark-rtl.svg b/devtools/client/themes/images/item-arrow-dark-rtl.svg new file mode 100644 index 000000000..5ccd34c09 --- /dev/null +++ b/devtools/client/themes/images/item-arrow-dark-rtl.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/item-arrow-ltr.svg b/devtools/client/themes/images/item-arrow-ltr.svg new file mode 100644 index 000000000..a9f7b33d9 --- /dev/null +++ b/devtools/client/themes/images/item-arrow-ltr.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/item-arrow-rtl.svg b/devtools/client/themes/images/item-arrow-rtl.svg new file mode 100755 index 000000000..80ea9e89c --- /dev/null +++ b/devtools/client/themes/images/item-arrow-rtl.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/item-toggle.svg b/devtools/client/themes/images/item-toggle.svg new file mode 100644 index 000000000..fd914c5c6 --- /dev/null +++ b/devtools/client/themes/images/item-toggle.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/magnifying-glass.png b/devtools/client/themes/images/magnifying-glass.png new file mode 100644 index 000000000..bd09ffb4f Binary files /dev/null and b/devtools/client/themes/images/magnifying-glass.png differ diff --git a/devtools/client/themes/images/magnifying-glass@2x.png b/devtools/client/themes/images/magnifying-glass@2x.png new file mode 100644 index 000000000..17842853a Binary files /dev/null and b/devtools/client/themes/images/magnifying-glass@2x.png differ diff --git a/devtools/client/themes/images/noise.png b/devtools/client/themes/images/noise.png new file mode 100644 index 000000000..01d340aaa Binary files /dev/null and b/devtools/client/themes/images/noise.png differ diff --git a/devtools/client/themes/images/pane-collapse.svg b/devtools/client/themes/images/pane-collapse.svg new file mode 100644 index 000000000..4490fd546 --- /dev/null +++ b/devtools/client/themes/images/pane-collapse.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/pane-expand.svg b/devtools/client/themes/images/pane-expand.svg new file mode 100644 index 000000000..db6c3bcb1 --- /dev/null +++ b/devtools/client/themes/images/pane-expand.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/pause.svg b/devtools/client/themes/images/pause.svg new file mode 100644 index 000000000..308570294 --- /dev/null +++ b/devtools/client/themes/images/pause.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/performance-icons.svg b/devtools/client/themes/images/performance-icons.svg new file mode 100644 index 000000000..d0d5e881e --- /dev/null +++ b/devtools/client/themes/images/performance-icons.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/play.svg b/devtools/client/themes/images/play.svg new file mode 100644 index 000000000..d677b4bd0 --- /dev/null +++ b/devtools/client/themes/images/play.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/power.svg b/devtools/client/themes/images/power.svg new file mode 100644 index 000000000..6975c1036 --- /dev/null +++ b/devtools/client/themes/images/power.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/profiler-stopwatch.svg b/devtools/client/themes/images/profiler-stopwatch.svg new file mode 100644 index 000000000..deafdb8b4 --- /dev/null +++ b/devtools/client/themes/images/profiler-stopwatch.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/devtools/client/themes/images/pseudo-class.svg b/devtools/client/themes/images/pseudo-class.svg new file mode 100644 index 000000000..8062cd31a --- /dev/null +++ b/devtools/client/themes/images/pseudo-class.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/reload.svg b/devtools/client/themes/images/reload.svg new file mode 100644 index 000000000..b04262784 --- /dev/null +++ b/devtools/client/themes/images/reload.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer.png b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer.png new file mode 100644 index 000000000..7d113f0df Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer.png differ diff --git a/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png new file mode 100644 index 000000000..bb3c4bde0 Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png differ diff --git a/devtools/client/themes/images/responsivemode/responsive-se-resizer.png b/devtools/client/themes/images/responsivemode/responsive-se-resizer.png new file mode 100644 index 000000000..35b54d62c Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsive-se-resizer.png differ diff --git a/devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png b/devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png new file mode 100644 index 000000000..9dbf4fe8e Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png differ diff --git a/devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png new file mode 100644 index 000000000..3b4e78c6f Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png differ diff --git a/devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png new file mode 100644 index 000000000..cbae60621 Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-home.png b/devtools/client/themes/images/responsivemode/responsiveui-home.png new file mode 100644 index 000000000..43379d0e9 Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-home.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-rotate.png b/devtools/client/themes/images/responsivemode/responsiveui-rotate.png new file mode 100644 index 000000000..2bacbd2d5 Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-rotate.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png b/devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png new file mode 100644 index 000000000..eeeb82328 Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-screenshot.png b/devtools/client/themes/images/responsivemode/responsiveui-screenshot.png new file mode 100644 index 000000000..084220ed1 Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-screenshot.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png b/devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png new file mode 100644 index 000000000..927c5cf0b Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-touch.png b/devtools/client/themes/images/responsivemode/responsiveui-touch.png new file mode 100644 index 000000000..90587034c Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-touch.png differ diff --git a/devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png b/devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png new file mode 100644 index 000000000..e4645039c Binary files /dev/null and b/devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png differ diff --git a/devtools/client/themes/images/rewind.svg b/devtools/client/themes/images/rewind.svg new file mode 100644 index 000000000..13a309626 --- /dev/null +++ b/devtools/client/themes/images/rewind.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/search-clear-dark.svg b/devtools/client/themes/images/search-clear-dark.svg new file mode 100644 index 000000000..422a7ce7f --- /dev/null +++ b/devtools/client/themes/images/search-clear-dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/devtools/client/themes/images/search-clear-failed.svg b/devtools/client/themes/images/search-clear-failed.svg new file mode 100644 index 000000000..a8f9fd8ee --- /dev/null +++ b/devtools/client/themes/images/search-clear-failed.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/devtools/client/themes/images/search-clear-light.svg b/devtools/client/themes/images/search-clear-light.svg new file mode 100644 index 000000000..066ef4439 --- /dev/null +++ b/devtools/client/themes/images/search-clear-light.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/devtools/client/themes/images/search.svg b/devtools/client/themes/images/search.svg new file mode 100644 index 000000000..49f8cc605 --- /dev/null +++ b/devtools/client/themes/images/search.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/security-state-broken.svg b/devtools/client/themes/images/security-state-broken.svg new file mode 100644 index 000000000..5f122c3ee --- /dev/null +++ b/devtools/client/themes/images/security-state-broken.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/devtools/client/themes/images/security-state-insecure.svg b/devtools/client/themes/images/security-state-insecure.svg new file mode 100644 index 000000000..b7191a867 --- /dev/null +++ b/devtools/client/themes/images/security-state-insecure.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/security-state-secure.svg b/devtools/client/themes/images/security-state-secure.svg new file mode 100644 index 000000000..5dad8903b --- /dev/null +++ b/devtools/client/themes/images/security-state-secure.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/security-state-weak.svg b/devtools/client/themes/images/security-state-weak.svg new file mode 100644 index 000000000..d1e9dbd4b --- /dev/null +++ b/devtools/client/themes/images/security-state-weak.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/devtools/client/themes/images/sort-arrows.svg b/devtools/client/themes/images/sort-arrows.svg new file mode 100644 index 000000000..289b07530 --- /dev/null +++ b/devtools/client/themes/images/sort-arrows.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/devtools/client/themes/images/toggle-tools.png b/devtools/client/themes/images/toggle-tools.png new file mode 100644 index 000000000..495439391 Binary files /dev/null and b/devtools/client/themes/images/toggle-tools.png differ diff --git a/devtools/client/themes/images/toggle-tools@2x.png b/devtools/client/themes/images/toggle-tools@2x.png new file mode 100644 index 000000000..971f41431 Binary files /dev/null and b/devtools/client/themes/images/toggle-tools@2x.png differ diff --git a/devtools/client/themes/images/tool-canvas.svg b/devtools/client/themes/images/tool-canvas.svg new file mode 100644 index 000000000..7edebeaf0 --- /dev/null +++ b/devtools/client/themes/images/tool-canvas.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/tool-debugger-paused.svg b/devtools/client/themes/images/tool-debugger-paused.svg new file mode 100644 index 000000000..8ac16b26f --- /dev/null +++ b/devtools/client/themes/images/tool-debugger-paused.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/tool-debugger.svg b/devtools/client/themes/images/tool-debugger.svg new file mode 100644 index 000000000..9a8fac4d7 --- /dev/null +++ b/devtools/client/themes/images/tool-debugger.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/tool-dom.svg b/devtools/client/themes/images/tool-dom.svg new file mode 100644 index 000000000..88aecabf5 --- /dev/null +++ b/devtools/client/themes/images/tool-dom.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/tool-inspector.svg b/devtools/client/themes/images/tool-inspector.svg new file mode 100644 index 000000000..a580f71a4 --- /dev/null +++ b/devtools/client/themes/images/tool-inspector.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/tool-memory-active.svg b/devtools/client/themes/images/tool-memory-active.svg new file mode 100644 index 000000000..81d787101 --- /dev/null +++ b/devtools/client/themes/images/tool-memory-active.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/devtools/client/themes/images/tool-memory.svg b/devtools/client/themes/images/tool-memory.svg new file mode 100644 index 000000000..fd9be2bbd --- /dev/null +++ b/devtools/client/themes/images/tool-memory.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/devtools/client/themes/images/tool-network.svg b/devtools/client/themes/images/tool-network.svg new file mode 100644 index 000000000..48d1361d8 --- /dev/null +++ b/devtools/client/themes/images/tool-network.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/tool-options.svg b/devtools/client/themes/images/tool-options.svg new file mode 100644 index 000000000..e8516bdfa --- /dev/null +++ b/devtools/client/themes/images/tool-options.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/tool-profiler-active.svg b/devtools/client/themes/images/tool-profiler-active.svg new file mode 100644 index 000000000..2c77b1aad --- /dev/null +++ b/devtools/client/themes/images/tool-profiler-active.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/tool-profiler.svg b/devtools/client/themes/images/tool-profiler.svg new file mode 100644 index 000000000..92c33bb06 --- /dev/null +++ b/devtools/client/themes/images/tool-profiler.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/devtools/client/themes/images/tool-scratchpad.svg b/devtools/client/themes/images/tool-scratchpad.svg new file mode 100644 index 000000000..a75985cf3 --- /dev/null +++ b/devtools/client/themes/images/tool-scratchpad.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/tool-shadereditor.svg b/devtools/client/themes/images/tool-shadereditor.svg new file mode 100644 index 000000000..f668e5f67 --- /dev/null +++ b/devtools/client/themes/images/tool-shadereditor.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/devtools/client/themes/images/tool-storage.svg b/devtools/client/themes/images/tool-storage.svg new file mode 100644 index 000000000..7b8863662 --- /dev/null +++ b/devtools/client/themes/images/tool-storage.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/tool-styleeditor.svg b/devtools/client/themes/images/tool-styleeditor.svg new file mode 100644 index 000000000..dbe5ddb6b --- /dev/null +++ b/devtools/client/themes/images/tool-styleeditor.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/tool-webaudio.svg b/devtools/client/themes/images/tool-webaudio.svg new file mode 100644 index 000000000..8275dc200 --- /dev/null +++ b/devtools/client/themes/images/tool-webaudio.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/themes/images/tool-webconsole.svg b/devtools/client/themes/images/tool-webconsole.svg new file mode 100644 index 000000000..d6752f6c4 --- /dev/null +++ b/devtools/client/themes/images/tool-webconsole.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/themes/images/tracer-icon.png b/devtools/client/themes/images/tracer-icon.png new file mode 100644 index 000000000..2b5aaf0aa Binary files /dev/null and b/devtools/client/themes/images/tracer-icon.png differ diff --git a/devtools/client/themes/images/tracer-icon@2x.png b/devtools/client/themes/images/tracer-icon@2x.png new file mode 100644 index 000000000..33c4c7d7f Binary files /dev/null and b/devtools/client/themes/images/tracer-icon@2x.png differ diff --git a/devtools/client/themes/images/vview-delete.png b/devtools/client/themes/images/vview-delete.png new file mode 100644 index 000000000..6c0ef603c Binary files /dev/null and b/devtools/client/themes/images/vview-delete.png differ diff --git a/devtools/client/themes/images/vview-delete@2x.png b/devtools/client/themes/images/vview-delete@2x.png new file mode 100644 index 000000000..d0718a1d6 Binary files /dev/null and b/devtools/client/themes/images/vview-delete@2x.png differ diff --git a/devtools/client/themes/images/vview-edit.png b/devtools/client/themes/images/vview-edit.png new file mode 100644 index 000000000..b3009981f Binary files /dev/null and b/devtools/client/themes/images/vview-edit.png differ diff --git a/devtools/client/themes/images/vview-edit@2x.png b/devtools/client/themes/images/vview-edit@2x.png new file mode 100644 index 000000000..d0923fd0a Binary files /dev/null and b/devtools/client/themes/images/vview-edit@2x.png differ diff --git a/devtools/client/themes/images/vview-lock.png b/devtools/client/themes/images/vview-lock.png new file mode 100644 index 000000000..e9b257e3a Binary files /dev/null and b/devtools/client/themes/images/vview-lock.png differ diff --git a/devtools/client/themes/images/vview-lock@2x.png b/devtools/client/themes/images/vview-lock@2x.png new file mode 100644 index 000000000..11d86275f Binary files /dev/null and b/devtools/client/themes/images/vview-lock@2x.png differ diff --git a/devtools/client/themes/images/vview-open-inspector.png b/devtools/client/themes/images/vview-open-inspector.png new file mode 100644 index 000000000..877d195c9 Binary files /dev/null and b/devtools/client/themes/images/vview-open-inspector.png differ diff --git a/devtools/client/themes/images/vview-open-inspector@2x.png b/devtools/client/themes/images/vview-open-inspector@2x.png new file mode 100644 index 000000000..207e5376f Binary files /dev/null and b/devtools/client/themes/images/vview-open-inspector@2x.png differ diff --git a/devtools/client/themes/images/webconsole.svg b/devtools/client/themes/images/webconsole.svg new file mode 100644 index 000000000..6c21e549e --- /dev/null +++ b/devtools/client/themes/images/webconsole.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css new file mode 100644 index 000000000..28a959ab8 --- /dev/null +++ b/devtools/client/themes/inspector.css @@ -0,0 +1,216 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 { + --eyedropper-image: url(images/command-eyedropper.svg); +} + +.theme-firebug { + --eyedropper-image: url(images/firebug/command-eyedropper.svg); +} + +:root.theme-light { + --breadcrumbs-border-color: #f3f3f3; +} + +:root.theme-dark { + --breadcrumbs-border-color: #454d5d; +} + +* { + box-sizing: border-box; +} + +/* Make sure to hide scroll bars for the parent window */ +window { + overflow: hidden; +} + +/* The main Inspector panel container. */ +.inspector-responsive-container { + height: 100vh; +} + +/* The main panel layout. This area consists of a toolbar, markup view + and breadcrumbs bar. */ +#inspector-main-content { + /* Subtract 1 pixel from the panel height. It's puzzling why this + is needed, but if not presented the entire Inspector panel + content jumps 1 pixel up when the Toolbox is opened. */ + height: calc(100% - 1px); + /* This min-width avoids a visual glitch when moving the splitter quickly to the left. + See bug 1307408 comment #12. */ + min-width: 125px; + display: flex; + flex-direction: column; + flex: 1 1 auto; +} + +/* Inspector Panel Splitter */ + +#inspector-splitter-box { + height: 100vh; + width: 100vw; + position: fixed; +} + +/* Minimum dimensions for the Inspector splitter areas. */ +#inspector-splitter-box .uncontrolled, +#inspector-splitter-box .controlled { + min-height: 50px; + min-width: 50px; + overflow-x: hidden; +} + +/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing + the sidebar tab to small width. If a specific panel supports smaller width, this should + be overridden on a panel-by-panel basis */ +.inspector-tabpanel { + min-width: 200px; +} + +#inspector-splitter-box .controlled.pane-collapsed { + visibility: collapse; +} + +/* Use flex layout for the Inspector toolbar. For now, it's done + specifically for the Inspector toolbar since general rule applied + on .devtools-toolbar breaks breadcrumbs and also toolbars in other + panels (e.g. webconsole, debugger), these are not ready for HTML + layout yet. */ +#inspector-toolbar.devtools-toolbar { + display: flex; +} + +#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer { + flex-grow: 1; + display: inline-block; +} + +/* Add element toolbar button */ +#inspector-element-add-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + list-style-image: url("chrome://devtools/skin/images/add.svg"); + -moz-user-focus: normal; +} + +#inspector-searchlabel { + overflow: hidden; + margin-inline-end: 2px; +} + +#inspector-search { + flex: unset; +} + +/* Eyedropper toolbar button */ + +#inspector-eyedropper-toggle { + /* Required to display tooltip when eyedropper is disabled in non-HTML documents */ + pointer-events: auto; +} + +#inspector-eyedropper-toggle::before { + background-image: var(--eyedropper-image); +} + +#inspector-sidebar-toggle-box { + line-height: initial; +} + +#inspector-breadcrumbs-toolbar { + padding: 0px; + border-bottom-width: 0px; + border-top-width: 1px; + border-top-color: var(--breadcrumbs-border-color); + /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't + get mistaken as a splitter */ + background-color: var(--theme-body-background); + display: block; + position: relative; +} + +#inspector-breadcrumbs-toolbar, +#inspector-breadcrumbs-toolbar * { + box-sizing: border-box; +} + +#inspector-breadcrumbs { + display: flex; + + /* Break out of the XUL flexbox, so the splitter can still shrink the + markup view even if the contents of the breadcrumbs are wider than + the new width. */ + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +#inspector-breadcrumbs .scrollbutton-up, +#inspector-breadcrumbs .scrollbutton-down { + flex: 0; + display: flex; + align-items: center; +} + +#inspector-breadcrumbs .html-arrowscrollbox-inner { + flex: 1; + display: flex; + overflow: hidden; +} + +#inspector-breadcrumbs .breadcrumbs-widget-item { + white-space: nowrap; + flex-shrink: 0; + font: message-box; +} + +#inspector-sidebar-container { + overflow: hidden; + position: relative; + height: 100%; +} + +#inspector-sidebar { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +/* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */ +.inspector-tabpanel > * { + -moz-user-focus: normal; +} + +/* "no results" warning message displayed in the ruleview and in the computed view */ + +#ruleview-no-results, +#computedview-no-results { + color: var(--theme-body-color-inactive); + text-align: center; + margin: 5px; +} + +/* Markup Box */ + +iframe { + border: 0; +} + +#markup-box { + width: 100%; + flex: 1; + min-height: 0; +} + +#markup-box > iframe { + height: 100%; + width: 100%; +} + diff --git a/devtools/client/themes/jit-optimizations.css b/devtools/client/themes/jit-optimizations.css new file mode 100644 index 000000000..363810504 --- /dev/null +++ b/devtools/client/themes/jit-optimizations.css @@ -0,0 +1,108 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/** + * JIT View + */ + +#jit-optimizations-view { + width: 350px; + min-width: 200px; + white-space: nowrap; + --jit-tree-row-height: 14; + --jit-tree-header-height: 16; +} + +/* Override layout styles applied by minimal-xul.css */ +#jit-optimizations-view div { + display: block; +} +#jit-optimizations-view span { + display: inline-block; +} + +#jit-optimizations-view > div { + /* For elements that need to flex to fill the available space and/or + * scroll on overflow, we need to use the old flexbox model, since the + * parent nodes are in the XUL namespace. The new flexbox model can't + * properly compute dimensions and will ignore `flex: ${number}` properties, + * since no other parent node has a flex display. */ + display: -moz-box; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +#jit-optimizations-view .optimization-header, +#jit-optimizations-view .tree * { + /* We can, however, display child nodes as flex to take advantage of + * horizontal/vertical inlining. */ + display: flex; +} + +#jit-optimizations-view .optimization-header { + height: var(--jit-tree-header-height); + padding: 2px 5px; + background-color: var(--theme-tab-toolbar-background); +} + +#jit-optimizations-view .header-title { + font-weight: bold; + padding-inline-end: 7px; +} + +#jit-optimizations-view .tree { + display: -moz-box; + -moz-box-flex: 1; + -moz-box-orient: vertical; + overflow: auto; + background-color: var(--theme-body-background); +} + +#jit-optimizations-view .tree-node { + height: var(--jit-tree-row-height); +} + +#jit-optimizations-view .tree-node button { + display: none; +} + +#jit-optimizations-view .optimization-outcome.success { + color: var(--theme-highlight-green); +} +#jit-optimizations-view .optimization-outcome.failure { + color: var(--theme-highlight-red); +} + +.theme-dark .opt-icon::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg); +} +.theme-light .opt-icon::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} + +.opt-icon::before { + display: inline-block; + content: ""; + background-repeat: no-repeat; + background-size: 72px 60px; + /* show grey "i" bubble by default */ + background-position: -36px -36px; + width: 10px; + height: 10px; + max-height: 12px; +} + +.opt-icon::before { + margin: 1px 6px 0 0; +} + +.opt-icon.warning::before { + background-position: -24px -24px; +} + +/* Frame Component */ +.frame-link { + margin-inline-start: 7px; +} diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css new file mode 100644 index 000000000..d04d3ff4c --- /dev/null +++ b/devtools/client/themes/layout.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/. */ + +#layoutview-container { + height: 100%; + width: 100%; +} + +.layoutview-no-grids { + font-style: italic; + text-align: center; + padding: 0.5em; +} diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css new file mode 100644 index 000000000..7604123e8 --- /dev/null +++ b/devtools/client/themes/light-theme.css @@ -0,0 +1,338 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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(resource://devtools/client/themes/variables.css); +@import url(resource://devtools/client/themes/common.css); +@import url(toolbars.css); +@import url(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); +} + +::-moz-selection { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-darker { + background: var(--theme-selection-background-semitransparent); +} + +.theme-selected, +.CodeMirror-hint-active { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-contrast, +.variable-or-property:not([overridden])[changed] { + background: var(--theme-contrast-background); +} + +.theme-link, +.cm-s-mozilla .cm-link, +.CodeMirror-Tern-type { + color: var(--theme-highlight-blue); +} + +/* + * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion + * failures in debug builds. + */ +.theme-link:visited, +.cm-s-mozilla .cm-link:visited { + color: var(--theme-highlight-blue); +} + +.theme-comment, +.cm-s-mozilla .cm-meta, +.cm-s-mozilla .cm-hr, +.cm-s-mozilla .cm-comment, +.variable-or-property .token-undefined, +.variable-or-property .token-null, +.CodeMirror-Tern-completion-unknown:before { + color: var(--theme-comment); +} + +.theme-gutter { + background-color: var(--theme-tab-toolbar-background); + color: var(--theme-content-color3); + border-color: var(--theme-splitter-color); +} + +.theme-separator { /* grey */ + border-color: #cddae5; +} + +.cm-s-mozilla .cm-unused-line { + text-decoration: line-through; + text-decoration-color: var(--theme-highlight-bluegrey); +} + +.cm-s-mozilla .cm-executed-line { + background-color: #fcfffc; +} + +.theme-fg-color1, +.cm-s-mozilla .cm-number, +.variable-or-property .token-number, +.variable-or-property[return] > .title > .name, +.variable-or-property[scope] > .title > .name { + color: var(--theme-highlight-purple); +} + +.CodeMirror-Tern-completion-number:before { + background-color: hsl(72,100%,27%); +} + +.theme-fg-color2, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-builtin, +.cm-s-mozilla .cm-property, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-red); +} + +.cm-s-mozilla .cm-def { + color: var(--theme-body-color); +} + +.CodeMirror-Tern-completion-object:before { + background-color: hsl(208,56%,40%); +} + +.theme-fg-color3, +.cm-s-mozilla .cm-variable, +.cm-s-mozilla .cm-tag, +.cm-s-mozilla .cm-header, +.cm-s-mozilla .cm-bracket, +.cm-s-mozilla .cm-qualifier, +.variables-view-property > .title > .name { + color: var(--theme-highlight-blue); +} + +.CodeMirror-Tern-completion-array:before { + background-color: var(--theme-highlight-bluegrey); +} + +.theme-fg-color4 { + color: var(--theme-highlight-orange); +} + +.theme-fg-color5, +.cm-s-mozilla .cm-keyword { + color: var(--theme-highlight-red); +} + +.theme-fg-color6, +.cm-s-mozilla .cm-string, +.cm-s-mozilla .cm-string-2, +.variable-or-property .token-string, +.CodeMirror-Tern-farg { + color: var(--theme-highlight-purple); +} + +.CodeMirror-Tern-completion-string:before, +.CodeMirror-Tern-completion-fn:before { + background-color: hsl(24,85%,39%); +} + +.theme-fg-color7, +.cm-s-mozilla .cm-atom, +.cm-s-mozilla .cm-quote, +.cm-s-mozilla .cm-error, +.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-fg-contrast { /* To be used for text on theme-bg-contrast */ + color: black; +} + +.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); +} + +.ruleview-swatch, +.computedview-colorswatch { + box-shadow: 0 0 0 1px #c4c4c4; +} + +/* 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, +.cm-s-mozilla .cm-variable-2, +.cm-s-mozilla .cm-variable-3, +.cm-s-mozilla .cm-operator, +.cm-s-mozilla .cm-special { + color: var(--theme-body-color); +} + +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { + border-left: solid 1px black; +} + +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ + background: rgb(185, 215, 253); +} + +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ + background: rgb(176, 176, 176); +} + +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(185, 215, 253, .35); +} + +div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ + outline: solid 1px rgba(0, 0, 0, .25); + color: black; +} + +/* 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; +} + +/* Highlight for evaluating current statement. */ +div.CodeMirror span.eval-text { + background-color: #ccd; +} + +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ + color: var(--theme-content-color3); +} + +.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ + border-right-color: var(--theme-splitter-color); + background-color: var(--theme-sidebar-background); +} + +.cm-s-markup-view pre { + line-height: 1.4em; + min-height: 1.4em; +} + +/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */ + +.theme-tooltip-panel .panel-arrowcontent { + padding: 4px; + background: rgba(255, 255, 255, .9); + border-radius: 5px; + box-shadow: none; + border: 3px solid #d9e1e8; +} + +/* Overring panel arrow images to fit with our light and dark themes */ + +.theme-tooltip-panel .panel-arrow { + --arrow-margin: -4px; +} + +:root[platform="win"] .theme-tooltip-panel .panel-arrow { + --arrow-margin: -7px; +} + +.theme-tooltip-panel .panel-arrow[side="top"], +.theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png"); + /* !important is needed to override the popup.css rules in toolkit/themes */ + width: 39px !important; + height: 16px !important; +} + +.theme-tooltip-panel .panel-arrow[side="left"], +.theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png"); + /* !important is needed to override the popup.css rules in toolkit/themes */ + width: 16px !important; + height: 39px !important; +} + +.theme-tooltip-panel .panel-arrow[side="top"] { + margin-bottom: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + margin-top: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + margin-right: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="right"] { + margin-left: var(--arrow-margin); +} + +@media (min-resolution: 1.1dppx) { + .theme-tooltip-panel .panel-arrow[side="top"], + .theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png"); + } + + .theme-tooltip-panel .panel-arrow[side="left"], + .theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png"); + } +} + +.theme-tooltip-panel .devtools-tooltip-simple-text { + color: black; + border-bottom: 1px solid #d9e1e8; +} + +.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { + border-bottom: 0; +} + +.CodeMirror-hints, +.CodeMirror-Tern-tooltip { + box-shadow: 0 0 4px rgba(128, 128, 128, .5); + background-color: var(--theme-sidebar-background); +} diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css new file mode 100644 index 000000000..4b4cfd031 --- /dev/null +++ b/devtools/client/themes/markup.css @@ -0,0 +1,351 @@ +/* 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 { + --markup-outline: var(--theme-splitter-color); +} + +.theme-dark:root { + --markup-outline: var(--theme-highlight-pink); +} + +* { + padding: 0; + margin: 0; +} + +:root { + -moz-control-character-visibility: visible; +} + +body { + -moz-user-select: none; +} + +/* Force height and width (possibly overflowing) from inline elements. + * This allows long overflows of text or input fields to still be styled with + * the container, rather than the background disappearing when scrolling */ +#root { + float: left; + min-width: 100%; +} + +/* Don't display a parent-child outline for the root elements */ +#root > ul > li > .children { + background: none; +} + +html.dragging { + overflow-x: hidden; +} + +body.dragging .tag-line { + cursor: grabbing; +} + +#root-wrapper:after { + content: ""; + display: block; + clear: both; + position:relative; +} + +.html-editor { + display: none; + position: absolute; + z-index: 2; + + /* Use the same margin/padding trick used by .child tags to ensure that + * the editor covers up any content to the left (including expander arrows + * and hover effects). */ + margin-left: -1000em; + padding-left: 1000em; +} + +.html-editor-inner { + border: solid .1px; + flex: 1 1 auto; + + /* Keep the editor away from the markup view floating scrollbars */ + margin-inline-end: 12px; +} + +.html-editor iframe { + height: 100%; + width: 100%; + border: none; + margin: 0; + padding: 0; +} + +.children { + list-style: none; + padding: 0; + margin: 0; +} + +/* Tags are organized in a UL/LI tree and indented thanks to a left padding. + * A very large padding is used in combination with a slightly smaller margin + * to make sure childs actually span from edge-to-edge. */ +.child { + margin-left: -1000em; + padding-left: 1001em; +} + +/* Normally this element takes space in the layout even if it's position: relative + * by adding height: 0 we let surrounding elements to fill the blank space */ +.child.dragging { + position: relative; + pointer-events: none; + opacity: 0.7; + z-index: 1; + height: 0; +} + +/* Indicates a tag-line in the markup-view as being an active drop target by + * drawing a horizontal line where the dragged element would be inserted if + * dropped here */ +.tag-line.drop-target::before, +.tag-line.drag-target::before { + content: ''; + position: absolute; + top: 0; + width: 100%; + /* Offset these by 1000px to make sure they cover the full width of the view */ + padding-left: 1000px; + left: -1000px; +} + +.tag-line.drag-target::before { + border-top: 2px solid var(--theme-content-color2); +} + +.tag-line.drop-target::before { + border-top: 2px solid var(--theme-contrast-background); +} + +/* In case the indicator is put on the closing .tag-line, the indentation level + * will become misleading, so we push it forward to match the indentation level */ +ul.children + .tag-line::before { + margin-left: 14px; +} + +.tag-line { + min-height: 1.4em; + line-height: 1.4em; + position: relative; + cursor: default; + padding-left: 2px; +} + +.tag-line[selected] + .children { + background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline)); + background-repeat: no-repeat; + /* Shorten the outline height by 4px to account for the 2px top padding and + * allow for a 2px bottom padding */ + background-size: 1.5px calc(100% - 4px); + /* Align the outline to under the expander arrow and provide 2px top + * padding */ + background-position: -6px 2px; + border-left: 6px solid transparent; + margin-left: -6px; +} + +.html-editor-container { + position: relative; + min-height: 200px; +} + +/* This extra element placed in each tag is positioned absolutely to cover the + * whole tag line and is used for background styling (when a selection is made + * or when the tag is flashing) */ +.tag-line .tag-state { + position: absolute; + left: -1000em; + right: 0; + height: 100%; + z-index: 0; +} + +.expander { + display: inline-block; + margin-left: -14px; + vertical-align: middle; + /* Make sure the expander still appears above the tag-state */ + position: relative; + z-index: 1; +} + +.child.collapsed .child, .child.collapsed .children { + display: none; +} + +.child > .tag-line:first-child .close { + display: none; +} + +.child.collapsed > .tag-line:first-child .close { + display: inline; +} + +.child.collapsed > .tag-line ~ .tag-line { + display: none; +} + +.child.collapsed .close { + display: inline; +} + +/* Hide HTML void elements (img, hr, br, …) closing tag when the element is not + * expanded (it can be if it has pseudo-elements attached) */ +.child.collapsed > .tag-line .void-element .close { + display: none; +} + +.closing-bracket { + pointer-events: none; +} + +.newattr { + display: inline-block; + width: 1em; + height: 1ex; + margin-right: -1em; + padding: 1px 0; +} + +.attr-value .link { + text-decoration: underline; +} + +.newattr:focus { + margin-right: 0; +} + +.flash-out { + transition: background .5s; +} + +.markupview-events { + display: none; + cursor: pointer; +} + +.editor { + /* Make sure the editor still appears above the tag-state */ + position: relative; + z-index: 1; +} + +.editor.text { + display: inline-block; +} + +.editor.text pre, +.editor.comment pre { + font: inherit; +} + +/* Whitespace only text nodes are sometimes shown in the markup-view, and when they do + they get a greyed-out whitespace symbol so users know what they are */ +.editor.text .whitespace { + padding: 0 .5em; +} + +.editor.text .whitespace::before { + content: ""; + display: inline-block; + height: 4px; + width: 4px; + border: 1px solid var(--theme-body-color-inactive); + border-radius: 50%; +} + +.tag-line[selected] .editor.text .whitespace::before { + border-color: white; +} + +.more-nodes { + padding-left: 16px; +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; +} + +/* Draw a circle next to nodes that have a pseudo class lock. + Center vertically with the 1.4em line height on .tag-line */ +.child.pseudoclass-locked::before { + content: ""; + background: var(--theme-highlight-lightorange); + border-radius: 50%; + width: .8em; + height: .8em; + margin-top: .3em; + left: 1px; + position: absolute; + z-index: 1; +} + +/* Firebug Theme */ + +.theme-firebug .theme-fg-color3 { + color: var(--theme-graphs-full-blue); +} + +.theme-firebug .open, +.theme-firebug .close, +.theme-firebug .attr-name.theme-fg-color2 { + color: var(--theme-highlight-purple); +} + +.theme-firebug .attr-value.theme-fg-color6 { + color: var(--theme-highlight-red); +} + +.theme-firebug .markupview-events { + font-size: var(--theme-toolbar-font-size); +} + +/* Selected nodes in the tree should have light selected text. + theme-selected doesn't work in this case since the text is a + sibling of the class, not a child. */ +.theme-selected ~ .editor, +.theme-selected ~ .editor .theme-fg-color1, +.theme-selected ~ .editor .theme-fg-color2, +.theme-selected ~ .editor .theme-fg-color3, +.theme-selected ~ .editor .theme-fg-color4, +.theme-selected ~ .editor .theme-fg-color5, +.theme-selected ~ .editor .theme-fg-color6, +.theme-selected ~ .editor .theme-fg-color7 { + color: var(--theme-selection-color); +} + +/* Make sure even text nodes are white when selected in the Inspector panel. */ +.theme-firebug .theme-selected ~ .editor .open, +.theme-firebug .theme-selected ~ .editor .close { + color: var(--theme-selection-color); +} + +/* In case a node isn't displayed in the page, we fade the syntax highlighting */ +.not-displayed .open, +.not-displayed .close { + opacity: .7; +} + +/* Events */ +.markupview-events { + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0px 2px; + margin-inline-start: 5px; + -moz-user-select: none; +} + +.markupview-events { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); +} diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css new file mode 100644 index 000000000..f77609621 --- /dev/null +++ b/devtools/client/themes/memory.css @@ -0,0 +1,637 @@ +/* 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 this panel that aren't defined by the themes */ +.theme-dark { + --cell-border-color: rgba(255,255,255,0.15); + --cell-border-color-light: rgba(255,255,255,0.1); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(86, 117, 185, 0.15); + --row-hover-background-color: rgba(86, 117, 185, 0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +html, body, #app, #memory-tool { + height: 100%; +} + +#memory-tool { + /** + * Flex: contains two children: .devtools-toolbar and #memory-tool-container, + * which need to be laid out vertically. The toolbar has a fixed height and + * the container needs to flex to fill out all remaining vertical space. + */ + display: flex; + flex-direction: column; + --sidebar-width: 185px; + /** + * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT + * in `devtools/client/memory/components/heap.js`. + */ + --heap-tree-row-height: 18px; + --heap-tree-header-height: 18px; +} + +/** + * Toolbar + */ + +.devtools-toolbar { + /** + * Flex: contains several children, which need to be laid out horizontally, + * and aligned vertically in the middle of the container. + */ + display: flex; + align-items: center; +} + +.devtools-toolbar > .toolbar-group:nth-of-type(1) { + /** + * We want this to be exactly at a `--sidebar-width` distance from the + * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding. + */ + flex: 0 0 calc(var(--sidebar-width) - 4px); + border-inline-end: 1px solid var(--theme-splitter-color); + margin-inline-end: 5px; + padding-right: 1px; +} + +.devtools-toolbar > .toolbar-group { + /** + * Flex: contains several children, which need to be laid out horizontally, + * and aligned vertically in the middle of the container. + */ + display: flex; + align-items: center; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.devtools-toolbar > .toolbar-group > label { + /** + * Flex: contains form controls and text, which need to be laid out + * horizontally, vertically aligned in the middle of the container. + */ + display: flex; + align-items: center; + margin-inline-end: 5px; +} + +.devtools-toolbar > .toolbar-group > label.display-by > span { + margin-inline-end: 5px; +} + +.devtools-toolbar > .toolbar-group > label.label-by > span { + margin-inline-end: 5px; +} + +.devtools-toolbar > label { + margin-inline-end: 5px; +} + +#select-view { + margin-inline-start: 5px; +} + +#take-snapshot::before { + background-image: url(images/command-screenshot.svg); +} + +#clear-snapshots::before { + background-image: url(chrome://devtools/skin/images/clear.svg); +} + +#diff-snapshots::before { + background-image: url(chrome://devtools/skin/images/diff.svg); +} + +#import-snapshot::before { + background-image: url(chrome://devtools/skin/images/import.svg); +} + +#record-allocation-stacks-label, +#pop-view-button-label { + border-inline-end: 1px solid var(--theme-splitter-color); + padding-inline-end: 5px; +} + +.spacer { + flex: 1; +} + +#filter { + align-self: stretch; + margin: 2px; +} + +/** + * Container (sidebar + main panel) + */ + +#memory-tool-container { + /** + * Flex: contains two children: .list (sidebar) and #heap-view (main panel), + * which need to be laid out horizontally. The sidebar has a fixed width and + * the main panel needs to flex to fill out all remaining horizontal space. + */ + display: flex; + /** + * Flexing to fill out remaining vertical space. The preceeding sibling is + * the toolbar. @see #memory-tool. + */ + flex: 1; + overflow: hidden; +} + +/** + * Sidebar + */ + +.list { + width: var(--sidebar-width); + min-width: var(--sidebar-width); + overflow-y: auto; + margin: 0; + padding: 0; + background-color: var(--theme-sidebar-background); + border-inline-end: 1px solid var(--theme-splitter-color); +} + +.snapshot-list-item { + /** + * Flex: contains several children, which need to be laid out vertically. + */ + display: flex; + flex-direction: column; + color: var(--theme-body-color); + border-bottom: 1px solid rgba(128,128,128,0.15); + padding: 8px; + cursor: default; +} + +.snapshot-list-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.snapshot-list-item.selected ::-moz-selection { + background-color: var(--theme-selection-color); + color: var(--theme-selection-background); +} + +.snapshot-list-item .snapshot-info { + display: flex; + justify-content: space-between; + font-size: 90%; +} + +.snapshot-list-item .snapshot-title { + display: flex; + justify-content: space-between; +} + +.snapshot-list-item .save { + text-decoration: underline; + cursor: pointer; +} + +.snapshot-list-item .delete { + cursor: pointer; + position: relative; + min-height: 1em; + min-width: 1.3em; +} + +.snapshot-list-item.selected .delete::before { + filter: invert(1); +} + +.snapshot-list-item .delete::before { + background-image: url("chrome://devtools/skin/images/close.svg"); + background-position: 0.2em 0; +} + +.snapshot-list-item > .snapshot-title { + margin-bottom: 14px; +} + +.snapshot-list-item > .snapshot-title > input[type=checkbox] { + margin: 0; + margin-inline-end: 5px; +} + +.snapshot-list-item > .snapshot-state, +.snapshot-list-item > .snapshot-totals { + font-size: 90%; + color: var(--theme-body-color-alt); +} + +.snapshot-list-item.selected > .snapshot-state, +.snapshot-list-item.selected > .snapshot-totals { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/** + * Main panel + */ + +.vbox { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: auto; + padding: 0; + margin: 0; +} + +.vbox > * { + flex: 1; + + /** + * By default, flex items have min-width: auto; + * (https://drafts.csswg.org/css-flexbox/#min-size-auto) + */ + min-width: 0; +} + +#heap-view { + /** + * Flex: contains a .heap-view-panel which needs to fill out all the + * available space, horizontally and vertically. + */; + display: flex; + /** + * Flexing to fill out remaining horizontal space. The preceeding sibling + * is the sidebar. @see #memory-tool-container. + */ + flex: 1; + background-color: var(--theme-body-background); + + /** + * By default, flex items have min-width: auto; + * (https://drafts.csswg.org/css-flexbox/#min-size-auto) + */ + min-width: 0; + font-size: 90%; +} + +#heap-view > .heap-view-panel { + /** + * Flex: can contain several children, including a tree with a header and + * multiple rows, all of which need to be laid out vertically. When the + * tree is visible, the header has a fixed height and tree body needs to flex + * to fill out all remaining vertical space. + */ + display: flex; + flex-direction: column; + /** + * Flexing to fill out remaining horizontal space. @see #heap-view. + */ + flex: 1; + + /** + * By default, flex items have min-width: auto; + * (https://drafts.csswg.org/css-flexbox/#min-size-auto) + */ + min-width: 0; +} + +#heap-view > .heap-view-panel > .snapshot-status, +#heap-view > .heap-view-panel > .take-snapshot, +#heap-view .empty, +#shortest-paths-select-node-msg { + margin: auto; + margin-top: 65px; + font-size: 120%; +} + +#heap-view > .heap-view-panel > .take-snapshot { + padding: 5px; +} + +#heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre { + background-color: var(--theme-body-background); + margin: 20px; + padding: 20px; +} + +/** + * Heap tree view header + */ + +.header { + /** + * Flex: contains several span columns, all of which need to be laid out + * horizontally. All columns except the last one have percentage widths, and + * the last one needs to flex to fill out all remaining horizontal space. + */ + display: flex; + color: var(--theme-body-color); + background-color: var(--theme-tab-toolbar-background); + border-bottom: 1px solid var(--cell-border-color); + flex: 0; +} + +.header > span, +#shortest-paths-header { + text-overflow: ellipsis; + line-height: var(--heap-tree-header-height); + justify-content: center; + justify-self: center; + white-space: nowrap; +} + +.header > span { + overflow: hidden; +} + +.header > .heap-tree-item-name { + justify-content: flex-start; +} + +#shortest-paths { + background-color: var(--theme-body-background); + overflow: hidden; + height: 100%; + width: 100%; +} + +#shortest-paths-select-node-msg { + justify-self: center; +} + +/** + * Heap tree view body + */ + +.tree { + /** + * Flexing to fill out remaining vertical space. @see .heap-view-panel + */ + flex: 1; + overflow-y: auto; + background-color: var(--theme-body-background); +} + +.tree-node { + height: var(--heap-tree-row-height); + line-height: var(--heap-tree-row-height); + cursor: default; +} + +.children-pointer { + padding-inline-end: 5px; +} + +.children-pointer:dir(rtl) { + transform: scaleX(-1); +} + +/** + * Heap tree view columns + */ + +.heap-tree-item { + /** + * Flex: contains several span columns, all of which need to be laid out + * horizontally. All columns except the last one have percentage widths, and + * the last one needs to flex to fill out all remaining horizontal space. + */ + display: flex; +} + +.tree-node-odd { + background-color: var(--row-alt-background-color); +} + +.tree-node:hover { + background-color: var(--row-hover-background-color); +} + +.heap-tree-item.focused { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.heap-tree-item.focused ::-moz-selection { + background-color: var(--theme-selection-color); + color: var(--theme-selection-background); +} + +.heap-tree-item-individuals, +.heap-tree-item-bytes, +.heap-tree-item-count, +.heap-tree-item-total-bytes, +.heap-tree-item-total-count { + /** + * Flex: contains several subcolumns, which need to be laid out horizontally. + * These subcolumns may have specific widths or need to flex. + */ + display: flex; + /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */ + text-align: right; + border-inline-end: var(--cell-border-color) 1px solid; +} + +.heap-tree-item-count, +.heap-tree-item-total-count, +.heap-tree-item-bytes, +.heap-tree-item-total-bytes { + width: 10%; + /* + * Provision for up to 19 characters: + * + * GG_MMM_KKK_BBB_100% + * | ||| | + * '------------'|'--' + * 14 ch for 10s | 4 ch for the largest % we will + * of GB and | normally see: "100%" + * spaces every | + * 3 digits | + * | + * A space between the number and percent + */ + min-width: 19ch; +} + +.heap-tree-item-name { + /** + * Flex: contains an .arrow and some text, which need to be laid out + * horizontally, vertically aligned in the middle of the container. + */ + display: flex; + align-items: center; + /** + * Flexing to fill out remaining vertical space. + * @see .header and .heap-tree-item */ + flex: 1; + padding-inline-start: 5px; +} + +/** + * Heap tree view subcolumns + */ + +.heap-tree-number, +.heap-tree-percent, +.heap-tree-item-name { + white-space: nowrap; +} + +.heap-tree-number { + padding: 0 3px; + flex: 1; + color: var(--theme-content-color3); + /* Make sure number doesn't appear backwards on RTL locales */ + direction: ltr; +} + +.heap-tree-percent { + padding-inline-start: 3px; + padding-inline-end: 3px; +} + +.heap-tree-number, +.heap-tree-percent { + font-family: var(--monospace-font-family); +} + +.heap-tree-percent { + width: 4ch; +} + +.heap-tree-item.focused .heap-tree-number, +.heap-tree-item.focused .heap-tree-percent { + color: inherit; +} + +.heap-tree-item-individuals { + width: 38px; + min-width: 20px; + overflow: hidden; + margin: 0; +} + +.heap-tree-item-individuals > button { + height: 10px; + width: 32px; + + /* Override default styles for toolbar buttons to fix entire row height. */ + margin: 0 auto !important; + padding: 0; +} + +/** + * Tree map + */ + +.tree-map-container { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +} + +/** + * Heap tree errors. + */ + +.error::before { + content: ""; + display: inline-block; + width: 12px; + height: 12px; + max-height: 12px; + background-image: url(chrome://devtools/skin/images/webconsole.svg); + background-size: 72px 60px; + background-position: -24px -24px; + background-repeat: no-repeat; + margin: 0px; + margin-top: 2px; + margin-inline-end: 5px; +} + +.theme-light .error::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} + +/** + * Frame View components + */ + +.separator, +.not-available, +.heap-tree-item-address { + opacity: .5; + margin-left: .5em; + margin-right: .5em; +} + +.heap-tree-item-address { + font-family: monospace; +} + +.no-allocation-stacks { + border-color: var(--theme-splitter-color); + border-style: solid; + border-width: 0px 0px 1px 0px; + text-align: center; + padding: 5px; +} + +/** + * Dagre-D3 graphs + */ + +svg { + --arrow-color: var(--theme-splitter-color); + --text-color: var(--theme-body-color-alt); +} + +.theme-dark svg { + --arrow-color: var(--theme-body-color-alt); +} + +svg #arrowhead { + /* !important is needed to override inline style */ + fill: var(--arrow-color) !important; +} + +.edgePath path { + stroke-width: 1px; + fill: none; + stroke: var(--arrow-color); +} + +g.edgeLabel rect { + fill: var(--theme-body-background); +} + +g.edgeLabel tspan { + fill: var(--text-color); +} + +.nodes rect { + stroke-width: 1px; + stroke: var(--theme-splitter-color); + fill: var(--theme-toolbar-background); +} + +text { + font-size: 1.25em; + fill: var(--text-color); + /* Make sure text stays inside its container in RTL locales */ + direction: ltr; +} diff --git a/devtools/client/themes/moz.build b/devtools/client/themes/moz.build new file mode 100644 index 000000000..543f4eff0 --- /dev/null +++ b/devtools/client/themes/moz.build @@ -0,0 +1,16 @@ +# -*- 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/. + +DIRS += [ + 'audio', +] + +DevToolsModules( + 'common.css', + 'splitters.css', + 'toolbars.css', + 'variables.css', +) diff --git a/devtools/client/themes/netmonitor.css b/devtools/client/themes/netmonitor.css new file mode 100644 index 000000000..fea634a0e --- /dev/null +++ b/devtools/client/themes/netmonitor.css @@ -0,0 +1,975 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +#toolbar-labels { + overflow: hidden; +} + +#react-clear-button-hook, +#react-details-pane-toggle-hook { + display: flex; +} + +/** + * Collapsed details pane needs to be truly hidden to prevent both accessibility + * tools and keyboard from accessing its contents. + */ +#details-pane.pane-collapsed { + visibility: hidden; +} + +#details-pane-toggle[disabled] { + display: none; +} + +#custom-pane { + overflow: auto; +} + +#response-content-image-box { + overflow: auto; +} + +#network-statistics-charts { + overflow: auto; +} + +.cropped-textbox .textbox-input { + /* workaround for textbox not supporting the @crop attribute */ + text-overflow: ellipsis; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #toolbar-spacer, + #details-pane-toggle, + #details-pane.pane-collapsed, + .requests-menu-waterfall, + #requests-menu-network-summary-button > .toolbarbutton-text { + display: none; + } +} + +:root.theme-dark { + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); + + --timing-blocked-color: rgba(235, 83, 104, 0.8); + --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ + --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ + --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */ + --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */ + --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */ + + --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending); + --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending); +} + +:root.theme-light { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); + + --timing-blocked-color: rgba(235, 83, 104, 0.8); + --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ + --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ + --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */ + --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */ + --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */ + + --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending); + --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending); +} + +:root.theme-firebug { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); + + --timing-blocked-color: rgba(235, 83, 104, 0.8); /* red */ + --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ + --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ + --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */ + --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */ + --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */ + + --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg); + --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg); +} + +#requests-menu-empty-notice { + margin: 0; + padding: 12px; + font-size: 120%; +} + +#notice-perf-message { + margin-top: 2px; +} + +#requests-menu-perf-notice-button { + min-width: 30px; + min-height: 26px; + margin: 0; + list-style-image: url(images/profiler-stopwatch.svg); +} + +/* Make sure the icon is visible on Linux (to overwrite a rule + in xul.css that hides the icon if there is no label. + See also bug 1278050. */ +#requests-menu-perf-notice-button .button-icon { + display: block; +} + +#requests-menu-perf-notice-button .button-text { + display: none; +} + +#requests-menu-reload-notice-button { + min-height: 26px; + margin: 0; + background-color: var(--theme-toolbar-background); +} + +/* Network requests table */ + +#requests-menu-toolbar { + padding: 0; +} + +.theme-firebug #requests-menu-toolbar { + height: 16px !important; +} + +.requests-menu-subitem { + padding: 3px; +} + +.requests-menu-header-button { + -moz-appearance: none; + background-color: transparent; + border-image: linear-gradient(transparent 15%, + var(--theme-splitter-color) 15%, + var(--theme-splitter-color) 85%, + transparent 85%) 1 1; + border-style: solid; + border-width: 0; + border-inline-start-width: 1px; + min-width: 1px; + min-height: 24px; + margin: 0; + padding-bottom: 2px; + padding-inline-start: 13px; + padding-top: 2px; + text-align: center; + color: inherit; + font-weight: inherit !important; +} + +.requests-menu-header:first-child .requests-menu-header-button { + border-width: 0; +} + +.requests-menu-header-button:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.requests-menu-header-button > .button-box > .button-icon, +#requests-menu-waterfall-image { + display: -moz-box; + height: 4px; + margin-inline-end: 6px; + -moz-box-ordinal-group: 2; + width: 7px; +} + +.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon, +.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image { + list-style-image: var(--sort-ascending-image); +} + +.requests-menu-header-button[sorted=descending] > .button-box > .button-icon, +.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image { + list-style-image: var(--sort-descending-image); +} + +.requests-menu-header-button > .button-box > .button-text, +#requests-menu-waterfall-label-wrapper { + -moz-box-flex: 1; +} + +.requests-menu-header-button[sorted], +.requests-menu-header-button[sorted]:hover { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.requests-menu-header-button[sorted], +.requests-menu-header[active] + .requests-menu-header .requests-menu-header-button { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; +} + +/* Firebug theme support for Network panel header */ + +.theme-firebug .requests-menu-header { + padding: 0 !important; + font-weight: bold; + background: linear-gradient(rgba(255, 255, 255, 0.05), + rgba(0, 0, 0, 0.05)), + #C8D2DC; +} + +.theme-firebug .requests-menu-header-button { + min-height: 17px; +} + +.theme-firebug .requests-header-menu-button[sorted] { + background-color: #AAC3DC; +} + +.theme-firebug .requests-header-menu:hover:active { + background-image: linear-gradient(rgba(0, 0, 0, 0.1), + transparent); +} + + +/* Network requests table: specific column dimensions */ + +.requests-menu-status { + max-width: 6em; + text-align: center; + width: 10vw; +} + +.requests-menu-method, +.requests-menu-method-box { + max-width: 7em; + text-align: center; + width: 10vw; +} + +.requests-menu-icon-and-file { + width: 22vw; +} + +.requests-menu-icon { + background: #fff; + width: calc(1em + 4px); + height: calc(1em + 4px); + margin: -4px 0px; + margin-inline-end: 4px; +} + +.requests-menu-icon { + outline: 1px solid var(--table-splitter-color); +} + +.requests-menu-security-and-domain { + width: 14vw; +} + +.requests-security-state-icon { + width: 16px; + height: 16px; + margin-inline-end: 4px; +} + +.side-menu-widget-item.selected .requests-security-state-icon { + filter: brightness(1.3); +} + +.security-state-insecure { + list-style-image: url(chrome://devtools/skin/images/security-state-insecure.svg); +} + +.security-state-secure { + list-style-image: url(chrome://devtools/skin/images/security-state-secure.svg); +} + +.security-state-weak { + list-style-image: url(chrome://devtools/skin/images/security-state-weak.svg); +} + +.security-state-broken { + list-style-image: url(chrome://devtools/skin/images/security-state-broken.svg); +} + +.security-state-local { + list-style-image: url(chrome://devtools/skin/images/globe.svg); +} + +.requests-menu-type, +.requests-menu-size { + max-width: 6em; + text-align: center; + width: 8vw; +} + +.requests-menu-cause { + max-width: 8em; + width: 8vw; +} + +.requests-menu-cause-stack { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0 2px; + margin: 0; + margin-inline-end: 3px; + -moz-user-select: none; +} + +.requests-menu-transferred { + max-width: 8em; + text-align: center; + width: 8vw; +} + +.side-menu-widget-item.selected .requests-menu-transferred.theme-comment { + color: var(--theme-selection-color); +} + +/* Network requests table: status codes */ + +.requests-menu-status-code { + margin-inline-start: 3px !important; + width: 3em; + margin-inline-end: -3em !important; +} + +.requests-menu-status-icon { + background: #fff; + height: 10px; + width: 10px; + margin-inline-start: 5px; + margin-inline-end: 5px; + border-radius: 10px; + transition: box-shadow 0.5s ease-in-out; +} + +.side-menu-widget-item.selected .requests-menu-status-icon { + filter: brightness(1.3); +} + +.requests-menu-status-icon:not([code]) { + background-color: var(--theme-content-color2); +} + +.requests-menu-status-icon[code="cached"] { + border: 2px solid var(--theme-content-color2); + background-color: transparent; +} + +.requests-menu-status-icon[code^="1"] { + background-color: var(--theme-highlight-blue); +} + +.requests-menu-status-icon[code^="2"] { + background-color: var(--theme-highlight-green); +} + +/* 3xx are triangles */ +.requests-menu-status-icon[code^="3"] { + background-color: transparent; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid var(--theme-highlight-lightorange); + border-radius: 0; +} + +/* 4xx and 5xx are squares - error codes */ +.requests-menu-status-icon[code^="4"] { + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ +} + +.requests-menu-status-icon[code^="5"] { + background-color: var(--theme-highlight-pink); + border-radius: 0; + transform: rotate(45deg); +} + +/* Network requests table: waterfall header */ + +.requests-menu-waterfall { + padding-inline-start: 0; +} + +#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) { + padding-inline-start: 13px; +} + +.requests-menu-timings-division { + width: 100px; + padding-top: 2px; + padding-inline-start: 4px; + font-size: 75%; + pointer-events: none; + box-sizing: border-box; + text-align: start; +} + +.requests-menu-timings-division:first-child { + width: 98px; /* Substract 2px for borders */ +} + +.requests-menu-timings-division:not(:first-child) { + border-inline-start: 1px dashed; + margin-inline-start: -100px !important; /* Don't affect layout. */ +} + +.requests-menu-timings-division:-moz-locale-dir(ltr) { + transform-origin: left center; +} + +.requests-menu-timings-division:-moz-locale-dir(rtl) { + transform-origin: right center; +} + +.theme-dark .requests-menu-timings-division { + border-inline-start-color: #5a6169 !important; +} + +.theme-light .requests-menu-timings-division { + border-inline-start-color: #585959 !important; +} + +.requests-menu-timings-division[division-scale=second], +.requests-menu-timings-division[division-scale=minute] { + font-weight: 600; +} + +/* Network requests table: waterfall items */ + +.requests-menu-subitem.requests-menu-waterfall { + padding-inline-start: 0px; + padding-inline-end: 4px; + /* Background created on a in js. */ + /* @see devtools/client/netmonitor/netmonitor-view.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) { + background-position: right center; +} + +.requests-menu-timings:-moz-locale-dir(ltr) { + transform-origin: left center; +} + +.requests-menu-timings:-moz-locale-dir(rtl) { + transform-origin: right center; +} + +.requests-menu-timings-total:-moz-locale-dir(ltr) { + transform-origin: left center; +} + +.requests-menu-timings-total:-moz-locale-dir(rtl) { + transform-origin: right center; +} + +.requests-menu-timings-total { + padding-inline-start: 4px; + font-size: 85%; + font-weight: 600; +} + +.requests-menu-timings-box { + height: 9px; +} + +.theme-firebug .requests-menu-timings-box { + background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2)); + height: 16px; +} + +.requests-menu-timings-box.blocked { + background-color: var(--timing-blocked-color); +} + +.requests-menu-timings-box.dns { + background-color: var(--timing-dns-color); +} + +.requests-menu-timings-box.connect { + background-color: var(--timing-connect-color); +} + +.requests-menu-timings-box.send { + background-color: var(--timing-send-color); +} + +.requests-menu-timings-box.wait { + background-color: var(--timing-wait-color); +} + +.requests-menu-timings-box.receive { + background-color: var(--timing-receive-color); +} + +/* SideMenuWidget */ +#network-table .side-menu-widget-empty-text, +#network-table .side-menu-widget-container { + background-color: var(--theme-body-background); +} + +#network-table .side-menu-widget-item { + border-top-color: transparent; + border-bottom-color: transparent; +} + +.side-menu-widget-item-contents { + padding: 0px; +} + +.side-menu-widget-item:not(.selected)[odd] { + background-color: var(--table-zebra-background); +} + +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); +} + +.theme-firebug .side-menu-widget-item:not(.selected):hover { + background: #EFEFEF; +} + +.theme-firebug .requests-menu-subitem { + padding: 1px; +} + +/* HTTP Status Column */ +.theme-firebug .requests-menu-subitem.requests-menu-status { + font-weight: bold; +} + +/* Method Column */ + +.theme-firebug .requests-menu-subitem.requests-menu-method-box { + color: rgb(128, 128, 128); +} + +.side-menu-widget-item.selected .requests-menu-method { + color: var(--theme-selection-color); +} + +/* Size Column */ +.theme-firebug .requests-menu-subitem.requests-menu-size { + text-align: end; + padding-inline-end: 4px; +} + +/* Network request details */ + +#details-pane-toggle:-moz-locale-dir(ltr)::before, +#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before { + background-image: var(--theme-pane-collapse-image); +} + +#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before, +#details-pane-toggle:-moz-locale-dir(rtl)::before { + background-image: var(--theme-pane-expand-image); +} + +/* Network request details tabpanels */ + +.tabpanel-content { + background-color: var(--theme-sidebar-background); +} + +.theme-dark .tabpanel-content { + color: var(--theme-selection-color); +} + +#headers-tabpanel { + background-color: var(--theme-toolbar-background); +} + +.theme-firebug .variables-view-scope:focus > .title { + color: var(--theme-body-color); +} + +/* Summary tabpanel */ + +.tabpanel-summary-container { + padding: 1px; +} + +.tabpanel-summary-label { + padding-inline-start: 4px; + padding-inline-end: 3px; + font-weight: 600; +} + +.tabpanel-summary-value { + color: inherit; + padding-inline-start: 3px; +} + +.theme-dark .tabpanel-summary-value { + color: var(--theme-selection-color); +} + +/* Headers tabpanel */ + +#headers-summary-status, +#headers-summary-version { + padding-bottom: 2px; +} + +#headers-summary-size { + padding-top: 2px; +} + +#headers-summary-resend { + margin-top: -10px; + margin-inline-end: 6px; +} + +#toggle-raw-headers { + margin-top: -10px; + margin-inline-end: 6px; +} + +.raw-response-textarea { + height: 50vh; +} + +/* Response tabpanel */ + +#response-content-info-header { + margin: 0; + padding: 3px 8px; + background-color: var(--theme-highlight-red); + color: var(--theme-selection-color); +} + +#response-content-image-box { + padding-top: 10px; + padding-bottom: 10px; +} + +#response-content-image { + background: #fff; + border: 1px dashed GrayText; + margin-bottom: 10px; +} + +/* Preview tabpanel */ + +#preview-tabpanel { + background: #fff; +} + +#response-preview { + display: -moz-box; + -moz-box-flex: 1; +} + +/* Timings tabpanel */ + +#timings-tabpanel .tabpanel-summary-label { + width: 10em; +} + +#timings-tabpanel .requests-menu-timings-box { + transition: transform 0.2s ease-out; + border: none; + min-width: 1px; +} + +#timings-tabpanel .requests-menu-timings-total { + transition: transform 0.2s ease-out; +} + +.theme-firebug #timings-tabpanel .requests-menu-timings-total { + color: var(--theme-body-color); +} + +/* Security tabpanel */ +.security-info-section { + padding-inline-start: 1em; +} + +.theme-dark #security-error-message { + color: var(--theme-selection-color); +} + +#security-tabpanel { + overflow: auto; +} + +.security-warning-icon { + background-image: url(images/alerticon-warning.png); + background-size: 13px 12px; + margin-inline-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 1.1dppx) { + .security-warning-icon { + background-image: url(images/alerticon-warning@2x.png); + } +} + +/* Custom request form */ + +#custom-pane { + padding: 0.6em 0.5em; +} + +.custom-header { + font-size: 1.1em; +} + +.custom-section { + margin-top: 0.5em; +} + +#custom-method-value { + width: 4.5em; +} + +/* Performance analysis buttons */ + +#requests-menu-network-summary-button { + background: none; + box-shadow: none; + border-color: transparent; + list-style-image: url(images/profiler-stopwatch.svg); + padding-inline-end: 0; + cursor: pointer; + margin-inline-end: 1em; + min-width: 0; +} + +/* Performance analysis view */ + +#network-statistics-toolbar { + border: none; + margin: 0; + padding: 0; +} + +#network-statistics-back-button { + min-width: 4em; + min-height: 100vh; + margin: 0; + padding: 0; + border-radius: 0; + border-top: none; + border-bottom: none; + border-inline-start: none; +} + +#network-statistics-view-splitter { + border-color: rgba(0,0,0,0.2); + cursor: default; + pointer-events: none; +} + +#network-statistics-charts { + min-height: 1px; +} + +#network-statistics-charts { + background-color: var(--theme-sidebar-background); +} + +#network-statistics-charts .pie-chart-container { + margin-inline-start: 3vw; + margin-inline-end: 1vw; +} + +#network-statistics-charts .table-chart-container { + margin-inline-start: 1vw; + margin-inline-end: 3vw; +} + +.chart-colored-blob[name=html] { + fill: var(--theme-highlight-bluegrey); + background: var(--theme-highlight-bluegrey); +} + +.chart-colored-blob[name=css] { + fill: var(--theme-highlight-blue); + background: var(--theme-highlight-blue); +} + +.chart-colored-blob[name=js] { + fill: var(--theme-highlight-lightorange); + background: var(--theme-highlight-lightorange); +} + +.chart-colored-blob[name=xhr] { + fill: var(--theme-highlight-orange); + background: var(--theme-highlight-orange); +} + +.chart-colored-blob[name=fonts] { + fill: var(--theme-highlight-purple); + background: var(--theme-highlight-purple); +} + +.chart-colored-blob[name=images] { + fill: var(--theme-highlight-pink); + background: var(--theme-highlight-pink); +} + +.chart-colored-blob[name=media] { + fill: var(--theme-highlight-green); + background: var(--theme-highlight-green); +} + +.chart-colored-blob[name=flash] { + fill: var(--theme-highlight-red); + background: var(--theme-highlight-red); +} + +.table-chart-row-label[name=cached] { + display: none; +} + +.table-chart-row-label[name=count] { + width: 3em; + text-align: end; +} + +.table-chart-row-label[name=label] { + width: 7em; +} + +.table-chart-row-label[name=size] { + width: 7em; +} + +.table-chart-row-label[name=time] { + width: 7em; +} + +/* Firebug theme support for network charts */ + +.theme-firebug .chart-colored-blob[name=html] { + fill: rgba(94, 136, 176, 0.8); /* Blue-Grey highlight */ + background: rgba(94, 136, 176, 0.8); +} + +.theme-firebug .chart-colored-blob[name=css] { + fill: rgba(70, 175, 227, 0.8); /* light blue */ + background: rgba(70, 175, 227, 0.8); +} + +.theme-firebug .chart-colored-blob[name=js] { + fill: rgba(235, 83, 104, 0.8); /* red */ + background: rgba(235, 83, 104, 0.8); +} + +.theme-firebug .chart-colored-blob[name=xhr] { + fill: rgba(217, 102, 41, 0.8); /* orange */ + background: rgba(217, 102, 41, 0.8); +} + +.theme-firebug .chart-colored-blob[name=fonts] { + fill: rgba(223, 128, 255, 0.8); /* pink */ + background: rgba(223, 128, 255, 0.8); +} + +.theme-firebug .chart-colored-blob[name=images] { + fill: rgba(112, 191, 83, 0.8); /* pink */ + background: rgba(112, 191, 83, 0.8); +} + +.theme-firebug .chart-colored-blob[name=media] { + fill: rgba(235, 235, 84, 0.8); /* yellow */ + background: rgba(235, 235, 84, 0.8); +} + +.theme-firebug .chart-colored-blob[name=flash] { + fill: rgba(84, 235, 159, 0.8); /* cyan */ + background: rgba(84, 235, 159, 0.8); +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #requests-menu-toolbar { + height: 22px; + } + + .requests-menu-header-button { + min-height: 22px; + padding-left: 8px; + } + + #details-pane { + margin: 0 !important; + /* To prevent all the margin hacks to hide the sidebar. */ + } + + .requests-menu-status { + max-width: none; + width: 12vw; + } + + .requests-menu-status-code { + width: auto; + } + + .requests-menu-method, + .requests-menu-method-box { + max-width: none; + width: 14vw; + } + + .requests-menu-icon-and-file { + width: 22vw; + } + + .requests-menu-security-and-domain { + width: 18vw; + } + + .requests-menu-type { + width: 10vw; + } + + .requests-menu-transferred, + .requests-menu-size { + width: 12vw; + } +} + +/* Platform overrides (copied in from the old platform specific files) */ +:root[platform="win"] .requests-menu-header-button > .button-box { + padding: 0; +} + +:root[platform="win"] .requests-menu-timings-division { + padding-top: 1px; + font-size: 90%; +} + +:root[platform="linux"] #headers-summary-resend { + padding: 4px; +} + +:root[platform="linux"] #toggle-raw-headers { + padding: 4px; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + :root[platform="linux"] .requests-menu-header-button { + font-size: 85%; + } +} diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css new file mode 100644 index 000000000..5ed3b6352 --- /dev/null +++ b/devtools/client/themes/performance.css @@ -0,0 +1,794 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 this panel that aren't defined by the themes */ +.theme-dark { + --cell-border-color: rgba(255,255,255,0.15); + --cell-border-color-light: rgba(255,255,255,0.1); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(86, 117, 185, 0.15); + --row-hover-background-color: rgba(86, 117, 185, 0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +.theme-firebug { + --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +/* + * DE-XUL: Set a sidebar width because inline XUL components will cause the flex + * to overflow if dynamically sized. + */ +.performance-tool { + --sidebar-width: 185px; +} + +/** + * A generic class to hide elements, replacing the `element.hidden` attribute + * that we use to hide elements that can later be active + */ +.hidden { + display: none; + width: 0px; + height: 0px; +} + +/* Toolbar */ + +#performance-toolbar-control-other { + padding-inline-end: 5px; +} + +#performance-toolbar-controls-detail-views .toolbarbutton-text { + padding-inline-start: 4px; + padding-inline-end: 8px; +} + +#filter-button { + list-style-image: url(chrome://devtools/skin/images/filter.svg); +} + +#performance-filter-menupopup > menuitem .menu-iconic-left::after { + content: ""; + display: block; + width: 8px; + height: 8px; + margin: 0 8px; + border-radius: 1px; +} + +/* Details panel buttons */ + +#select-waterfall-view { + list-style-image: url(images/performance-icons.svg#details-waterfall); +} + +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(images/performance-icons.svg#details-call-tree); +} + +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(images/performance-icons.svg#details-flamegraph); +} + +#select-optimizations-view { + list-style-image: url(images/profiler-stopwatch.svg); +} + +/* Recording buttons */ + +#clear-button::before { + background-image: var(--clear-icon-url); +} + +#main-record-button::before { + background-image: url(images/profiler-stopwatch.svg); +} + +#import-button::before { + background-image: url(images/import.svg); +} + +#main-record-button .button-icon, #import-button .button-icon { + margin: 0; +} + +#main-record-button .button-text, #import-button .button-text { + display: none; +} + +.notice-container .record-button { + padding: 5px !important; +} + +.notice-container .record-button.checked, +.notice-container .record-button.checked { + color: var(--theme-selection-color) !important; + background: var(--theme-selection-background) !important; +} + +/* Sidebar & recording items */ + +#recordings-pane { + border-inline-end: 1px solid var(--theme-splitter-color); + width: var(--sidebar-width); +} + +#recording-controls-mount { + width: var(--sidebar-width); +} + +#recording-controls-mount > div { + width: var(--sidebar-width); +} + +/* + * DE-XUL: The height of the toolbar is not correct without tweaking the line-height. + */ +#recordings-pane .devtools-toolbar { + line-height: 0; +} + +.theme-sidebar { + position: relative; +} + +/** + * DE-XUL: This is probably only needed for the html:div inside of a vbox. + */ +#recordings-list > div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; +} + +.recording-list { + width: var(--sidebar-width); + min-width: var(--sidebar-width); + margin: 0; + padding: 0; + background-color: var(--theme-sidebar-background); + border-inline-end: 1px solid var(--theme-splitter-color); +} + +.recording-list-item { + display: flex; + flex-direction: column; + color: var(--theme-body-color); + border-bottom: 1px solid rgba(128,128,128,0.15); + padding: 8px; + cursor: default; +} + +.recording-list-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.recording-list-empty { + padding: 8px; +} + +.recording-list-item-label { + font-size: 110%; +} + +.recording-list-item-footer { + padding-top: 4px; + font-size: 90%; + display: flex; + justify-content: space-between; +} + +.recording-list-item-save { + background: none; + border: none; + text-decoration: underline; + cursor: pointer; + font-size: 90%; + padding:0; +} + +.recording-list-item-duration, +.recording-list-item-save { + color: var(--theme-body-color-alt); +} + +.recording-list-item.selected .recording-list-item-duration, +.recording-list-item.selected .recording-list-item-save { + color: var(--theme-body-color-alt); + color: var(--theme-selection-color); +} + +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Recording notices */ + +.notice-container { + font-size: 120%; + background-color: var(--theme-body-background); + color: var(--theme-body-color); + padding-bottom: 20vh; +} + +.tool-disabled-message { + text-align: center; +} + +.console-profile-recording-notice, +.console-profile-stop-notice { + overflow: hidden; +} + +.console-profile-command { + font-family: monospace; + margin: 3px 2px; +} + +.realtime-disabled-message, +.realtime-disabled-on-e10s-message { + display: none; +} + +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message, +#performance-view[e10s="unsupported"] .realtime-disabled-message { + display: initial; + opacity: 0.5; +} + +.buffer-status-message, +.buffer-status-message-full { + display: none; +} + +#details-pane-container[buffer-status="in-progress"] .buffer-status-message { + display: initial; + opacity: 0.5; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message { + display: initial; + color: var(--theme-highlight-red); + font-weight: bold; + opacity: 1; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message-full { + display: initial; +} + +/* Profile call tree */ + +.call-tree-cells-container { + overflow: auto; +} + +.call-tree-cells-container[categories-hidden] .call-tree-category { + display: none; +} + +.call-tree-header { + font-size: 90%; + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +.call-tree-header[type="duration"], +.call-tree-cell[type="duration"], +.call-tree-header[type="self-duration"], +.call-tree-cell[type="self-duration"] { + min-width: 6vw; + width: 6vw; +} + +.call-tree-header[type="percentage"], +.call-tree-cell[type="percentage"], +.call-tree-header[type="self-percentage"], +.call-tree-cell[type="self-percentage"] { + min-width: 5vw; + width: 5vw; +} + +.call-tree-header[type="samples"], +.call-tree-cell[type="samples"] { + min-width: 4.5vw; + width: 4.5vw; +} + +.call-tree-header[type="count"], +.call-tree-cell[type="count"], +.call-tree-header[type="self-count"], +.call-tree-cell[type="self-count"], +.call-tree-header[type="size"], +.call-tree-cell[type="size"], +.call-tree-header[type="self-size"], +.call-tree-cell[type="self-size"], +.call-tree-header[type="count-percentage"], +.call-tree-cell[type="count-percentage"], +.call-tree-header[type="self-count-percentage"], +.call-tree-cell[type="self-count-percentage"], +.call-tree-header[type="size-percentage"], +.call-tree-cell[type="size-percentage"], +.call-tree-header[type="self-size-percentage"], +.call-tree-cell[type="self-size-percentage"] { + min-width: 6vw; + width: 6vw; +} + +.call-tree-header, +.call-tree-cell { + -moz-box-align: center; + overflow: hidden; + text-overflow: ellipsis; + padding: 1px 4px; + color: var(--theme-body-color); + border-inline-end-color: var(--cell-border-color); +} + +.call-tree-header:not(:last-child), +.call-tree-cell:not(:last-child) { + border-inline-end-width: 1px; + border-inline-end-style: solid; +} + +.call-tree-header:not(:last-child) { + text-align: center; +} + +.call-tree-cell:not(:last-child) { + text-align: end; +} + +.call-tree-header { + background-color: var(--theme-tab-toolbar-background); +} + +.call-tree-item .call-tree-cell, +.call-tree-item .call-tree-cell[type=function] description { + -moz-user-select: text; + /* so that optimizations view doesn't break the lines in call tree */ + white-space: nowrap; +} + +.call-tree-item .call-tree-cell::-moz-selection, +.call-tree-item .call-tree-cell[type=function] description::-moz-selection { + background-color: var(--theme-highlight-orange); +} + +.call-tree-item:last-child { + border-bottom: 1px solid var(--cell-border-color); +} + +.call-tree-item:nth-child(2n) { + background-color: var(--row-alt-background-color); +} + +.call-tree-item:hover { + background-color: var(--row-hover-background-color); +} + +.call-tree-item:focus { + background-color: var(--theme-selection-background); +} + +.call-tree-item:focus description { + color: var(--theme-selection-color) !important; +} + +.call-tree-item:focus .call-tree-cell { + border-inline-end-color: var(--focus-cell-border-color); +} + +.call-tree-item:not([origin="content"]) .call-tree-name, +.call-tree-item:not([origin="content"]) .call-tree-url, +.call-tree-item:not([origin="content"]) .call-tree-line, +.call-tree-item:not([origin="content"]) .call-tree-column { + /* Style chrome and non-JS nodes differently. */ + opacity: 0.6; +} + +.call-tree-name { + margin-inline-end: 4px !important; +} + +.call-tree-url { + cursor: pointer; +} + +.call-tree-url:hover { + text-decoration: underline; +} + +.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { + color: var(--theme-highlight-blue); +} + +.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { + color: var(--theme-highlight-orange); +} + +.call-tree-column { + color: var(--theme-highlight-orange); + opacity: 0.6; +} + +.call-tree-host { + margin-inline-start: 8px !important; + font-size: 90%; + color: var(--theme-content-color2); +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; +} + +/** + * Waterfall markers tree + */ + +#waterfall-tree { + /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */ + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + +.waterfall-markers { + /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */ + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + +.waterfall-header { + display: flex; +} + +.waterfall-header-ticks { + display: flex; + flex: auto; + align-items: center; + overflow: hidden; +} + +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; +} + +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); +} + +.waterfall-header-tick:not(:first-child) { + margin-inline-start: -100px !important; /* Don't affect layout. */ +} + +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see devtools/client/performance/modules/widgets/waterfall-ticks.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +/** + * Markers waterfall breakdown + */ + +.waterfall-markers .tree { + /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */ + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; + overflow-x: hidden; + overflow-y: auto; + --waterfall-tree-row-height: 15px; +} + +.waterfall-markers .tree-node { + display: flex; + height: var(--waterfall-tree-row-height); + line-height: var(--waterfall-tree-row-height); +} + +.waterfall-tree-item { + display: flex; + flex: auto; +} + +.theme-light .waterfall-markers .tree-node:not([data-depth="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(0,0,0,0.025) 2px, + rgba(0,0,0,0.025) 4px + ); +} + +.theme-dark .waterfall-markers .tree-node:not([data-depth="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(255,255,255,0.05) 2px, + rgba(255,255,255,0.05) 4px + ); +} + +.theme-light .waterfall-tree-item[data-expandable] .waterfall-marker-bullet, +.theme-light .waterfall-tree-item[data-expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(255,255,255,0.35) 5px, + rgba(255,255,255,0.35) 10px + ); +} + +.theme-dark .waterfall-tree-item[data-expandable] .waterfall-marker-bullet, +.theme-dark .waterfall-tree-item[data-expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(0,0,0,0.35) 5px, + rgba(0,0,0,0.35) 10px + ); +} + +.waterfall-markers .tree-node[data-expanded], +.waterfall-markers .tree-node:not([data-depth="0"]) + .tree-node[data-depth="0"] { + box-shadow: 0 -1px var(--cell-border-color-light); +} + +.tree-node-odd .waterfall-marker { + background-color: var(--row-alt-background-color); +} + +.waterfall-markers .tree-node:hover { + background-color: var(--row-hover-background-color); +} + +.waterfall-markers .tree-node-last { + border-bottom: 1px solid var(--cell-border-color); +} + +.waterfall-tree-item.focused { + background-color: var(--theme-selection-background); +} + +/** + * Marker left sidebar + */ + +.waterfall-sidebar { + display: flex; + align-items: center; + box-sizing: border-box; + border-inline-end: 1px solid var(--cell-border-color); +} + +.waterfall-tree-item > .waterfall-sidebar:hover, +.waterfall-tree-item:hover > .waterfall-sidebar, +.waterfall-tree-item.focused > .waterfall-sidebar { + background: transparent; +} + +.waterfall-tree-item.focused > .waterfall-sidebar { + color: var(--theme-selection-color); +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + margin-inline-start: 8px; + margin-inline-end: 6px; + border-radius: 1px; + box-sizing: border-box; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/** + * Marker timebar + */ + +.waterfall-marker { + display: flex; + flex: auto; + overflow: hidden; +} + +.waterfall-marker-wrap { + display: flex; + align-items: center; + transform-origin: left center; +} + +.waterfall-marker-bar { + height: 9px; + border-radius: 1px; + box-sizing: border-box; +} + +/** + * OTMT markers + */ + +.waterfall-tree-item[data-otmt=true] .waterfall-marker-bullet, +.waterfall-tree-item[data-otmt=true] .waterfall-marker-bar { + background-color: transparent; + border-width: 1px; + border-style: solid; +} + +/** + * Marker details view + */ + +#waterfall-details { + padding-inline-start: 8px; + padding-inline-end: 8px; + padding-top: 2vh; + overflow: auto; + min-width: 50px; +} + +#waterfall-details > * { + padding-top: 3px; +} + +.marker-details-bullet { + width: 8px; + height: 8px; + border-radius: 1px; +} + +.marker-details-name-label { + padding-inline-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} + +.marker-details-customcontainer .custom-button { + padding: 2px 5px; + border-width: 1px; +} + +/** + * Marker colors + */ + +menuitem.marker-color-graphs-full-red .menu-iconic-left::after, +.marker-color-graphs-full-red { + background-color: var(--theme-graphs-full-red); + border-color: var(--theme-graphs-full-red); +} +menuitem.marker-color-graphs-full-blue .menu-iconic-left::after, +.marker-color-graphs-full-blue { + background-color: var(--theme-graphs-full-blue); + border-color: var(--theme-graphs-full-blue); +} + +menuitem.marker-color-graphs-green .menu-iconic-left::after, +.marker-color-graphs-green { + background-color: var(--theme-graphs-green); + border-color: var(--theme-graphs-green); +} +menuitem.marker-color-graphs-blue .menu-iconic-left::after, +.marker-color-graphs-blue { + background-color: var(--theme-graphs-blue); + border-color: var(--theme-graphs-blue); +} +menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after, +.marker-color-graphs-bluegrey { + background-color: var(--theme-graphs-bluegrey); + border-color: var(--theme-graphs-bluegrey); +} +menuitem.marker-color-graphs-purple .menu-iconic-left::after, +.marker-color-graphs-purple { + background-color: var(--theme-graphs-purple); + border-color: var(--theme-graphs-purple); +} +menuitem.marker-color-graphs-yellow .menu-iconic-left::after, +.marker-color-graphs-yellow { + background-color: var(--theme-graphs-yellow); + border-color: var(--theme-graphs-yellow); +} +menuitem.marker-color-graphs-orange .menu-iconic-left::after, +.marker-color-graphs-orange { + background-color: var(--theme-graphs-orange); + border-color: var(--theme-graphs-orange); +} +menuitem.marker-color-graphs-red .menu-iconic-left::after, +.marker-color-graphs-red { + background-color: var(--theme-graphs-red); + border-color: var(--theme-graphs-red); +} +menuitem.marker-color-graphs-grey .menu-iconic-left::after, +.marker-color-graphs-grey{ + background-color: var(--theme-graphs-grey); + border-color: var(--theme-graphs-grey); +} + +/** + * Configurable Options + * + * Elements can be tagged with a class and visibility is controlled via a + * preference being applied or removed. + */ + +/** + * devtools.performance.ui.experimental + */ +menuitem.experimental-option::before { + content: ""; + background-image: url(chrome://devtools/skin/images/webconsole.svg); + background-repeat: no-repeat; + background-size: 72px 60px; + width: 12px; + height: 12px; + display: inline-block; + + background-position: -24px -24px; + margin: 2px 5px 0 0; + max-height: 12px; +} +.theme-light menuitem.experimental-option::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} + +#performance-options-menupopup:not(.experimental-enabled) .experimental-option, +#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { + display: none; +} + +/* for call tree */ +description.opt-icon { + margin: 0px 0px 0px 0px; +} +description.opt-icon::before { + margin: 1px 4px 0px 0px; +} diff --git a/devtools/client/themes/projecteditor/projecteditor.css b/devtools/client/themes/projecteditor/projecteditor.css new file mode 100644 index 000000000..58de798e5 --- /dev/null +++ b/devtools/client/themes/projecteditor/projecteditor.css @@ -0,0 +1,184 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +.view-project-detail { + overflow: auto; +} + +.plugin-hidden { + display: none; +} + +.arrow { + -moz-appearance: treetwisty; + width: 20px; + height: 20px; +} + +.arrow[open] { + -moz-appearance: treetwistyopen; +} + +.arrow[invisible] { + visibility: hidden; +} + +#projecteditor-menubar { + display: none; +} + +#projecteditor-toolbar, +#projecteditor-toolbar-bottom { + display: none; /* For now don't show the status bars */ + min-height: 22px; + height: 22px; + background: rgb(237, 237, 237); +} + +#sources { + overflow: auto; +} + +.sources-tree { + overflow:auto; + overflow-x: hidden; + -moz-user-focus: normal; + + /* Allows this to expand inside of parent xul element, while + still supporting child flexbox elements, including ellipses. */ + -moz-box-flex: 1; + display: block; +} + +.sources-tree input { + margin: -1px; + border: 1px solid gray; +} + +#main-deck .sources-tree { + background: rgb(225, 225, 225); + min-width: 100px; +} + +.entry { + color: #18191A; + display: flex; + align-items: center; +} + +.entry .file-label { + display: flex; + flex: 1; + align-items: center; +} + +.entry { + border: none; + box-shadow: none; + white-space: nowrap; + cursor: pointer; +} + +.entry:hover:not(.entry-group-title):not(.selected) { + background: rgba(0, 0, 0, .05); +} + +.entry.selected { + background: rgba(56, 117, 215, 1); + color: #F5F7FA; + outline: none; +} + +.entry-group-title { + background: rgba(56, 117, 215, 0.8); + color: #F5F7FA; + font-weight: bold; + font-size: 1.05em; + line-height: 35px; + padding: 0 10px; +} + +.sources-tree .entry-group-title .expander { + display: none; +} + +.entry .expander { + width: 16px; + padding: 0; +} + +.tree-collapsed .children { + display: none; +} + +/* Plugins */ + +#projecteditor-toolbar textbox { + margin: 0; +} + +.projecteditor-basic-display { + padding: 0 3px; +} + +/* App Manager */ +.project-name-label { + font-weight: bold; + padding-left: 10px; + overflow: hidden; + text-overflow: ellipsis; +} + +.project-flex { + flex: 1; +} + +.project-image { + max-height: 25px; + margin-left: -10px; +} + +.project-image, +.project-status, +.project-options { + flex-shrink: 0; +} + +.project-status { + width: 10px; + height: 10px; + border-radius: 50%; + border: solid 1px rgba(255, 255, 255, .5); + margin-right: 10px; + visibility: hidden; +} + +.project-status[status=valid] { + background: #70bf53; + visibility: visible; +} + +.project-status[status=warning] { + background: #d99b28; + visibility: visible; +} + +.project-status[status=error] { + background: #ed2655; + visibility: visible; +} + +/* Status Bar */ +.projecteditor-file-label { + font-weight: bold; + padding-left: 29px; + padding-right: 10px; + flex: 1; +} + +/* Image View */ +.editor-image { + padding: 10px; +} diff --git a/devtools/client/themes/responsivedesign.inc.css b/devtools/client/themes/responsivedesign.inc.css new file mode 100644 index 000000000..b06359ae1 --- /dev/null +++ b/devtools/client/themes/responsivedesign.inc.css @@ -0,0 +1,355 @@ +%if 0 +/* 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/. */ +%endif + +/* Responsive Mode */ + +.browserContainer[responsivemode] { + background-color: #222; + padding: 0 20px 20px 20px; +} + +.browserStack[responsivemode] { + box-shadow: 0 0 7px black; +} + +.devtools-responsiveui-toolbar { + -moz-appearance: none; + background: transparent; + /* text color is textColor from dark theme, since no theme is applied to + * the responsive toolbar. + */ + color: hsl(210,30%,85%); + margin: 10px 0; + padding: 0; + box-shadow: none; + border-bottom-width: 0; +} + +.devtools-responsiveui-textinput { + -moz-appearance: none; + background: #333; + color: #fff; + border: 1px solid #111; + border-radius: 2px; + padding: 0 5px; + width: 200px; + margin: 0; +} + +.devtools-responsiveui-textinput[attention] { + border-color: #38ace6; + background: rgba(56,172,230,0.4); +} + +.devtools-responsiveui-menulist, +.devtools-responsiveui-toolbarbutton { + -moz-appearance: none; + -moz-box-align: center; + min-width: 32px; + min-height: 22px; + text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); + border: 1px solid hsla(210,8%,5%,.45); + border-radius: 0; + background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box; + box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15); + margin: 0 3px; + color: inherit; +} + +.devtools-responsiveui-menulist .menulist-editable-box { + -moz-appearance: none; + background-color: transparent; +} + +.devtools-responsiveui-menulist html|*.menulist-editable-input { + -moz-appearance: none; + color: inherit; + text-align: center; +} + +.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection { + background: hsla(212,7%,57%,.35); +} + +.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button { + -moz-box-orient: horizontal; +} + +.devtools-responsiveui-menulist:-moz-focusring, +.devtools-responsiveui-toolbarbutton:-moz-focusring { + outline: 1px dotted hsla(210,30%,85%,0.7); + outline-offset: -4px; +} + +.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active { + border-color: hsla(210,8%,5%,.6); + background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3)); + box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); +} + +.devtools-responsiveui-menulist[open=true], +.devtools-responsiveui-toolbarbutton[open=true], +.devtools-responsiveui-toolbarbutton[checked=true] { + border-color: hsla(210,8%,5%,.6) !important; + background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4)); + box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); +} + +.devtools-responsiveui-toolbarbutton[checked=true] { + color: hsl(208,100%,60%); +} + +.devtools-responsiveui-toolbarbutton[checked=true]:hover { + background-color: transparent !important; +} + +.devtools-responsiveui-toolbarbutton[checked=true]:hover:active { + background-color: hsla(210,8%,5%,.2) !important; +} + +.devtools-responsiveui-menulist > .menulist-label-box { + text-align: center; +} + +.devtools-responsiveui-menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + background-color: transparent; + list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); + -moz-box-align: center; + border-width: 0; + min-width: 16px; +} + +.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { + -moz-appearance: none; + color: inherit; + border-width: 0; + border-inline-end: 1px solid hsla(210,8%,5%,.45); + box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15); +} + +.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button { + box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15); +} + +.devtools-responsiveui-toolbarbutton[type=menu-button] { + padding: 0 1px; + -moz-box-align: stretch; +} + +.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { + -moz-appearance: none !important; + list-style-image: url("chrome://devtools/skin/images/dropmarker.svg"); + -moz-box-align: center; + padding: 0 3px; +} + +.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child, +.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child { + margin-left: 0; +} + +.devtools-responsiveui-close { + list-style-image: url("chrome://devtools/skin/images/close.svg"); +} + +.devtools-responsiveui-close > image { + filter: invert(1); +} + +.devtools-responsiveui-rotate { + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png"); +} + +@media (min-resolution: 1.1dppx) { + .devtools-responsiveui-rotate { + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png"); + } +} + +.devtools-responsiveui-touch { + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png"); + -moz-image-region: rect(0px,16px,16px,0px); +} + +.devtools-responsiveui-touch[checked] { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.1dppx) { + .devtools-responsiveui-touch { + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png"); + -moz-image-region: rect(0px,32px,32px,0px); + } + + .devtools-responsiveui-touch[checked] { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +.devtools-responsiveui-screenshot { + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png"); +} + +@media (min-resolution: 1.1dppx) { + .devtools-responsiveui-screenshot { + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png"); + } +} + +.devtools-responsiveui-resizebarV { + width: 7px; + height: 24px; + cursor: ew-resize; + transform: translate(12px, -12px); + background-size: cover; + background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png"); +} + +.devtools-responsiveui-resizebarH { + width: 24px; + height: 7px; + cursor: ns-resize; + transform: translate(-12px, 12px); + background-size: cover; + background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png"); +} + +.devtools-responsiveui-resizehandle { + width: 16px; + height: 16px; + cursor: se-resize; + transform: translate(12px, 12px); + background-size: cover; + background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png"); +} + +/* FxOS custom mode with additional buttons and phone look'n feel */ + +/* Hide devtools manual resizer */ +.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle, +.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH, +.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV { + display: none; +} + +/* Gives responsive mode a phone look'n feel */ +.browserStack[responsivemode].fxos-mode { + padding: 60px 15px 0; + + border-radius: 25px / 20px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border: 1px solid #FFFFFF; + border-bottom-width: 0; + + background-color: #353535; + + box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset; + + background-image: linear-gradient(to right, #111 11%, #333 56%); + min-width: 320px; +} + +.devtools-responsiveui-hardware-buttons { + -moz-appearance: none; + padding: 20px; + + border: 1px solid #FFFFFF; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; + border-top-width: 0; + + box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset; + + background-image: linear-gradient(to right, #111 11%, #333 56%); +} + +.devtools-responsiveui-home-button { + -moz-user-focus: ignore; + width: 40px; + height: 30px; + list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png"); +} + +.devtools-responsiveui-sleep-button { + -moz-user-focus: ignore; + -moz-appearance: none; + /* compensate browserStack top padding */ + margin-top: -67px; + margin-right: 10px; + + min-width: 10px; + width: 50px; + height: 5px; + + border: 1px solid #444; + border-top-right-radius: 12px; + border-top-left-radius: 12px; + border-bottom-color: transparent; + + background-image: linear-gradient(to top, #111 11%, #333 56%); +} + +.devtools-responsiveui-sleep-button:hover:active { + background-image: linear-gradient(to top, #aaa 11%, #ddd 56%); +} + +.devtools-responsiveui-volume-buttons { + margin-left: -29px; +} + +.devtools-responsiveui-volume-up-button, +.devtools-responsiveui-volume-down-button { + -moz-user-focus: ignore; + -moz-appearance: none; + border: 1px solid red; + min-width: 8px; + height: 40px; + + border: 1px solid #444; + border-right-color: transparent; + + background-image: linear-gradient(to right, #111 11%, #333 56%); +} + +.devtools-responsiveui-volume-up-button:hover:active, +.devtools-responsiveui-volume-down-button:hover:active { + background-image: linear-gradient(to right, #aaa 11%, #ddd 56%); +} + +.devtools-responsiveui-volume-up-button { + border-top-left-radius: 12px; +} + +.devtools-responsiveui-volume-down-button { + border-bottom-left-radius: 12px; +} + +@media (min-resolution: 1.1dppx) { + .devtools-responsiveui-resizebarV { + background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png"); + } + + .devtools-responsiveui-resizebarH { + background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png"); + } + + .devtools-responsiveui-resizehandle { + background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png"); + } +} diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css new file mode 100644 index 000000000..9055101f5 --- /dev/null +++ b/devtools/client/themes/rules.css @@ -0,0 +1,561 @@ +/* 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 this panel that aren't defined by the themes */ +.theme-light { + --rule-highlight-background-color: #ffee99; +} + +.theme-dark { + --rule-highlight-background-color: #594724; +} + +.theme-firebug { + --rule-highlight-background-color: #ffee99; + --rule-property-name: darkgreen; + --rule-property-value: darkblue; +} + +/* Rule View Tabpanel */ + +.theme-firebug .ruleview { + font-family: monospace; + font-size: 11px; +} + +#sidebar-panel-ruleview { + margin: 0; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + /* Override the min-width from .inspector-tabpanel, as the rule panel can support small + widths */ + min-width: 100px; +} + +/* Rule View Toolbar */ + +#ruleview-toolbar-container { + display: flex; + flex-direction: column; + height: auto; +} + +#ruleview-toolbar { + display: flex; +} + +#ruleview-toolbar > .devtools-searchbox:first-child { + padding-inline-start: 0px; +} + +#ruleview-command-toolbar { + display: flex; +} + +#pseudo-class-panel { + display: flex; + height: 24px; + overflow: hidden; + transition: height 150ms ease; +} + +#pseudo-class-panel[hidden] { + height: 0px; +} + +#pseudo-class-panel > label { + -moz-user-select: none; + flex-grow: 1; + display: flex; + align-items: center; +} + +/* Rule View Container */ + +#ruleview-container { + -moz-user-select: text; + overflow: auto; + flex: 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. */ +#ruleview-container-focusable { + height: 100%; + outline: none; +} + +#ruleview-container.non-interactive { + pointer-events: none; + visibility: collapse; + transition: visibility 0.25s; +} + +.ruleview-code { + direction: ltr; +} + +.ruleview-property:not(:hover) > .ruleview-enableproperty { + pointer-events: none; +} + +.ruleview-expandable-container[hidden] { + display: none; +} + +.ruleview-expandable-container { + display: block; +} + +.ruleview-namecontainer { + cursor: text; +} + +.ruleview-propertyvaluecontainer { + cursor: text; + padding-right: 5px; +} + +.ruleview-propertyvaluecontainer a { + cursor: pointer; +} + +.ruleview-computedlist, +.ruleview-overridden-rule-filter[hidden], +.ruleview-warning[hidden] { + display: none; +} + +.ruleview-computedlist[user-open], +.ruleview-computedlist[filter-open] { + display: block; +} + +.ruleview-rule-source { + text-align: end; + float: right; + max-width: 100%; + + /* Force RTL direction to crop the source link at the beginning. */ + direction: rtl; + overflow: hidden; + text-overflow: ellipsis; + + -moz-user-select: none; + margin-bottom: 2px; +} + +.ruleview-rule-source-label { + white-space: nowrap; + margin: 0; + cursor: pointer; + + /* Create an LTR embed to avoid special characters being shifted to the start due to the + parent node direction: rtl; */ + direction: ltr; + unicode-bidi: embed +} + +.ruleview-rule-source[unselectable], +.ruleview-rule-source[unselectable] > .ruleview-rule-source-label { + cursor: default; +} + +.theme-firebug .ruleview-rule-source-label { + font-family: var(--proportional-font-family); + font-weight: bold; + color: #0000FF; +} + +.ruleview-rule-source:not([unselectable]):hover { + text-decoration: underline; +} + +.ruleview-header { + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + padding: 1px 4px; + -moz-user-select: none; + word-wrap: break-word; + vertical-align: middle; + min-height: 1.5em; + line-height: 1.5em; + margin-top: -1px; +} + +.theme-firebug .theme-gutter.ruleview-header { + font-family: var(--proportional-font-family); + font-weight: bold; + color: inherit; + border: none; + margin: 4px 0; + padding: 3px 4px 2px 4px; + line-height: inherit; + min-height: 0; + background: var(--theme-header-background); +} + +:root[platform="win"] .ruleview-header, +:root[platform="linux"] .ruleview-header { + margin-top: 4px; +} + +.ruleview-header.ruleview-expandable-header { + cursor: pointer; +} + +.ruleview-rule-pseudo-element { + padding-left:20px; + border-left: solid 10px; +} + +.ruleview-rule { + padding: 2px 4px; +} + +/** + * Display rules that don't match the current selected element and uneditable + * user agent styles differently + */ +.ruleview-rule[unmatched=true], +.ruleview-rule[uneditable=true] { + background: var(--theme-tab-toolbar-background); +} + +.ruleview-rule[unmatched=true] { + opacity: 0.5; +} + +.ruleview-rule[uneditable=true] :focus { + outline: none; +} + +.ruleview-rule[uneditable=true] .theme-link { + color: var(--theme-highlight-bluegrey); +} + +.ruleview-rule[uneditable=true] .ruleview-enableproperty { + visibility: hidden; +} + +.ruleview-rule[uneditable=true] .ruleview-swatch { + cursor: default; +} + +.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, +.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > +.ruleview-propertyvalue { + border-bottom-color: transparent; +} + +.theme-firebug .ruleview-namecontainer > .ruleview-propertyname, +.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { + border-bottom: none; +} + +.theme-firebug .ruleview-namecontainer > .ruleview-propertyname { + color: var(--rule-property-name); +} + +.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { + color: var(--rule-property-value); +} + +.theme-firebug .ruleview-overridden .ruleview-propertyname, +.theme-firebug .ruleview-overridden .ruleview-propertyvalue { + text-decoration: line-through; +} + +.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer, +.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *, +.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer, +.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer *, +.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden), +.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden) * { + color: #CCCCCC; +} + +.ruleview-rule + .ruleview-rule { + border-top-width: 1px; + border-top-style: dotted; +} + +.theme-firebug .ruleview-rule + .ruleview-rule { + border-top: none; +} + +.ruleview-warning { + background-image: url(images/alerticon-warning.png); + background-size: 13px 12px; + margin-inline-start: 5px; + display: inline-block; + width: 13px; + height: 12px; +} + +@media (min-resolution: 1.1dppx) { + .ruleview-warning { + background-image: url(images/alerticon-warning@2x.png); + } +} + +.ruleview-overridden-rule-filter { + background-image: url(chrome://devtools/skin/images/filter.svg#filterinput); + background-size: 11px 11px; + margin-inline-start: 5px; + display: inline-block; + width: 11px; + height: 11px; +} + +.ruleview-ruleopen { + padding-inline-end: 5px; +} + +.ruleview-ruleclose { + cursor: text; + padding-right: 20px; +} + +.ruleview-propertylist { + list-style: none; + padding: 0; + margin: 0; +} + +.ruleview-rule:not(:hover) .ruleview-enableproperty { + visibility: hidden; +} + +.ruleview-expander { + vertical-align: middle; + display: inline-block; +} + +.ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) { + /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */ + transform: none; +} + +.ruleview-newproperty { + /* (enable checkbox width: 12px) + (expander width: 15px) */ + margin-inline-start: 27px; +} + +.ruleview-namecontainer, +.ruleview-propertyvaluecontainer, +.ruleview-propertyname, +.ruleview-propertyvalue { + text-decoration: inherit; +} + +.ruleview-computedlist { + list-style: none; + padding: 0; +} + +.ruleview-computed { + margin-inline-start: 35px; +} + +.ruleview-grid, +.ruleview-swatch { + cursor: pointer; + border-radius: 50%; + width: 0.9em; + height: 0.9em; + vertical-align: middle; + /* align the swatch with its value */ + margin-top: -1px; + margin-inline-end: 5px; + display: inline-block; + position: relative; +} + +.ruleview-grid { + background: url("chrome://devtools/skin/images/grid.svg"); + background-size: 1em; + border-radius: 0; +} + +.ruleview-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; +} + +.ruleview-bezierswatch { + background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png"); + background-size: 1em; +} + +.ruleview-filterswatch { + background: url("chrome://devtools/skin/images/filter-swatch.svg"); + background-size: 1em; +} + +.ruleview-angleswatch { + background: url("chrome://devtools/skin/images/angle-swatch.svg"); + background-size: 1em; +} + +@media (min-resolution: 1.1dppx) { + .ruleview-bezierswatch { + background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png"); + background-size: 1em; + } +} + +.ruleview-overridden { + text-decoration: line-through; +} + +.theme-light .ruleview-overridden { + text-decoration-color: var(--theme-content-color3); +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; + padding: 0; + margin: -1px -3px -1px -1px; +} + +.theme-firebug .styleinspector-propertyeditor { + border: 1px solid var(--theme-splitter-color); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); +} + +.ruleview-property { + border-left: 3px solid transparent; + clear: right; +} + +.ruleview-propertycontainer > * { + vertical-align: middle; +} + +.ruleview-property[dirty] { + border-left-color: var(--theme-highlight-green); +} + +.ruleview-highlight { + background-color: var(--rule-highlight-background-color); +} + +.ruleview-namecontainer > .ruleview-propertyname, +.ruleview-propertyvaluecontainer > .ruleview-propertyvalue { + border-bottom: 1px dashed transparent; +} + +.ruleview-namecontainer:hover > .ruleview-propertyname, +.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { + border-bottom-color: hsl(0,0%,50%); +} + +.ruleview-selectorcontainer { + word-wrap: break-word; + cursor: text; +} + +.ruleview-selector-separator, +.ruleview-selector-unmatched { + color: #888; +} + +.ruleview-selector-matched > .ruleview-selector-attribute { + /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ +} + +.ruleview-selector-matched > .ruleview-selector-pseudo-class { + /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ +} + +.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { + font-weight: bold; + color: var(--theme-highlight-orange); +} + +.theme-firebug .ruleview-selector > .ruleview-selector-matched, +.theme-firebug .ruleview-selector > .ruleview-selector-separator, +.theme-firebug .ruleview-selector > .ruleview-selector-unmatched { + color: inherit; +} + +.ruleview-selectorhighlighter { + background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.ruleview-selectorhighlighter:hover { + filter: url(images/filters.svg#checked-icon-state); +} + +.ruleview-grid.active, +.ruleview-selectorhighlighter:active, +.ruleview-selectorhighlighter.highlighted { + filter: url(images/filters.svg#checked-icon-state) brightness(0.9); +} + +#ruleview-add-rule-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + background-size: cover; +} + +#pseudo-class-panel-toggle::before { + background-image: url("chrome://devtools/skin/images/pseudo-class.svg"); + background-size: cover; +} + +.ruleview-overridden-rule-filter { + opacity: 0.8; +} +.ruleview-overridden-rule-filter:hover { + opacity: 1; +} + +.theme-firebug .ruleview-overridden { + text-decoration: none; +} + +/* Firebug theme disable/enable CSS rule. Firebug theme uses its own + icons to indicate when CSS rules can be disabled or enabled. */ + +.theme-firebug .ruleview-rule .theme-checkbox { + background-repeat: no-repeat; + background-size: 12px 12px; + background-image: url(chrome://devtools/skin/images/firebug/disable.svg); + background-position: 0 0; +} + +.theme-firebug .ruleview-rule .theme-checkbox:not([checked]){ + filter: grayscale(1); +} + +.theme-firebug .ruleview-rule .theme-checkbox[checked] { + background-position: 0 0; +} + +.theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty { + visibility: hidden; +} diff --git a/devtools/client/themes/scratchpad.css b/devtools/client/themes/scratchpad.css new file mode 100644 index 000000000..651d4efe9 --- /dev/null +++ b/devtools/client/themes/scratchpad.css @@ -0,0 +1,12 @@ +/* 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/. */ + +#scratchpad-sidebar > tabs { + height: 0; + border: none; +} + +#sp-toolbar { + border: none; +} diff --git a/devtools/client/themes/shadereditor.css b/devtools/client/themes/shadereditor.css new file mode 100644 index 000000000..53ef94235 --- /dev/null +++ b/devtools/client/themes/shadereditor.css @@ -0,0 +1,109 @@ +/* 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/. */ + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + color: var(--theme-body-color-alt); +} + +#reload-notice { + font-size: 120%; +} + +#waiting-notice { + font-size: 110%; +} + +/* Shaders pane */ + +#shaders-pane { + min-width: 150px; +} + +.program-item { + padding: 2px 0px; +} + +.side-menu-widget-item-checkbox { + -moz-appearance: none; + opacity: 0; + transition: opacity .15s ease-out 0s; +} + +/* Only show the checkbox when the source is hovered over, is selected, or if it + * is not checked. */ +.side-menu-widget-item:hover > .side-menu-widget-item-checkbox, +.side-menu-widget-item.selected > .side-menu-widget-item-checkbox, +.side-menu-widget-item-checkbox:not([checked]) { + opacity: 1; + transition: opacity .15s ease-out 0s; +} + +.side-menu-widget-item-checkbox .checkbox-check { + -moz-appearance: none; + background-image: url(images/item-toggle.svg); + background-color: transparent; + width: 16px; + height: 16px; + border: 0; +} + +.side-menu-widget-item-checkbox:not([checked]) .checkbox-check, +.side-menu-widget-item-checkbox:not([checked]) + vbox { + opacity: 0.3; +} + +.side-menu-widget-item:not(.selected) .checkbox-check { + filter: var(--icon-filter); +} + +/* Make sure icon is white when the item is selected */ +.side-menu-widget-item.selected .checkbox-check { + filter: invert(1); +} + +/* Shader source editors */ + +.editor-label { + padding: 1px 12px; + border-top: 1px solid; +} + +.editor-label { + background: var(--theme-toolbar-background); + border-color: var(--theme-splitter-color); + color: var(--theme-body-color-alt); +} + +.editor-label[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +/* Responsive sidebar */ + +@media (max-width: 700px) { + #shaders-pane { + max-height: 60vh; + } + + #editors-splitter { + border-color: transparent; + } + + .side-menu-widget-container { + box-shadow: none !important; + } + + .side-menu-widget-item-arrow { + background-image: none !important; + } + + .editor-label { + -moz-box-ordinal-group: 0; + border-bottom: 1px solid; + } +} diff --git a/devtools/client/themes/shims/common.css b/devtools/client/themes/shims/common.css new file mode 100644 index 000000000..c8a99561f --- /dev/null +++ b/devtools/client/themes/shims/common.css @@ -0,0 +1,10 @@ +/* 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/. */ + + /** + * This file only exists to support add-ons which import this style sheet at a + * specific path. + */ + +@import url("resource://devtools/client/themes/common.css"); diff --git a/devtools/client/themes/shims/jar.mn b/devtools/client/themes/shims/jar.mn new file mode 100644 index 000000000..e1025dce7 --- /dev/null +++ b/devtools/client/themes/shims/jar.mn @@ -0,0 +1,6 @@ +# 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/. + +browser.jar: + skin/classic/browser/devtools/common.css (common.css) diff --git a/devtools/client/themes/shims/moz.build b/devtools/client/themes/shims/moz.build new file mode 100644 index 000000000..c44334263 --- /dev/null +++ b/devtools/client/themes/shims/moz.build @@ -0,0 +1,8 @@ +# -*- 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/. + +# Shim old theme paths used by DevTools add-ons +JAR_MANIFESTS += ['jar.mn'] diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css new file mode 100644 index 000000000..ade867d52 --- /dev/null +++ b/devtools/client/themes/splitters.css @@ -0,0 +1,80 @@ +/* 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/. */ + +/* This file is loaded by both browser.xul and toolbox.xul. Therefore, rules + defined here can not rely on toolbox.xul variables. */ + +/* Splitters */ + +:root { + /* Define the widths of the draggable areas on each side of a splitter. top + and bottom widths are used for horizontal splitters, inline-start and + inline-end for side splitters.*/ + + --devtools-splitter-top-width: 2px; + --devtools-splitter-bottom-width: 2px; + + /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/ + --devtools-splitter-inline-start-width: 1px; + --devtools-splitter-inline-end-width: 4px; +} + +:root[devtoolstheme="light"] { + /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */ + --devtools-splitter-color: #dde1e4; +} + +:root[devtoolstheme="dark"], +:root[devtoolstheme="firebug"] { + --devtools-splitter-color: #42484f; +} + +.devtools-horizontal-splitter, +.devtools-side-splitter { + -moz-appearance: none; + background-image: none; + border: 0; + border-style: solid; + border-color: transparent; + background-color: var(--devtools-splitter-color); + background-clip: content-box; + position: relative; + + box-sizing: border-box; + + /* Positive z-index positions the splitter on top of its siblings and makes + it clickable on both sides. */ + z-index: 1; +} + +.devtools-horizontal-splitter { + min-height: calc(var(--devtools-splitter-top-width) + + var(--devtools-splitter-bottom-width) + 1px); + + border-top-width: var(--devtools-splitter-top-width); + border-bottom-width: var(--devtools-splitter-bottom-width); + + margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); + margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); + + cursor: n-resize; +} + +.devtools-side-splitter { + min-width: calc(var(--devtools-splitter-inline-start-width) + + var(--devtools-splitter-inline-end-width) + 1px); + + border-inline-start-width: var(--devtools-splitter-inline-start-width); + border-inline-end-width: var(--devtools-splitter-inline-end-width); + + margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px); + margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width)); + + cursor: e-resize; +} + +.devtools-horizontal-splitter.disabled, +.devtools-side-splitter.disabled { + pointer-events: none; +} diff --git a/devtools/client/themes/splitview.css b/devtools/client/themes/splitview.css new file mode 100644 index 000000000..291867f3d --- /dev/null +++ b/devtools/client/themes/splitview.css @@ -0,0 +1,75 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 { + --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg); + --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg); +} +.theme-light { + --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg); + --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg); +} + +.splitview-nav-container .devtools-throbber { + display: none; + text-align: center; +} + +.loading .splitview-nav-container .devtools-throbber { + display: block; +} + +.splitview-nav { + list-style: none; + padding: 0; + margin: 0; + background-color: var(--theme-sidebar-background); +} + +.splitview-nav > li { + padding-inline-end: 8px; + -moz-box-align: center; + outline: 0; + vertical-align: bottom; + border-bottom: 1px solid rgba(128,128,128,0.15); +} + +.placeholder { + -moz-box-flex: 1; + text-align: center; +} + +.splitview-nav > li.splitview-active { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); + background-image: var(--sidemenu-selected-arrow); + background-repeat: no-repeat; + background-position: center right; +} + +.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: var(--sidemenu-selected-arrow-rtl); + background-position: center left; +} + +/* Toolbars */ + +.splitview-main > .devtools-toolbar { + background-origin: border-box; + background-clip: border-box; +} + +.splitview-main > toolbar, +.loading .splitview-nav-container { + border-inline-end: 1px solid var(--theme-splitter-color); +} + +.splitview-main > .devtools-toolbarbutton { + font-size: 11px; + padding: 0 8px; + width: auto; + min-width: 48px; + min-height: 0; +} diff --git a/devtools/client/themes/storage.css b/devtools/client/themes/storage.css new file mode 100644 index 000000000..1e611f842 --- /dev/null +++ b/devtools/client/themes/storage.css @@ -0,0 +1,49 @@ +/* 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/. */ + +/* Storage Host Tree */ + +#storage-tree { + min-width: 220px; + max-width: 500px; + overflow: auto; +} + +#storage-tree { + background: var(--theme-sidebar-background); +} + +#storage-tree .tree-widget-item[type="store"]:after { + background-image: url(chrome://devtools/skin/images/tool-storage.svg); + background-size: 18px 18px; + background-position: -1px 0; +} + +/* Columns with date should have a min width so that date is visible */ +#expires, #lastAccessed, #creationTime { + min-width: 150px; +} + +/* Variables View Sidebar */ + +#storage-sidebar { + max-width: 500px; + min-width: 250px; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #storage-tree, + #storage-sidebar { + max-width: 100%; + } + + #storage-table #path { + display: none; + } + + #storage-table .table-widget-cell { + min-width: 100px; + } +} diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css new file mode 100644 index 000000000..db70a340a --- /dev/null +++ b/devtools/client/themes/styleeditor.css @@ -0,0 +1,445 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +#style-editor-chrome { + -moz-box-flex: 1; +} + +.splitview-nav > li, +.stylesheet-info, +.stylesheet-more, +.stylesheet-rule-count, +li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton, +li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton { + display: -moz-box; +} + +.devtools-toolbar > spacer { + -moz-box-flex: 1; +} + +.style-editor-newButton { + list-style-image: url(images/add.svg); +} + +.style-editor-importButton { + list-style-image: url(images/import.svg); +} + +.stylesheet-details-container { + -moz-box-flex: 1; +} + +.stylesheet-media-container { + overflow-y: auto; +} + +.stylesheet-error-message { + display: none; +} + +li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { + display: block; +} + +.stylesheet-title, +.stylesheet-name { + text-decoration: none; +} + +.stylesheet-name { + font-size: 13px; + white-space: nowrap; +} + +.stylesheet-name > label { + display: inline; + cursor: pointer; +} + +.stylesheet-info > h1 { + -moz-box-flex: 1; +} + +.splitview-nav > li > hgroup.stylesheet-info { + -moz-box-pack: center; +} + +.stylesheet-more > spacer { + -moz-box-flex: 1; +} + +.theme-dark .stylesheet-title, +.theme-dark .stylesheet-name { + color: var(--theme-selection-color); +} + +.theme-dark .stylesheet-rule-count, +.theme-dark .stylesheet-linked-file, +.theme-dark .stylesheet-saveButton { + color: var(--theme-body-color-alt); +} + +.theme-light .stylesheet-title, +.theme-light .stylesheet-name { + color: var(--theme-body-color-alt); +} + +.theme-light .stylesheet-rule-count, +.theme-light .stylesheet-linked-file, +.theme-light .stylesheet-saveButton { + color: var(--theme-body-color); +} + +.stylesheet-saveButton { + display: none; + margin-top: 0px; + margin-bottom: 0px; + text-decoration: underline; + cursor: pointer; +} + +.splitview-active .stylesheet-title, +.splitview-active .stylesheet-name, +.theme-light .splitview-active .stylesheet-rule-count, +.theme-light .splitview-active .stylesheet-linked-file, +.theme-light .splitview-active .stylesheet-saveButton { + color: var(--theme-selection-color); +} + +.splitview-nav:focus { + outline: 0; /* focus ring is on the stylesheet name */ +} + +.splitview-nav > li { + -moz-box-orient: horizontal; +} + +.splitview-nav > li > hgroup { + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + +.splitview-nav > li.unsaved > hgroup .stylesheet-name { + font-style: italic; +} + +.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, +.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { + font-style: italic; +} + +.splitview-nav.empty > p { + padding: 0 10px; +} + +.stylesheet-sidebar { + max-width: 400px; + min-width: 100px; + border-color: var(--theme-splitter-color); +} + +.theme-light .media-rule-label { + border-bottom-color: #cddae5; /* Grey */ +} + +.theme-dark .media-rule-label { + border-bottom-color: #303b47; /* Grey */ +} + +.media-rule-label { + display: flex; + padding: 4px; + cursor: pointer; + border-bottom: 1px solid; +} + +.media-responsive-mode-toggle { + color: var(--theme-highlight-blue); + text-decoration: underline; +} + +.media-rule-line { + padding-inline-start: 4px; +} + +.media-condition-unmatched { + opacity: 0.4; +} + +.media-rule-condition { + flex: 1; + overflow: hidden; +} + +.stylesheet-enabled { + display: -moz-box; + cursor: pointer; + padding: 8px 0; + margin: 0 8px; + background-image: url(images/item-toggle.svg); + background-repeat: no-repeat; + background-clip: content-box; + background-position: center; + background-size: 16px; + width: 24px; + height: 40px; + filter: var(--icon-filter); +} + +.disabled > .stylesheet-enabled { + opacity: 0.3; +} + +/* Invert the toggle icon in the active row for light theme */ +.theme-light .splitview-nav > li.splitview-active .stylesheet-enabled { + filter: invert(1); +} + +.splitview-nav > li > .stylesheet-enabled:focus, +.splitview-nav > li:hover > .stylesheet-enabled { + outline: 0; +} + +.stylesheet-linked-file:not(:empty){ + margin-inline-end: 0.4em; +} + +.stylesheet-linked-file:not(:empty):before { + margin-inline-start: 0.4em; + content: " ↳ "; +} + +li.unsaved > hgroup > h1 > .stylesheet-name:before { + content: "*"; +} + +li.linked-file-error .stylesheet-linked-file { + text-decoration: line-through; +} + +li.linked-file-error .stylesheet-linked-file:after { + font-size: 110%; + content: " ✘"; +} + +li.linked-file-error .stylesheet-rule-count { + visibility: hidden; +} + +.stylesheet-more > h3 { + font-size: 11px; + margin-inline-end: 2px; +} + +.devtools-searchinput, +.devtools-filterinput { + max-width: 25ex; + font-size: 11px; +} + +.placeholder a { + text-decoration: underline; +} + +h1, +h2, +h3 { + font-size: inherit; + font-weight: normal; + margin: 0; + padding: 0; +} + +@media (max-width: 700px) { + .stylesheet-sidebar { + width: 150px; + } +} + +/* portrait mode */ +@media (max-width: 550px) { + li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count, + li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count { + display: none; + } + + .splitview-nav { + box-shadow: none; + } + + .splitview-nav > li.splitview-active { + background-size: 0 0, 0 0, auto; + } + + .stylesheet-enabled { + padding: 0; + background-position: 0 0; + height: 24px; + } + + .disabled > .stylesheet-enabled { + background-position: -24px 0; + } + + .splitview-nav > li > hgroup.stylesheet-info { + -moz-box-align: baseline; + -moz-box-orient: horizontal; + -moz-box-flex: 1; + } + + .stylesheet-sidebar { + width: 180px; + } + + .stylesheet-more { + -moz-box-flex: 1; + -moz-box-pack: end; + } + + .stylesheet-more > spacer { + -moz-box-flex: 0; + } +} + +/* CSS coverage */ +.csscoverage-report { + background-color: var(--theme-toolbar-background); + -moz-box-orient: horizontal; +} + +.csscoverage-report-container { + height: 100vh; + padding: 0 10px; + overflow-x: hidden; + overflow-y: auto; + -moz-box-flex: 1; +} + +.csscoverage-report-content { + margin: 20px auto; + -moz-column-width: 300px; + font-size: 13px; + -moz-user-select: text; +} + +.csscoverage-report-summary, +.csscoverage-report-unused, +.csscoverage-report-optimize { + display: inline-block; +} + +.csscoverage-report-unused, +.csscoverage-report-optimize { + flex: 1; + min-width: 0; +} + +@media (max-width: 950px) { + .csscoverage-report-content { + display: block; + } + + .csscoverage-report-summary { + display: block; + text-align: center; + } +} + +.csscoverage-report h1 { + font-size: 120%; +} + +.csscoverage-report h2 { + font-size: 110%; +} + +.csscoverage-report h1, +.csscoverage-report h2, +.csscoverage-report h3 { + font-weight: bold; + margin: 10px 0; +} + +.csscoverage-report code, +.csscoverage-report textarea { + font-family: var(--monospace-font-family); + font-size: inherit; +} + +.csscoverage-list:after { + content: ', '; +} + +.csscoverage-list:last-child:after { + display: none; +} + +.csscoverage-report textarea { + width: 100%; + height: 100px; +} + +.csscoverage-report a { + cursor: pointer; + text-decoration: underline; +} + +.csscoverage-report > .csscoverage-toolbar { + border: none; + margin: 0; + padding: 0; +} + +.csscoverage-report > .csscoverage-toolbarbutton { + min-width: 4em; + min-height: 100vh; + margin: 0; + padding: 0; + border-radius: 0; + border-top: none; + border-bottom: none; + border-inline-start: none; +} + +.csscoverage-report .pie-table-chart-container { + -moz-box-orient: vertical; + text-align: start; +} + +.chart-colored-blob[name="Used Preload"] { + fill: var(--theme-highlight-pink); + background: var(--theme-highlight-pink); +} + +.chart-colored-blob[name=Used] { + fill: var(--theme-highlight-green); + background: var(--theme-highlight-green); +} + +.chart-colored-blob[name=Unused] { + fill: var(--theme-highlight-lightorange); + background: var(--theme-highlight-lightorange); +} + +/* Undo 'largest' customization */ +.theme-dark .pie-chart-slice[largest] { + stroke-width: 1px; + stroke: rgba(0,0,0,0.2); +} + +.theme-light .pie-chart-slice[largest] { + stroke-width: 1px; + stroke: rgba(255,255,255,0.8); +} + +.csscoverage-report .pie-chart-slice { + cursor: default; +} + +.csscoverage-report-chart { + margin: 0 20px; +} diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css new file mode 100644 index 000000000..75a807d51 --- /dev/null +++ b/devtools/client/themes/toolbars.css @@ -0,0 +1,216 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 devtools toolbar that aren't defined by the themes */ +.theme-light { + --toolbar-tab-hover: rgba(170, 170, 170, .2); + --toolbar-tab-hover-active: rgba(170, 170, 170, .4); + --searchbox-background-color: #ffee99; + --searchbox-border-color: #ffbf00; + --searcbox-no-match-background-color: #ffe5e5; + --searcbox-no-match-border-color: #e52e2e; + --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg); + --filter-image: url(chrome://devtools/skin/images/filter.svg); + --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg); + --icon-filter: none; + --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state); + --toolbar-button-border-color: rgba(170, 170, 170, .5); +} + +.theme-dark { + --toolbar-tab-hover: hsla(206, 37%, 4%, .2); + --toolbar-tab-hover-active: hsla(206, 37%, 4%, .4); + --searchbox-background-color: #4d4222; + --searchbox-border-color: #d99f2b; + --searcbox-no-match-background-color: #402325; + --searcbox-no-match-border-color: #cc3d3d; + --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg); + --filter-image: url(chrome://devtools/skin/images/filter.svg); + --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg); + --icon-filter: invert(1); + --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#dark-theme-checked-icon-state); + --toolbar-button-border-color: rgba(0, 0, 0, .4); +} + +.theme-firebug { + --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg); + --tool-options-image: url(chrome://devtools/skin/images/firebug/tool-options.svg); + --icon-filter: none; + --checked-icon-filter: none; + --toolbar-button-border-color: rgba(170, 170, 170, .5); +} + + +/* Toolbars */ +.devtools-toolbar, +.devtools-sidebar-tabs tabs { + -moz-appearance: none; + padding: 0; + border-width: 0; + border-bottom-width: 1px; + border-style: solid; + height: 24px; + line-height: 24px; + box-sizing: border-box; +} + +.devtools-toolbar { + padding: 0 3px; +} + +.devtools-toolbar checkbox { + margin: 0 2px; + padding: 0; + line-height: -moz-block-height; +} + +.devtools-toolbar checkbox .checkbox-check { + margin: 0; + padding: 0; + vertical-align: bottom; +} + +.devtools-toolbar checkbox .checkbox-label-box { + border: none !important; /* overrides .checkbox-label-box from checkbox.css */ +} + +.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { + margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */ + padding: 0; +} + +.devtools-separator { + margin: 0 2px; + width: 2px; + background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; +} + +/* In-tools sidebar */ +.devtools-sidebar-tabs { + -moz-appearance: none; + margin: 0; + height: 100%; +} + +.devtools-sidebar-tabs > tabpanels { + -moz-appearance: none; + background: transparent; + padding: 0; + border: 0; +} + +.theme-light .devtools-sidebar-tabs > tabpanels { + background: var(--theme-sidebar-background); + color: var(--theme-body-color); +} + +.devtools-sidebar-tabs tabs { + position: static; + font: inherit; + margin-bottom: 0; + overflow: hidden; +} + +.devtools-sidebar-alltabs { + -moz-appearance: none; + height: 24px; + line-height: 24px; + padding: 0 4px; + margin: 0; + border-width: 0 0 1px 0; + border-inline-start-width: 1px; + border-style: solid; +} + +.devtools-sidebar-alltabs .toolbarbutton-icon { + display: none; +} + +.devtools-sidebar-tabs tabs > .tabs-right, +.devtools-sidebar-tabs tabs > .tabs-left { + display: none; +} + +.devtools-sidebar-tabs tabs > tab { + -moz-appearance: none; + /* We want to match the height of a toolbar with a toolbarbutton + * First, we need to replicated the padding of toolbar (4px), + * then we need to take the border of the buttons into account (1px). + */ + padding: 0 3px; + margin: 0; + min-width: 78px; + text-align: center; + background-color: transparent; + color: inherit; + -moz-box-flex: 1; + border-width: 0; + border-inline-start-width: 1px; + border-style: solid; + border-radius: 0; + position: static; + text-shadow: none; +} + +.devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; +} + +.devtools-sidebar-tabs tabs > tab[selected], +.devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + border-inline-start-width: 0; +} + +.devtools-sidebar-tabs tabs > tab:hover { + background: rgba(0, 0, 0, 0.12); +} + +.devtools-sidebar-tabs tabs > tab:hover:active { + background: rgba(0, 0, 0, 0.2); +} + +.devtools-sidebar-tabs tabs > tab[selected], +.devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: var(--theme-selection-background); +} + +/* Invert the colors of certain light theme images for displaying + * inside of the dark theme. + */ +.devtools-tab[icon-invertable] > image, +.devtools-toolbarbutton > image, +.devtools-button::before, +.scrollbutton-up > .toolbarbutton-icon, +.scrollbutton-down > .toolbarbutton-icon, +#black-boxed-message-button .button-icon, +#requests-menu-perf-notice-button .button-icon, +#canvas-debugging-empty-notice-button .button-icon, +#toggle-breakpoints[checked] > image, +.event-tooltip-debugger-icon { + filter: var(--icon-filter); +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} + +.devtools-invisible-splitter { + border-color: transparent; + background-color: transparent; +} + +.devtools-horizontal-splitter, +.devtools-side-splitter { + background-color: var(--theme-splitter-color); +} diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css new file mode 100644 index 000000000..1db2bd01c --- /dev/null +++ b/devtools/client/themes/toolbox.css @@ -0,0 +1,408 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 { + --close-button-image: url(chrome://devtools/skin/images/close.svg); + --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg); + --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg); + --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg); + + --command-paintflashing-image: url(images/command-paintflashing.svg); + --command-screenshot-image: url(images/command-screenshot.svg); + --command-responsive-image: url(images/command-responsivemode.svg); + --command-scratchpad-image: url(images/tool-scratchpad.svg); + --command-pick-image: url(images/command-pick.svg); + --command-frames-image: url(images/command-frames.svg); + --command-splitconsole-image: url(images/command-console.svg); + --command-noautohide-image: url(images/command-noautohide.svg); + --command-rulers-image: url(images/command-rulers.svg); + --command-measure-image: url(images/command-measure.svg); +} + +.theme-firebug { + --close-button-image: url(chrome://devtools/skin/images/firebug/close.svg); + --dock-bottom-image: url(chrome://devtools/skin/images/firebug/dock-bottom.svg); + --dock-side-image: url(chrome://devtools/skin/images/firebug/dock-side.svg); + --dock-undock-image: url(chrome://devtools/skin/images/firebug/dock-undock.svg); + + --command-paintflashing-image: url(images/firebug/command-paintflashing.svg); + --command-screenshot-image: url(images/firebug/command-screenshot.svg); + --command-responsive-image: url(images/firebug/command-responsivemode.svg); + --command-scratchpad-image: url(images/firebug/command-scratchpad.svg); + --command-pick-image: url(images/firebug/command-pick.svg); + --command-frames-image: url(images/firebug/command-frames.svg); + --command-splitconsole-image: url(images/firebug/command-console.svg); + --command-noautohide-image: url(images/firebug/command-noautohide.svg); + --command-rulers-image: url(images/firebug/command-rulers.svg); + --command-measure-image: url(images/firebug/command-measure.svg); +} + +/* Toolbox tabbar */ + +.devtools-tabbar { + -moz-appearance: none; + min-height: 24px; + border: 0px solid; + border-bottom-width: 1px; + padding: 0; + background: var(--theme-tab-toolbar-background); + border-bottom-color: var(--theme-splitter-color); +} + +#toolbox-tabs { + margin: 0; +} + +/* Set flex attribute to Toolbox buttons and Picker container so, + they don't overlapp with the tab bar */ +#toolbox-buttons { + display: flex; +} + +#toolbox-picker-container { + display: flex; +} + +/* Toolbox tabs */ + +.devtools-tab { + -moz-appearance: none; + -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); + -moz-box-align: center; + min-width: 32px; + min-height: 24px; + max-width: 100px; + margin: 0; + padding: 0; + border-style: solid; + border-width: 0; + border-inline-start-width: 1px; + -moz-box-align: center; + -moz-box-flex: 1; +} + +/* Save space on the tab-strip in Firebug theme */ +.theme-firebug .devtools-tab { + -moz-box-flex: initial; +} + +.theme-dark .devtools-tab { + color: var(--theme-body-color-alt); + border-color: #42484f; +} + +.theme-light .devtools-tab { + color: var(--theme-body-color); + border-color: var(--theme-splitter-color); +} + +.theme-dark .devtools-tab:hover { + color: #ced3d9; +} + +.devtools-tab:hover { + background-color: var(--toolbar-tab-hover); +} + +.theme-dark .devtools-tab:hover:active { + color: var(--theme-selection-color); +} + +.devtools-tab:hover:active { + background-color: var(--toolbar-tab-hover-active); +} + +.theme-dark .devtools-tab:not([selected])[highlighted] { + background-color: hsla(99, 100%, 14%, .3); +} + +.theme-light .devtools-tab:not([selected])[highlighted] { + background-color: rgba(44, 187, 15, .2); +} + +/* Display execution pointer in the Debugger tab to indicate + that the debugger is paused. */ +.theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not([selected])[highlighted] { + background-color: rgba(89, 178, 234, .2); + background-image: url(chrome://devtools/skin/images/firebug/tool-debugger-paused.svg); + background-repeat: no-repeat; + padding-left: 13px !important; + background-position: 3px 6px; +} + +.devtools-tab > image { + border: none; + margin: 0; + margin-inline-start: 4px; + opacity: 0.6; + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +/* Support invertable icon flags and make icon white when it's on a blue background */ +.theme-light .devtools-tab[icon-invertable="light-theme"]:not([selected]) > image, +.devtools-tab[icon-invertable="dark-theme"][selected] > image { + filter: invert(1); +} + +/* Don't apply any filter to non-invertable command button icons */ +.command-button:not(.command-button-invertable), +/* [icon-invertable="light-theme"] icons are white, so do not invert them for the dark theme */ +.theme-dark .devtools-tab[icon-invertable="light-theme"] > image, +/* Since "highlighted" icons are green, we should omit the filter */ +.devtools-tab[icon-invertable][highlighted]:not([selected]) > image { + filter: none; +} + +.devtools-tab > label { + white-space: nowrap; + margin: 0 4px; +} + +.devtools-tab:hover > image { + opacity: 0.8; +} + +.devtools-tab:active > image, +.devtools-tab[selected] > image { + opacity: 1; +} + +.devtools-tabbar .devtools-tab[selected], +.devtools-tabbar .devtools-tab[selected]:hover:active { + color: var(--theme-selection-color); + background-color: var(--theme-selection-background); +} + +#toolbox-tabs .devtools-tab[selected], +#toolbox-tabs .devtools-tab[highlighted] { + border-width: 0; + padding-inline-start: 1px; +} + +#toolbox-tabs .devtools-tab[selected]:last-child, +#toolbox-tabs .devtools-tab[highlighted]:last-child { + padding-inline-end: 1px; +} + +#toolbox-tabs .devtools-tab[selected] + .devtools-tab, +#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { + border-inline-start-width: 0; + padding-inline-start: 1px; +} + +#toolbox-tabs .devtools-tab:first-child[selected] { + border-inline-start-width: 0; +} + +#toolbox-tabs .devtools-tab:last-child { + border-inline-end-width: 1px; +} + +.devtools-tab:not([highlighted]) > .highlighted-icon, +.devtools-tab[selected] > .highlighted-icon, +.devtools-tab:not([selected])[highlighted] > .default-icon { + visibility: collapse; +} + +/* The options tab is special - it doesn't have the same parent + as the other tabs (toolbox-option-container vs toolbox-tabs) */ +#toolbox-option-container .devtools-tab:not([selected]) { + background-color: transparent; +} +#toolbox-option-container .devtools-tab { + border-color: transparent; + border-width: 0; + padding-inline-start: 1px; +} +#toolbox-tab-options > image { + margin: 0 8px; +} + +/* Toolbox controls */ + +#toolbox-controls > button, +#toolbox-dock-buttons > button { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; +} + +/* Save space in Firebug theme */ +.theme-firebug #toolbox-controls button { + margin-inline-start: 0 !important; + min-width: 12px; + margin: 0 1px; +} + +#toolbox-close::before { + background-image: var(--close-button-image); +} + +#toolbox-dock-bottom::before { + background-image: var(--dock-bottom-image); +} + +#toolbox-dock-side::before { + background-image: var(--dock-side-image); +} + +#toolbox-dock-window::before { + background-image: var(--dock-undock-image); +} + +#toolbox-dock-bottom-minimize::before { + background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized::before { + background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png"); +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; +} + +/* Command buttons */ + +.command-button { + padding: 0; + margin: 0; + position: relative; +} + +.command-button::before { + opacity: 0.7; +} + +.command-button:hover { + background-color: var(--toolbar-tab-hover); +} + +.theme-light .command-button:hover { + background-color: inherit; +} + +.command-button:hover:active, +.command-button[checked=true]:not(:hover) { + background-color: var(--toolbar-tab-hover-active) +} + +.theme-light .command-button:hover:active, +.theme-light .command-button[checked=true]:not(:hover) { + background-color: inherit; +} + +.command-button:hover::before { + opacity: 0.85; +} + +.command-button:hover:active::before, +.command-button[checked=true]::before, +.command-button[open=true]::before { + opacity: 1; +} + +/* Command button images */ + +#command-button-paintflashing::before { + background-image: var(--command-paintflashing-image); +} + +#command-button-screenshot::before { + background-image: var(--command-screenshot-image); +} + +#command-button-responsive::before { + background-image: var(--command-responsive-image); +} + +#command-button-scratchpad::before { + background-image: var(--command-scratchpad-image); +} + +#command-button-pick::before { + background-image: var(--command-pick-image); +} + +#command-button-splitconsole::before { + background-image: var(--command-splitconsole-image); +} + +#command-button-noautohide::before { + background-image: var(--command-noautohide-image); +} + +#command-button-eyedropper::before { + background-image: var(--command-eyedropper-image); +} + +#command-button-rulers::before { + background-image: var(--command-rulers-image); +} + +#command-button-measure::before { + background-image: var(--command-measure-image); +} + +#command-button-frames::before { + background-image: var(--command-frames-image); +} + +#command-button-frames { + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-repeat: no-repeat; + + /* Override background-size from the command-button. + The drop down arrow is smaller */ + background-size: 8px 4px !important; + min-width: 32px; +} + +#command-button-frames:-moz-locale-dir(ltr) { + background-position: right; +} + +#command-button-frames:-moz-locale-dir(rtl) { + background-position: left; +} + +/* Toolbox panels */ + +.toolbox-panel { + display: -moz-box; + -moz-box-flex: 1; + visibility: collapse; +} + +.toolbox-panel[selected] { + visibility: visible; +} + +/** + * When panels are collapsed or hidden, making sure that they are also + * inaccessible by keyboard. This is not the case by default because the are + * predominantly hidden using visibility: collapse; style or collapsed + * attribute. + */ +.toolbox-panel *, +#toolbox-panel-webconsole[collapsed] * { + -moz-user-focus: ignore; +} + +/** + * Enrure that selected toolbox panel's contents are keyboard accessible as they + * are explicitly made not to be when hidden (default). + */ +.toolbox-panel[selected] * { + -moz-user-focus: normal; +} diff --git a/devtools/client/themes/tooltip/arrow-horizontal-dark.png b/devtools/client/themes/tooltip/arrow-horizontal-dark.png new file mode 100644 index 000000000..751fbc3d3 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-horizontal-dark.png differ diff --git a/devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png b/devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png new file mode 100644 index 000000000..e4db35e72 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png differ diff --git a/devtools/client/themes/tooltip/arrow-horizontal-light.png b/devtools/client/themes/tooltip/arrow-horizontal-light.png new file mode 100644 index 000000000..298ced115 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-horizontal-light.png differ diff --git a/devtools/client/themes/tooltip/arrow-horizontal-light@2x.png b/devtools/client/themes/tooltip/arrow-horizontal-light@2x.png new file mode 100644 index 000000000..7dec13406 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-horizontal-light@2x.png differ diff --git a/devtools/client/themes/tooltip/arrow-vertical-dark.png b/devtools/client/themes/tooltip/arrow-vertical-dark.png new file mode 100644 index 000000000..dfd535433 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-vertical-dark.png differ diff --git a/devtools/client/themes/tooltip/arrow-vertical-dark@2x.png b/devtools/client/themes/tooltip/arrow-vertical-dark@2x.png new file mode 100644 index 000000000..721bb0d88 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-vertical-dark@2x.png differ diff --git a/devtools/client/themes/tooltip/arrow-vertical-light.png b/devtools/client/themes/tooltip/arrow-vertical-light.png new file mode 100644 index 000000000..5a57fc353 Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-vertical-light.png differ diff --git a/devtools/client/themes/tooltip/arrow-vertical-light@2x.png b/devtools/client/themes/tooltip/arrow-vertical-light@2x.png new file mode 100644 index 000000000..c2b95c45a Binary files /dev/null and b/devtools/client/themes/tooltip/arrow-vertical-light@2x.png differ diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css new file mode 100644 index 000000000..4cd6f3bf3 --- /dev/null +++ b/devtools/client/themes/tooltips.css @@ -0,0 +1,456 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* Tooltip specific theme variables */ + +.theme-dark { + --bezier-diagonal-color: #eee; + --bezier-grid-color: rgba(0, 0, 0, 0.2); +} + +.theme-light { + --bezier-diagonal-color: rgba(0, 0, 0, 0.2); + --bezier-grid-color: rgba(0, 0, 0, 0.05); +} + +/* Tooltip widget (see devtools/client/shared/widgets/tooltip/Tooltip.js) */ + +.devtools-tooltip .panel-arrowcontent { + padding: 4px; +} + +.devtools-tooltip .panel-arrowcontainer { + /* Reseting the transition used when panels are shown */ + transition: none; + /* Panels slide up/down/left/right when they appear using a transform. + Since we want to remove the transition, we don't need to transform anymore + plus it can interfeer by causing mouseleave events on the underlying nodes */ + transform: none; +} + +.devtools-tooltip[clamped-dimensions] { + min-height: 100px; + max-height: 400px; + min-width: 100px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions-no-min-height] { + min-height: 0; + max-height: 400px; + min-width: 100px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions-no-max-or-min-height] { + min-width: 400px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions] .panel-arrowcontent, +.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent, +.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent { + overflow: hidden; +} +.devtools-tooltip[wide] { + max-width: 600px; +} + +/* Tooltip: Simple Text */ + +.devtools-tooltip-simple-text { + max-width: 400px; + margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ + padding: 8px 12px; + white-space: pre-wrap; +} + +.devtools-tooltip-simple-text:first-child { + margin-top: -4px; +} + +.devtools-tooltip-simple-text:last-child { + margin-bottom: -4px; +} + +/* Tooltip: Variables View */ + +.devtools-tooltip-variables-view-box { + margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ +} + +.devtools-tooltip-variables-view-box .variable-or-property > .title { + padding-inline-end: 6px; +} + +/* Tooltip: Tiles */ + +.devtools-tooltip-tiles { + 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: 20px 20px; + background-position: 0 0, 10px 10px; +} + +.devtools-tooltip-iframe { + border: none; + background: transparent; +} + +.tooltip-container { + display: none; + position: fixed; + z-index: 9999; + display: none; + background: transparent; + pointer-events: none; + overflow: hidden; + filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow)); +} + +.tooltip-xul-wrapper { + -moz-appearance: none; + background: transparent; + overflow: visible; + border-style: none; +} + +.tooltip-xul-wrapper .tooltip-container { + position: absolute; +} + +.tooltip-top { + flex-direction: column; +} + +.tooltip-bottom { + flex-direction: column-reverse; +} + +.tooltip-panel{ + background-color: var(--theme-tooltip-background); + pointer-events: all; + flex-grow: 1; +} + +.tooltip-visible { + display: flex; +} + +.tooltip-hidden { + display: flex; + visibility: hidden; +} + +/* Tooltip : flexible height styles */ + +.tooltip-flexible-height .tooltip-panel { + /* In flexible mode the tooltip panel should only grow according to its content. */ + flex-grow: 0; +} + +.tooltip-flexible-height .tooltip-filler { + /* In flexible mode the filler should grow as much as possible. */ + flex-grow: 1; +} + +/* type="arrow" overrides: remove arrow decorations for the xul wrapper */ + +.tooltip-xul-wrapper[type="arrow"] { + margin: 0; +} + +/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */ + +/* Remove all decorations on .panel-arrowcontent is the tooltip content container. */ +.tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent { + margin: 0; + padding: 0; + background: transparent; + border: none; + box-shadow: none; +} + +/* Tooltip : arrow style */ + +.tooltip-xul-wrapper .tooltip-container { + /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */ + filter: none; +} + +.tooltip-container[type="arrow"] > .tooltip-panel { + position: relative; + min-height: 10px; + box-sizing: border-box; + width: 100%; + + border: 3px solid var(--theme-tooltip-border); + border-radius: 5px; +} + +.tooltip-top[type="arrow"] .tooltip-panel { + top: 0; +} + +.tooltip-bottom[type="arrow"] .tooltip-panel { + bottom: 0; +} + +.tooltip-arrow { + position: relative; + height: 16px; + width: 32px; + overflow: hidden; + flex-shrink: 0; +} + +/* In RTL locales, only use RTL on the tooltip content, keep LTR for positioning */ +.tooltip-container:-moz-locale-dir(rtl) { + direction: ltr; +} + +.tooltip-panel:-moz-locale-dir(rtl) { + direction: rtl; +} + +.tooltip-top .tooltip-arrow { + margin-top: -3px; +} + +.tooltip-bottom .tooltip-arrow { + margin-bottom: -3px; +} + +.tooltip-arrow:before { + content: ""; + position: absolute; + width: 21px; + height: 21px; + margin-left: 4px; + background: linear-gradient(-45deg, + var(--theme-tooltip-background) 50%, transparent 50%); + border-color: var(--theme-tooltip-border); + border-style: solid; + border-width: 0px 3px 3px 0px; + border-radius: 3px; + pointer-events: all; +} + +.tooltip-bottom .tooltip-arrow:before { + margin-top: 4px; + transform: rotate(225deg); +} + +.tooltip-top .tooltip-arrow:before { + margin-top: -12px; + transform: rotate(45deg); +} + +/* Tooltip: Events */ + +.event-header { + display: flex; + align-items: center; + cursor: pointer; + overflow: hidden; +} + +.event-header:first-child { + border-width: 0; +} + +.event-header:not(:first-child) { + border-width: 1px 0 0 0; +} + +.devtools-tooltip-events-container { + height: 100%; + overflow-y: auto; +} + +.event-tooltip-event-type, +.event-tooltip-filename, +.event-tooltip-attributes { + margin-inline-start: 0; + flex-shrink: 0; + cursor: pointer; +} + +.event-tooltip-event-type { + font-weight: bold; + font-size: 13px; +} + +.event-tooltip-filename { + margin: 0 5px; + font-size: 100%; + flex-shrink: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* Force ellipsis to be displayed on the left */ + direction: rtl; +} + +.event-tooltip-debugger-icon { + width: 16px; + height: 16px; + margin-inline-end: 4px; + opacity: 0.6; + flex-shrink: 0; +} + +.event-tooltip-debugger-icon:hover { + opacity: 1; +} + +.event-tooltip-content-box { + display: none; + height: 100px; + overflow: hidden; + margin-inline-end: 0; + border: 1px solid var(--theme-splitter-color); + border-width: 1px 0 0 0; +} + +.event-toolbox-content-box iframe { + height: 100%; + border-style: none; +} + +.event-tooltip-content-box[open] { + display: block; +} + +.event-tooltip-source-container { + margin-top: 5px; + margin-bottom: 10px; + margin-inline-start: 5px; + margin-inline-end: 0; +} + +.event-tooltip-source { + margin-bottom: 0; +} + +.event-tooltip-attributes-container { + display: flex; + flex-shrink: 0; + flex-grow: 1; + justify-content: flex-end; +} + +.event-tooltip-attributes-box { + display: flex; + flex-shrink: 0; + align-items: center; + height: 14px; + border-radius: 3px; + padding: 2px; + margin-inline-start: 5px; + background-color: var(--theme-body-color-alt); + color: var(--theme-toolbar-background); +} + +.event-tooltip-attributes { + margin: 0; + font-size: 9px; + padding-top: 2px; +} + +/* + * Tooltip: JS stack traces + */ + +.stack-trace-tooltip { + direction: ltr; + height: 100%; + overflow-y: auto; +} + +.stack-trace-tooltip > .stack-frame { + margin-left: 5px; + margin-right: 5px; +} + +.stack-trace-tooltip > .stack-frame:first-child { + margin-top: 5px; +} + +.stack-trace-tooltip > .stack-frame:last-child { + margin-bottom: 5px; +} + +.stack-frame-call { + color: var(--theme-body-color-alt); + cursor: pointer; + display: flex; +} + +.stack-frame-call:hover { + background-color: var(--theme-selection-background-semitransparent); +} + +.stack-frame-async { + color: var(--theme-body-color-inactive); +} + +.stack-frame-function-name { + color: var(--theme-highlight-blue); + max-width: 50%; + margin-inline-end: 1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.stack-frame-source-name { + flex: 1 1; + /* Makes the file name truncated (and ellipsis shown) on the left side */ + direction: rtl; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Enforce LTR direction for the file name - fixes bug 1290056 */ +.stack-frame-source-name-inner { + direction: ltr; + unicode-bidi: embed; +} + +.stack-frame-line { + color: var(--theme-highlight-orange); +} + +/* Tooltip: HTML Search */ + +#searchbox-panel-listbox { + width: 250px; + max-width: 250px; + overflow-x: hidden; +} + +#searchbox-panel-listbox .autocomplete-item, +#searchbox-panel-listbox .autocomplete-item[selected] { + overflow-x: hidden; +} + +#searchbox-panel-listbox .autocomplete-item > .initial-value { + max-width: 130px; + margin-left: 15px; +} + +#searchbox-panel-listbox .autocomplete-item > .autocomplete-value { + max-width: 150px; +} + +/* Tooltip: Image tooltip */ + +.devtools-tooltip-image-broken { + box-sizing: border-box; + height: 100%; + text-align: center; + line-height: 30px; +} diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css new file mode 100644 index 000000000..84f9282a6 --- /dev/null +++ b/devtools/client/themes/variables.css @@ -0,0 +1,203 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* Variable declarations for light and dark devtools themes. + * Colors are taken from: + * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. + * Changes should be kept in sync with commandline.css and commandline.inc.css. + */ + +/* IMPORTANT NOTE: + * This file is parsed in js (see client/shared/theme.js) + * so the formatting should be consistent (i.e. no '}' inside a rule). + */ + +:root.theme-light { + --theme-body-background: white; + --theme-sidebar-background: white; + --theme-contrast-background: #e6b064; + + --theme-tab-toolbar-background: #fcfcfc; + --theme-toolbar-background: #fcfcfc; + --theme-selection-background: #4c9ed9; + --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15); + --theme-selection-color: #f5f7fa; + --theme-splitter-color: #dde1e4; + --theme-comment: #696969; + + --theme-body-color: #393f4c; + --theme-body-color-alt: #585959; + --theme-body-color-inactive: #999797; + --theme-content-color1: #292e33; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #667380; + + --theme-highlight-green: #2cbb0f; + --theme-highlight-blue: #0088cc; + --theme-highlight-bluegrey: #0072ab; + --theme-highlight-purple: #5b5fff; + --theme-highlight-lightorange: #d97e00; + --theme-highlight-orange: #f13c00; + --theme-highlight-red: #ed2655; + --theme-highlight-pink: #b82ee5; + --theme-highlight-gray: #dde1e4; + + /* For accessibility purposes we want to enhance the focus styling. This + * should improve keyboard navigation usability. */ + --theme-focus-outline-color: #000000; + + /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ + --theme-graphs-green: #85d175; + --theme-graphs-blue: #83b7f6; + --theme-graphs-bluegrey: #0072ab; + --theme-graphs-purple: #b693eb; + --theme-graphs-yellow: #efc052; + --theme-graphs-orange: #d97e00; + --theme-graphs-red: #e57180; + --theme-graphs-grey: #cccccc; + --theme-graphs-full-red: #f00; + --theme-graphs-full-blue: #00f; + + /* Images */ + --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg); + --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg); + + /* Tooltips */ + --theme-tooltip-border: #d9e1e8; + --theme-tooltip-background: rgba(255, 255, 255, .9); + --theme-tooltip-shadow: rgba(155, 155, 155, 0.26); + + /* Command line */ + --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); + --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); +} + +:root.theme-dark { + --theme-body-background: #393f4c; + --theme-sidebar-background: #393f4c; + --theme-contrast-background: #ffb35b; + + --theme-tab-toolbar-background: #272b35; + --theme-toolbar-background: #272b35; + --theme-selection-background: #5675B9; + --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5); + --theme-selection-color: #f5f7fa; + --theme-splitter-color: #454d5d; + --theme-comment: #757873; + + --theme-body-color: #8fa1b2; + --theme-body-color-alt: #b6babf; + --theme-body-color-inactive: #8fa1b2; + --theme-content-color1: #a9bacb; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #5f7387; + + --theme-highlight-green: #00ff7f; + --theme-highlight-blue: #46afe3; + --theme-highlight-bluegrey: #5e88b0; + --theme-highlight-purple: #bcb8db; + --theme-highlight-lightorange: #d99b28; + --theme-highlight-orange: #d96629; + --theme-highlight-red: #eb5368; + --theme-highlight-pink: #df80ff; + --theme-highlight-gray: #e9f4fe; + + /* For accessibility purposes we want to enhance the focus styling. This + * should improve keyboard navigation usability. */ + --theme-focus-outline-color: #ced3d9; + + /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ + --theme-graphs-green: #70bf53; + --theme-graphs-blue: #46afe3; + --theme-graphs-bluegrey: #5e88b0; + --theme-graphs-purple: #df80ff; + --theme-graphs-yellow: #d99b28; + --theme-graphs-orange: #d96629; + --theme-graphs-red: #eb5368; + --theme-graphs-grey: #757873; + --theme-graphs-full-red: #f00; + --theme-graphs-full-blue: #00f; + + /* Images */ + --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg); + --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg); + + /* Tooltips */ + --theme-tooltip-border: #434850; + --theme-tooltip-background: rgba(19, 28, 38, .9); + --theme-tooltip-shadow: rgba(25, 25, 25, 0.76); + + /* Command line */ + --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); + --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); +} + +:root.theme-firebug { + --theme-body-background: #fcfcfc; + --theme-sidebar-background: #fcfcfc; + --theme-contrast-background: #e6b064; + + --theme-tab-toolbar-background: #d8eaf9; + --theme-toolbar-background: #f0f1f2; + --theme-selection-background: #3399ff; + --theme-selection-background-semitransparent: rgba(128,128,128,0.2); + --theme-selection-color: white; + --theme-splitter-color: #aabccf; + --theme-comment: green; + + --theme-body-color: #000000; + --theme-body-color-alt: #585959; + --theme-content-color1: #292e33; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #667380; + + --theme-highlight-green: #2cbb0f; + --theme-highlight-blue: #3455db; + --theme-highlight-bluegrey: #0072ab; + --theme-highlight-purple: #887ce6; + --theme-highlight-lightorange: #d97e00; + --theme-highlight-orange: #f13c00; + --theme-highlight-red: #e22f6f; + --theme-highlight-pink: #b82ee5; + --theme-highlight-gray: #dde1e4; + + /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ + --theme-graphs-green: #85d175; + --theme-graphs-blue: #83b7f6; + --theme-graphs-bluegrey: #0072ab; + --theme-graphs-purple: #b693eb; + --theme-graphs-yellow: #efc052; + --theme-graphs-orange: #d97e00; + --theme-graphs-red: #e57180; + --theme-graphs-grey: #cccccc; + --theme-graphs-full-red: #f00; + --theme-graphs-full-blue: #00f; + + /* Images */ + --theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg); + --theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg); + + /* Font size */ + --theme-toolbar-font-size: 12px; + + /* Header */ + --theme-header-background: #F0F0F0 linear-gradient(to top, + rgba(0, 0, 0, 0.1), + transparent) repeat-x; + + /* Command line */ + --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg); + --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus); +} + +:root { + --theme-focus-border-color-textbox: #0675d3; + --theme-textbox-box-shadow: rgba(97,181,255,.75); + + /* For accessibility purposes we want to enhance the focus styling. This + * should improve keyboard navigation usability. */ + --theme-focus-outline: 1px dotted var(--theme-focus-outline-color); + --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow); +} diff --git a/devtools/client/themes/webaudioeditor.css b/devtools/client/themes/webaudioeditor.css new file mode 100644 index 000000000..3ba9dad88 --- /dev/null +++ b/devtools/client/themes/webaudioeditor.css @@ -0,0 +1,195 @@ +/* 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/. */ + +/* Reload and waiting notices */ +.notice-container { + margin-top: -50vh; + color: var(--theme-body-color-alt); +} + +#reload-notice { + font-size: 120%; +} + +#waiting-notice { + font-size: 110%; +} + +/* Context Graph */ +svg { + overflow: hidden; + -moz-box-flex: 1; + --arrow-color: var(--theme-splitter-color); + --text-color: var(--theme-body-color-alt); +} + +.theme-dark svg { + --arrow-color: var(--theme-body-color-alt); +} + +/* Edges in graph */ +.edgePath path { + stroke-width: 1px; + stroke: var(--arrow-color); +} +svg #arrowhead { + /* !important is needed to override inline style */ + fill: var(--arrow-color) !important; +} + +/* AudioParam connection edges */ +g.edgePath.param-connection path { + stroke-dasharray: 5,5; + stroke: var(--arrow-colo); +} + +/* Labels in AudioParam connection should have background that match + * the main background so there's whitespace around the label, on top of the + * dotted lines. */ +g.edgeLabel rect { + fill: var(--theme-body-background); +} +g.edgeLabel tspan { + fill: var(--text-color); +} + +/* Audio Nodes */ +.nodes rect { + stroke-width: 1px; + cursor: pointer; + stroke: var(--theme-splitter-color); + fill: var(--theme-toolbar-background); +} + +/** + * Bypassed Nodes + */ + +.theme-light .nodes g.bypassed rect { + fill: url(chrome://devtools/skin/images/filters.svg#bypass-light); +} + +.theme-dark .nodes g.bypassed rect { + fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark); +} + +.nodes g.bypassed.selected rect { + stroke: var(--theme-selection-background); +} + +.nodes g.bypassed text { + opacity: 0.6; +} + +/** + * Selected Nodes + */ +.nodes g.selected rect { + fill: var(--theme-selection-background); +} + +/* Don't style bypassed nodes text differently because it'd be illegible in light-theme */ +g.selected:not(.bypassed) text { + fill: var(--theme-selection-color); +} + + +/* Text in nodes and edges */ +text { + cursor: default; /* override the "text" cursor */ + fill: var(--text-color); + font-size: 1.25em; + /* Make sure text stays inside its container in RTL locales */ + direction: ltr; +} + +.nodes text { + cursor: pointer; +} + +/** + * Inspector Styles + */ + +/* hide the variables view scope title as its redundant, + * because there's only one scope displayed. */ +.variables-view-scope > .title { + display: none; +} + +#web-audio-inspector-title { + margin: 6px; +} + +.web-audio-inspector .error { + background-image: url(images/alerticon-warning.png); + background-size: 13px 12px; + -moz-appearance: none; + opacity: 0; + transition: opacity .5s ease-out 0s; +} + +#inspector-pane-toggle { + background: none; + box-shadow: none; + border: none; + list-style-image: var(--theme-pane-collapse-image); +} + +#inspector-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#inspector-pane-toggle.pane-collapsed { + list-style-image: var(--theme-pane-expand-image); +} + +/** + * Automation Styles + */ + +#automation-param-toolbar .automation-param-button[selected] { + color: var(--theme-selection-color); + background-color: var(--theme-selection-background); +} + +#automation-graph { + overflow: hidden; + -moz-box-flex: 1; +} + +@media (min-resolution: 1.1dppx) { + .web-audio-inspector .error { + background-image: url(images/alerticon-warning@2x.png); + } +} + +/** + * Inspector toolbar + */ + +#audio-node-toolbar .bypass { + list-style-image: url(images/power.svg); +} + +/** + * Responsive Styles + * `.devtools-responsive-container` takes care of most of + * the changing of host types. + */ +@media (max-width: 700px) { + /** + * Override the inspector toggle so it's always open + * in the portrait view, with the toggle button hidden. + */ + #inspector-pane-toggle { + display: none; + } + + #web-audio-inspector { + margin-left: 0px !important; + margin-right: 0px !important; + } +} diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css new file mode 100644 index 000000000..c0c0177e1 --- /dev/null +++ b/devtools/client/themes/webconsole.css @@ -0,0 +1,793 @@ +/* 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/. */ + +/* Webconsole specific theme variables */ +.theme-light, +.theme-firebug { + --error-color: #FF0000; + --error-background-color: #FFEBEB; + --warning-background-color: #FFFFC8; +} + +/* General output styles */ + +a { + -moz-user-focus: normal; + -moz-user-input: enabled; + cursor: pointer; + text-decoration: underline; +} + +/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited + * assertion when loading HTML page with links in XUL iframe */ +*:visited { } + +.message { + display: flex; + padding: 0 7px; + width: 100%; + box-sizing: border-box; +} + +.message > .prefix, +.message > .timestamp { + flex: none; + color: var(--theme-comment); + margin: 3px 6px 0 0; +} + +.message > .indent { + flex: none; +} + +.message > .icon { + flex: none; + margin: 3px 6px 0 0; + padding: 0 4px; + height: 1em; + align-self: flex-start; +} + +.theme-firebug .message > .icon { + margin: 0; + margin-inline-end: 6px; +} + +.theme-firebug .message[severity="error"], +.theme-light .message.error, +.theme-firebug .message.error { + color: var(--error-color); + background-color: var(--error-background-color); +} + +.theme-firebug .message[severity="warn"], +.theme-light .message.warn, +.theme-firebug .message.warn { + background-color: var(--warning-background-color); +} + +.message > .icon::before { + content: ""; + background-image: url(chrome://devtools/skin/images/webconsole.svg); + background-position: 12px 12px; + background-repeat: no-repeat; + background-size: 72px 60px; + width: 12px; + height: 12px; + display: inline-block; +} + +.theme-light .message > .icon::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} + +.message > .message-body-wrapper { + flex: auto; + min-width: 0px; + margin: 3px; +} + +.message-body-wrapper .table-widget-body { + overflow: visible; +} + +/* The red bubble that shows the number of times a message is repeated */ +.message-repeats { + -moz-user-select: none; + flex: none; + margin: 2px 6px; + padding: 0 6px; + height: 1.25em; + color: white; + background-color: red; + border-radius: 40px; + font: message-box; + font-size: 0.9em; + font-weight: 600; +} + +.message-repeats[value="1"] { + display: none; +} + +.message-location { + max-width: 40%; +} + +.stack-trace { + /* The markup contains extra whitespace to improve formatting of clipboard text. + Make sure this whitespace doesn't affect the HTML rendering */ + white-space: normal; +} + +.stack-trace .frame-link-source, +.message-location .frame-link-source { + /* Makes the file name truncated (and ellipsis shown) on the left side */ + direction: rtl; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.stack-trace .frame-link-source-inner, +.message-location .frame-link-source-inner { + /* Enforce LTR direction for the file name - fixes bug 1290056 */ + direction: ltr; + unicode-bidi: embed; +} + +.stack-trace .frame-link-function-display-name { + max-width: 50%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.message-flex-body { + display: flex; +} + +.message-body > * { + white-space: pre-wrap; + word-wrap: break-word; +} + +.message-flex-body > .message-body { + display: block; + flex: auto; +} + +#output-wrapper { + direction: ltr; + overflow: auto; + -moz-user-select: text; + position: relative; +} + +/* The width on #output-container is set to a hardcoded px in webconsole.js + since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */ + +#output-container.hideTimestamps > .message { + padding-inline-start: 0; + margin-inline-start: 7px; + width: calc(100% - 7px); +} + +#output-container.hideTimestamps > .message > .timestamp { + display: none; +} + +#output-container.hideTimestamps > .message > .indent { + background-color: var(--theme-body-background); +} + +.filtered-by-type, +.filtered-by-string { + display: none; +} + +.hidden-message { + display: block; + visibility: hidden; + height: 0; + overflow: hidden; +} + +/* WebConsole colored drops */ + +.webconsole-filter-button { + -moz-user-focus: normal; +} + +.webconsole-filter-button > .toolbarbutton-menubutton-button:before { + content: ""; + display: inline-block; + height: 8px; + width: 8px; + border-radius: 50%; + margin-inline-start: 5px; + border-width: 1px; + border-style: solid; +} + +/* Network styles */ +.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#444444, #000000); + border-color: #777; +} + +.message:hover { + background-color: var(--theme-selection-background-semitransparent) !important; +} + +.theme-light .message[severity=error], +.theme-light .message.error { + background-color: rgba(255, 150, 150, 0.3); +} + +.theme-dark .message[severity=error], +.theme-dark .message.error { + background-color: rgba(235, 83, 104, 0.17); +} + +.console-string { + color: var(--theme-highlight-lightorange); +} + +.theme-selected .console-string, +.theme-selected .cm-number, +.theme-selected .cm-variable, +.theme-selected .kind-ArrayLike { + color: #f5f7fa !important; /* Selection Text Color */ +} + +.message[category=network] > .indent { + border-inline-end: solid var(--theme-body-color-alt) 6px; +} + +.message[category=network][severity=error] > .icon::before, +.message.network.error > .icon::before { + background-position: -12px 0; +} + +.message[category=network] > .message-body, +.message.network > .message-body { + display: flex; + flex-wrap: wrap; +} + +.message[category=network] .method, +.message.network .method { + flex: none; +} + +.message[category=network]:not(.navigation-marker) .url, +.message.network:not(.navigation-marker) .url { + flex: 1 1 auto; + /* Make sure the URL is very small initially, let flex change width as needed. */ + width: 100px; + min-width: 5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.message[category=network] .status, +.message.network .status { + flex: none; + margin-inline-start: 6px; +} + +.message[category=network].mixed-content .url, +.message.network.mixed-content .url { + color: var(--theme-highlight-red); +} + +.message .learn-more-link { + color: var(--theme-highlight-blue); + margin: 0 6px; +} + +.message[category=network] .xhr, +.message.network .xhr { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); + border-radius: 3px; + font-weight: bold; + font-size: 10px; + padding: 2px; + line-height: 10px; + margin-inline-start: 3px; + margin-inline-end: 1ex; +} + +/* CSS styles */ +.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#2DC3F3, #00B6F0); + border-color: #1BA2CC; +} + +.message[category=cssparser] > .indent, +.message.cssparser > .indent { + border-inline-end: solid #00b6f0 6px; +} + +.message[category=cssparser][severity=error] > .icon::before, +.message.cssparser.error > .icon::before { + background-position: -12px -12px; +} + +.message[category=cssparser][severity=warn] > .icon::before, +.message.cssparser.warn > .icon::before { + background-position: -24px -12px; +} + +/* JS styles */ +.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#FCB142, #FB9500); + border-color: #E98A00; +} + +.message[category=exception] > .indent, +.message.exception > .indent { + border-inline-end: solid #fb9500 6px; +} + +.message[category=exception][severity=error] > .icon::before, +.message.exception.error > .icon::before { + background-position: -12px -24px; +} + +.message[category=exception][severity=warn] > .icon::before, +.message.exception.warn > .icon::before { + background-position: -24px -24px; +} + +/* Web Developer styles */ +.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#B9B9B9, #AAAAAA); + border-color: #929292; +} + +.message[category=console] > .indent, +.message.console-api > .indent { + border-inline-end: solid #cbcbcb 6px; +} + +.message[category=console][severity=error] > .icon::before, +.message[category=output][severity=error] > .icon::before, +.message[category=server][severity=error] > .icon::before { + background-position: -12px -36px; +} + +.message[category=console][severity=warn] > .icon::before, +.message[category=server][severity=warn] > .icon::before { + background-position: -24px -36px; +} + +.message[category=console][severity=info] > .icon::before, +.message[category=server][severity=info] > .icon::before { + background-position: -36px -36px; +} + +/* Server Logging Styles */ + +.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99)); + border-color: rgb(76, 143, 76); +} + +.message[category=server] > .indent, +.message.server > .indent { + border-inline-end: solid #90B090 6px; +} + +/* Input and output styles */ +.message[category=input] > .indent, +.message[category=output] > .indent, +.message.command > .indent, +.message.result > .indent { + border-inline-end: solid #808080 6px; +} + +.message[category=input] > .icon::before, +.message.command > .icon::before { + background-position: -48px -36px; +} + +.message[category=output] > .icon::before, +.message.result > .icon::before { + background-position: -60px -36px; +} + +/* JSTerm Styles */ +.jsterm-input-container { + background-color: var(--theme-tab-toolbar-background); + border-top: 1px solid var(--theme-splitter-color); +} + +.theme-light .jsterm-input-container { + /* For light theme use a white background for the input - it looks better + than off-white */ + background-color: #fff; + border-top-color: #e0e0e0; +} + +.theme-firebug .jsterm-input-container { + border-top: 1px solid #ccc; +} + +.jsterm-input-node, +.jsterm-complete-node { + border: none; + padding: 0; + padding-inline-start: 20px; + margin: 0; + -moz-appearance: none; + background-color: transparent; +} + +.jsterm-input-node[focused="true"] { + background-image: var(--theme-command-line-image-focus); + box-shadow: none; +} + +.jsterm-complete-node { + color: var(--theme-comment); +} + +.jsterm-input-node { + /* Always allow scrolling on input - it auto expands in js by setting height, + but don't want it to get bigger than the window. 24px = toolbar height. */ + max-height: calc(90vh - 24px); + background-image: var(--theme-command-line-image); + background-repeat: no-repeat; + background-size: 16px 16px; + background-position: 4px 50%; + color: var(--theme-content-color1); +} + +:-moz-any(.jsterm-input-node, + .jsterm-complete-node) > .textbox-input-box > .textbox-textarea { + overflow-x: hidden; + /* Set padding for console input on textbox to make sure it is inlcuded in + scrollHeight that is used when resizing JSTerminal's input. Note: textbox + default style has important already */ + padding: 4px 0 !important; +} + +.inlined-variables-view .message-body { + display: flex; + flex-direction: column; + resize: vertical; + overflow: auto; + min-height: 200px; +} +.inlined-variables-view iframe { + display: block; + flex: 1; + margin-top: 5px; + margin-bottom: 15px; + margin-inline-end: 15px; + border: 1px solid var(--theme-splitter-color); + border-radius: 3px; +} + +#webconsole-sidebar > tabs { + height: 0; + border: none; +} + +/* Firebug theme has the tabs visible. */ +.theme-firebug #webconsole-sidebar > tabs { + height: 28px; +} + +.devtools-side-splitter ~ #webconsole-sidebar[hidden] { + display: none; +} + +/* Security styles */ + +.message[category=security] > .indent, +.message.security > .indent { + border-inline-end: solid red 6px; +} + +.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#FF3030, #FF7D7D); + border-color: #D12C2C; +} + +.message[category=security][severity=error] > .icon::before, +.message.security.error > .icon::before { + background-position: -12px -48px; +} + +.message[category=security][severity=warn] > .icon::before, +.message.security.warn > .icon::before { + background-position: -24px -48px; +} + +.navigation-marker { + color: #aaa; + background: linear-gradient(#aaa, #aaa) no-repeat left 50%; + background-size: 100% 2px; + margin-top: 6px; + margin-bottom: 6px; + font-size: 0.9em; +} + +.navigation-marker .url { + padding-inline-end: 9px; + text-decoration: none; + background: var(--theme-body-background); +} + +.theme-light .navigation-marker .url { + background: #fff; +} + +.stacktrace { + display: none; + padding: 5px 10px; + margin: 5px 0 0 0; + overflow-y: auto; + border: 1px solid var(--theme-splitter-color); + border-radius: 3px; +} + +.consoletable { + margin: 5px 0 0 0; +} + +/* Force cells to only show one row of contents. Getting normal ellipses + behavior has proven impossible so far, so this is better than letting + rows get out of vertical alignment when one cell has a lot of content. */ +.consoletable .table-widget-cell > span { + overflow: hidden; + display: flex; + height: 1.25em; + line-height: 1.25em; +} + +.theme-light .message[severity=error] .stacktrace, +.theme-light .message.error .stacktrace { + background-color: rgba(255, 255, 255, 0.5); +} + +.theme-dark .message[severity=error] .stacktrace, +.theme-dark .message.error .stacktrace { + background-color: rgba(0, 0, 0, 0.5); +} + +.message[open] .stacktrace, +.message.open .stacktrace { + display: block; +} + +.message .theme-twisty { + display: inline-block; + vertical-align: middle; + margin: 3px 0 0 0; + flex-shrink: 0; +} + +/*Do not mirror the twisty because container force to ltr */ +.message .theme-twisty:dir(rtl), +.message .theme-twisty:-moz-locale-dir(rtl) { + transform: none; +} + +.cm-s-mozilla a[class] { + font-style: italic; + text-decoration: none; +} + +.cm-s-mozilla a[class]:hover, +.cm-s-mozilla a[class]:focus { + text-decoration: underline; +} + +a.learn-more-link.webconsole-learn-more-link { + font-style: normal; +} + +/* Open DOMNode in inspector button */ +.open-inspector { + background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.elementNode:hover .open-inspector, +.open-inspector:hover { + filter: url(images/filters.svg#checked-icon-state); +} + +.elementNode:hover .open-inspector:active, +.open-inspector:active { + filter: url(images/filters.svg#checked-icon-state) brightness(0.9); +} + +@media (max-width: 500px) { + .message > .timestamp { + display: none; + } + .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text { + display: none; + } + .hud-console-filter-toolbar .webconsole-filter-button { + min-width: 40px; + } + .hud-console-filter-toolbar .webconsole-clear-console-button { + min-width: 25px; + } + .webconsole-filter-button > .toolbarbutton-menubutton-button:before { + width: 12px; + height: 12px; + margin-inline-start: 1px; + } + .toolbarbutton-menubutton-dropmarker { + margin: 0px; + } +} + +@media (max-width: 300px) { + .hud-console-filter-toolbar { + -moz-box-orient: vertical; + } + .toolbarbutton-text { + display: -moz-box; + } + .devtools-toolbarbutton { + margin-top: 3px; + } + .hud-console-filter-toolbar .hud-filter-box, + .hud-console-filter-toolbar .devtools-toolbarbutton { + margin-top: 5px; + } +} + +/* + * This hardcoded width likely due to a toolkit Windows specific bug. + * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 + */ + +:root[platform="win"] .hud-filter-box { + width: 200px; +} + +/* Firebug theme support for console.table() */ + +.theme-firebug .consoletable .theme-body { + width: 100%; + border-top: 1px solid #D7D7D7; + border-bottom: 2px solid #D7D7D7; + border-left: 1px solid #D7D7D7; + border-right: 1px solid #D7D7D7; +} + + +/* NEW CONSOLE STYLES */ + +#output-wrapper > div { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +#output-container { + height: 100%; +} + +.webconsole-output-wrapper { + display: flex; + flex-direction: column; + height: 100%; + -moz-user-focus: normal; +} + +.webconsole-filterbar-wrapper { + flex-grow: 0; +} + +.webconsole-output { + flex: 1; + overflow: auto; +} + +.webconsole-filterbar-primary { + display: flex; +} + +.devtools-toolbar.webconsole-filterbar-secondary { + height: initial; +} + +.webconsole-filterbar-primary .devtools-plaininput { + flex: 1 1 100%; +} + +.message.startGroup .message-body, +.message.startGroupCollapsed .message-body { + color: var(--theme-body-color); + font-weight: bold; +} + +.webconsole-output-wrapper .message > .icon { + margin: 3px 0 0 0; + padding: 0 0 0 6px; +} + +.message.error > .icon::before { + background-position: -12px -36px; +} + +.message.warn > .icon::before { + background-position: -24px -36px; +} + +.message.info > .icon::before { + background-position: -36px -36px; +} + +.message.network .method { + margin-inline-end: 5px; +} + +.webconsole-output-wrapper .message .indent { + display: inline-block; + border-inline-end: solid 1px var(--theme-splitter-color); +} + +.message.startGroup .indent, +.message.startGroupCollapsed .indent { + border-inline-end-color: transparent; + margin-inline-end: 5px; +} + +.message.startGroup .icon, +.message.startGroupCollapsed .icon { + display: none; +} + +/* console.table() */ +.new-consoletable { + width: 100%; + border-collapse: collapse; + --consoletable-border: 1px solid var(--table-splitter-color); +} + +.new-consoletable thead, +.new-consoletable tbody { + background-color: var(--theme-body-background); +} + +.new-consoletable th { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); + margin: 0; + padding: 5px 0 0; + font-weight: inherit; + border-inline-end: var(--consoletable-border); + border-bottom: var(--consoletable-border); +} + +.new-consoletable tr:nth-of-type(even) { + background-color: var(--table-zebra-background); +} + +.new-consoletable td { + padding: 3px 4px; + min-width: 100px; + -moz-user-focus: normal; + color: var(--theme-body-color); + border-inline-end: var(--consoletable-border); + height: 1.25em; + line-height: 1.25em; +} diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css new file mode 100644 index 000000000..a8c1dc734 --- /dev/null +++ b/devtools/client/themes/widgets.css @@ -0,0 +1,1621 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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 { + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); + --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg); + --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg); + --delete-icon: url(chrome://devtools/skin/images/vview-delete.png); + --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png); +} + +.theme-light { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); + --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg); + --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg); + --delete-icon: url(chrome://devtools/skin/images/vview-delete.png); + --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png); +} + +.theme-firebug { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); + --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg); + --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg); + --delete-icon: url(chrome://devtools/skin/images/firebug/close.svg); + --delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.svg); +} + + +/* Generic pane helpers */ + +.generic-toggled-pane { + margin-inline-start: 0 !important; + /* Unfortunately, transitions don't work properly with locale-aware properties, + so both the left and right margins are set via js, while the start margin + is always overridden here. */ +} + +.generic-toggled-pane[animated] { + transition: margin 0.25s ease-in-out; +} + +/* Responsive container */ + +.devtools-responsive-container { + -moz-box-orient: horizontal; +} + +.devtools-main-content { + min-width: 50px; +} + +.devtools-main-content, +.devtools-sidebar-tabs { + /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */ + position: relative; +} + +@media (min-width: 701px) { + .devtools-responsive-container .generic-toggled-pane { + /* To hide generic-toggled-pane, negative margins are applied dynamically. + * In the default horizontal layout, the pane is on the side and should be + * hidden using negative margin-inline-end only. + */ + margin-top: 0 !important; + margin-bottom: 0 !important; + } +} + +@media (max-width: 700px) { + .devtools-responsive-container { + -moz-box-orient: vertical; + } + + .devtools-responsive-container > .devtools-side-splitter { + /* This is a normally vertical splitter, but we have turned it horizontal + due to the smaller resolution */ + min-height: calc(var(--devtools-splitter-top-width) + + var(--devtools-splitter-bottom-width) + 1px); + border-top-width: var(--devtools-splitter-top-width); + border-bottom-width: var(--devtools-splitter-bottom-width); + margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); + margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); + + /* Reset the vertical splitter styles */ + min-width: 0; + border-inline-end-width: 0; + border-inline-start-width: 0; + margin-inline-end: 0; + margin-inline-start: 0; + + /* In some edge case the cursor is not changed to n-resize */ + cursor: n-resize; + } + + .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) { + /* When the panel is collapsed min/max height should not be applied because + collapsing relies on negative margins, which implies constant height. */ + min-height: 35vh; + max-height: 75vh; + } + + .devtools-responsive-container .generic-toggled-pane { + /* To hide generic-toggled-pane, negative margins are applied dynamically. + * If a vertical layout, the pane is on the bottom and should be hidden + * using negative bottom margin only. + */ + margin-inline-end: 0 !important; + } +} + +/* BreacrumbsWidget */ + +.breadcrumbs-widget-container { + margin-inline-end: 3px; + max-height: 24px; /* Set max-height for proper sizing on linux */ + height: 24px; /* Set height to prevent starting small waiting for content */ +} + +.scrollbutton-up, +.scrollbutton-down { + -moz-appearance: none; + background: transparent; + box-shadow: none; + border: none; + list-style-image: none; + margin: 0; + padding: 0; +} + +.scrollbutton-up > .toolbarbutton-icon, +.scrollbutton-down > .toolbarbutton-icon { + -moz-appearance: none; + width: 7px; + height: 16px; + background-size: 14px 16px; + background-position: 0 center; + background-repeat: no-repeat; + background-image: url("images/breadcrumbs-scrollbutton.png"); + list-style-image: none; + margin: 0 8px; + padding: 0; +} + +@media (min-resolution: 1.1dppx) { + .scrollbutton-up > .toolbarbutton-icon, + .scrollbutton-down > .toolbarbutton-icon { + background-image: url("images/breadcrumbs-scrollbutton@2x.png"); + } +} + +.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, +.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { + background-position: -7px center; +} + +.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:-moz-locale-dir(ltr), +.scrollbutton-down:-moz-locale-dir(rtl) { + border-right: solid 1px rgba(255, 255, 255, .1); + border-left: solid 1px transparent; + box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background); +} + +.scrollbutton-down:-moz-locale-dir(ltr), +.scrollbutton-up:-moz-locale-dir(rtl) { + border-right: solid 1px transparent; + border-left: solid 1px rgba(255, 255, 255, .1); + box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); +} + +.scrollbutton-up[disabled], +.scrollbutton-down[disabled] { + box-shadow: none; + border-color: transparent; +} + +.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), +.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +.breadcrumbs-widget-item { + background-color: transparent; + -moz-appearance: none; + min-height: 24px; + min-width: 65px; + margin: 0; + padding: 0 8px 0 20px; + border: none; + outline: none; + color: hsl(210,30%,85%); + position: relative; +} + +.breadcrumbs-widget-item > .button-box { + border: none; + padding-top: 0; + padding-bottom: 0; +} + +:root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box { + border-width: 0; +} + +.breadcrumbs-widget-item::before { + content: ""; + position: absolute; + top: 1px; + offset-inline-start: 0; + width: 12px; + height: 22px; + background-repeat: no-repeat; + /* Given the 1/2 aspect ratio of the separator pseudo-element and the 45deg angle of + the arrow shape, we need the arrow edges to be at this position from the start of + the gradient line. */ + --position: 66.5%; + /* The color of the thin line in the arrow-shaped separator between 2 unselected + crumbs. There is no theme variable for this, this used to be an image. */ + --line-color: #ACACAC; + --background-color: var(--theme-body-background); +} + +#debugger-toolbar .breadcrumbs-widget-item::before { + --background-color: var(--theme-toolbar-background); +} + +.theme-dark .breadcrumbs-widget-item::before { + --line-color: #6E6E6E; +} + +.breadcrumbs-widget-item:first-child::before { + /* The first crumb does not need any separator before itself */ + content: unset; +} + +.breadcrumbs-widget-item:dir(rtl)::before { + transform: scaleX(-1); +} + +.breadcrumbs-widget-item:not([checked])::before { + background-color: var(--background-color); + background-image: + linear-gradient(45deg, + var(--background-color) 30%, + transparent), + linear-gradient(-45deg, + transparent, + var(--background-color) 70%, + var(--background-color)), + linear-gradient(45deg, + transparent var(--position), + var(--line-color) var(--position), + var(--line-color) calc(var(--position) + 1px), + transparent 0), + linear-gradient(-45deg, + transparent calc(100% - var(--position)), + var(--line-color) calc(100% - var(--position)), + var(--line-color) calc(calc(100% - var(--position)) + 1px), + transparent 0); + background-size: + 100% 50%, + 100% 50%, + 100%, + 100%; + background-position: + left bottom, + left top, + left top, + left top; +} + +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item::before { + background-color: var(--theme-selection-background); + background-image: + linear-gradient(45deg, + transparent var(--position), + var(--background-color) 0), + linear-gradient(-45deg, + var(--background-color) calc(100% - var(--position)), + transparent 0); + background-size: unset; +} + +.breadcrumbs-widget-item[checked]::before { + background-image: + linear-gradient(45deg, + transparent var(--position), + var(--theme-selection-background) 0), + linear-gradient(-45deg, + var(--theme-selection-background) calc(100% - var(--position)), + var(--background-color) 0); +} + +.breadcrumbs-widget-item[checked] { + background-color: var(--theme-selection-background); +} + +.breadcrumbs-widget-item:first-child { + background-image: none; +} + +/* RTL support: move the images that were on the left to the right, + * and move images that were on the right to the left. + */ +.breadcrumbs-widget-item:dir(rtl) { + padding: 0 20px 0 8px; +} + +.breadcrumbs-widget-item:dir(rtl), +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:dir(rtl) { + background-position: center right; +} + +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, +.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-selection-color); +} + +.theme-dark .breadcrumbs-widget-item { + color: var(--theme-selection-color); +} + +.theme-light .breadcrumbs-widget-item { + color: var(--theme-body-color); +} + +.breadcrumbs-widget-item-id { + color: var(--theme-body-color-alt); +} + +.breadcrumbs-widget-item-classes { + color: var(--theme-content-color1); +} + +.breadcrumbs-widget-item-pseudo-classes { + color: var(--theme-highlight-lightorange); +} + +.theme-dark .breadcrumbs-widget-item:not([checked]):hover label { + color: white; +} + +.theme-light .breadcrumbs-widget-item:not([checked]):hover label { + color: black; +} + +/* Firebug theme support for breadcrumbs widget. */ + +.theme-firebug .breadcrumbs-widget-item { + margin-inline-start: 10px; + margin-inline-end: 1px; + background-image: none; + border: 1px solid transparent; + color: #141414; + border-radius: 2px; + min-width: 0; + min-height: 0; + padding: 0; + font-size: var(--theme-toolbar-font-size); +} + +.theme-firebug .breadcrumbs-widget-item:hover { + border-color: rgba(0, 0, 0, 0.2); + background: transparent linear-gradient( + rgba(255, 255, 255, 0.4), + rgba(255, 255, 255, 0.2)) no-repeat; + box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset, + 0 0 1px rgba(255, 255, 255, 0.6) inset, + 0 0 2px rgba(0, 0, 0, 0.05); +} + +.theme-firebug .breadcrumbs-widget-item > .button-box { + padding-left: 0; + padding-right: 0; +} + +.theme-firebug .breadcrumbs-widget-item:first-child { + margin: 0; +} + +.theme-firebug .breadcrumbs-widget-item:not(:first-child)::before { + content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg); + background: none; + position: relative; + left: -3px; + margin: 0 0 0 -5px; + padding: 0; + width: 5px; +} + +/* Breadcrumbs Separators (reset selection styles) */ +.theme-firebug .breadcrumbs-widget-item[checked], +.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, +.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, +.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, +.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { + background: none; + font-weight: bold; + color: inherit; +} + +/* The first rule is there only to make sure the default rule from +widgets.css is overwritten. */ +.theme-firebug .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { + background: none; +} + +.theme-firebug .breadcrumbs-widget-item .breadcrumbs-widget-item-tag { + padding-left: 4px; + padding-right: 4px; +} + +/* Breadcrumbs Scrolling Buttons */ + +.theme-firebug .breadcrumbs-widget-container .scrollbutton-up, +.theme-firebug .breadcrumbs-widget-container .scrollbutton-down { + padding: 0; + box-shadow: none; +} + +.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:hover, +.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:hover { + border: 1px transparent solid !important; + box-shadow: none !important; +} + +.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:active, +.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active { + background: none !important; +} + +.theme-firebug .breadcrumbs-widget-container .scrollbutton-up > .toolbarbutton-icon { + background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif); +} + +.theme-firebug .breadcrumbs-widget-container .scrollbutton-down > .toolbarbutton-icon { + background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif); +} + +.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, +.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { + background-position: 0 center; +} + +/* SimpleListWidget */ + +.simple-list-widget-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.simple-list-widget-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-dark .simple-list-widget-item:not(.selected):hover { + background-color: rgba(255,255,255,.05); +} + +.theme-light .simple-list-widget-item:not(.selected):hover { + background-color: rgba(0,0,0,.05); +} + +.simple-list-widget-empty-text, +.simple-list-widget-perma-text { + padding: 4px 8px; +} + +.simple-list-widget-empty-text, +.simple-list-widget-perma-text { + color: var(--theme-body-color-alt); +} + +/* FastListWidget */ + +.fast-list-widget-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.fast-list-widget-empty-text { + padding: 4px 8px; +} + +.fast-list-widget-empty-text { + color: var(--theme-body-color-alt); +} + +/* SideMenuWidget */ + +.side-menu-widget-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +/* SideMenuWidget container */ + +.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { + /* To compensate for the arrow image's dark margin. */ + margin-inline-end: -1px; +} + +/* SideMenuWidget groups */ + +.side-menu-widget-group-title { + padding: 4px; + font-weight: 600; + border-bottom: 1px solid rgba(128,128,128,0.15); +} + +.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents { + padding-inline-start: 20px; +} + +/* SideMenuWidget items */ + +.side-menu-widget-item { + border-bottom: 1px solid rgba(128,128,128,0.15); + background-clip: padding-box; +} + +.side-menu-widget-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.side-menu-widget-item-arrow { + margin-inline-start: -7px; + width: 7px; /* The image's width is 7 pixels */ +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow { + background-image: var(--sidemenu-selected-arrow); + background-size: auto; + background-repeat: no-repeat; + background-position: center right; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-image: var(--sidemenu-selected-arrow-rtl); + background-position: center left; +} + +/* SideMenuWidget items contents */ + +.side-menu-widget-item-contents { + padding: 4px; + /* To avoid having content overlapping the arrow image. */ + padding-inline-end: 8px; +} + +.side-menu-widget-item-other { + /* To avoid having content overlapping the arrow image. */ + padding-inline-end: 8px; + /* To compensate for the .side-menu-widget-item-contents padding. */ + margin-inline-start: -4px; + margin-inline-end: -8px; +} + +.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other { + /* To compensate for the .side-menu-widget-item-contents padding. */ + margin-inline-start: -20px; +} + +.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) { + background-color: var(--theme-sidebar-background); + box-shadow: inset 2px 0 0 var(--theme-selection-background); + color: var(--theme-body-color); +} + +.side-menu-widget-item.selected .side-menu-widget-item-other.selected { + background-color: var(--theme-selection-background); +} + +.side-menu-widget-item-other:first-of-type { + margin-top: 4px; +} + +.side-menu-widget-item-other:last-of-type { + margin-bottom: -4px; +} + +/* SideMenuWidget checkboxes */ + +.side-menu-widget-group-checkbox { + margin: 0; + margin-inline-end: 4px; +} + +.side-menu-widget-item-checkbox { + margin: 0; + margin-inline-start: 4px; +} + +/* SideMenuWidget misc */ + +.side-menu-widget-empty-text { + padding: 4px 8px; + background-color: var(--theme-sidebar-background); +} + +/* VariablesView */ + +.variables-view-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.variables-view-empty-notice { + padding: 2px; +} + +.variables-view-empty-notice { + color: var(--theme-body-color-alt); +} + +.variables-view-scope:focus > .title, +.variable-or-property:focus > .title { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.variables-view-scope > .title { + border-top-width: 1px; + border-top-style: solid; + margin-top: -1px; +} + +/* Custom scope stylings */ + +.variables-view-watch-expressions .title > .name { + max-width: 14em; +} + +/* Generic variables traits */ + +.variables-view-variable:not(:last-child) { + border-bottom: 1px solid rgba(128, 128, 128, .15); +} + +.theme-firebug .variables-view-variable { + border-bottom: 1px solid transparent; +} + +.variables-view-variable > .title > .name { + font-weight: 600; +} + +/* Generic variables *and* properties traits */ + +.variable-or-property:focus > .title > label { + color: inherit !important; +} + +.variables-view-container .theme-twisty { + margin: 2px; +} + +.variable-or-property > .title > .theme-twisty { + margin-inline-start: 5px; +} + +.variable-or-property:not([untitled]) > .variables-view-element-details { + margin-inline-start: 7px; +} + +/* Traits applied when variables or properties are changed or overridden */ + +.variable-or-property:not([overridden]) { + transition: background 1s ease-in-out; +} + +.variable-or-property:not([overridden])[changed] { + transition-duration: .4s; +} + +.variable-or-property[overridden] { + background: rgba(128,128,128,0.05); +} + +.variable-or-property[overridden] .title > label { + /* Cross out the title for this variable and all child properties. */ + font-style: italic; + text-decoration: line-through; + border-bottom: none !important; + color: rgba(128,128,128,0.9); + opacity: 0.7; +} + +/* Traits applied when variables or properties are editable */ + +.variable-or-property[editable] > .title > .value { + cursor: text; +} + +.variable-or-property[overridden] .title > .value { + /* Disallow editing this variable and all child properties. */ + pointer-events: none; +} + +/* Custom configurable/enumerable/writable or frozen/sealed/extensible + * variables and properties */ + +.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { + opacity: 0.6; +} + +.variable-or-property-non-writable-icon { + background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat; + background-size: cover; + width: 16px; + height: 16px; +} + +@media (min-resolution: 1.1dppx) { + .variable-or-property-non-writable-icon { + background-image: url("chrome://devtools/skin/images/vview-lock@2x.png"); + } +} + +.variable-or-property-frozen-label, +.variable-or-property-sealed-label, +.variable-or-property-non-extensible-label { + height: 16px; + padding-inline-end: 4px; +} + +.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, +.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, +.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { + color: #666; +} + +/* Aligned values */ + +.variables-view-container[aligned-values] .title > .separator { + -moz-box-flex: 1; +} + +.variables-view-container[aligned-values] .title > .value { + -moz-box-flex: 0; + width: 70vw; +} + +.variables-view-container[aligned-values] .title > .element-value-input { + width: calc(70vw - 10px); +} + +/* Actions first */ + +.variables-view-open-inspector { + -moz-box-ordinal-group: 1; +} + +.variables-view-edit, +.variables-view-add-property { + -moz-box-ordinal-group: 2; +} + +.variable-or-property-frozen-label, +.variable-or-property-sealed-label, +.variable-or-property-non-extensible-label, +.variable-or-property-non-writable-icon { + -moz-box-ordinal-group: 3; +} + +.variables-view-delete { + -moz-box-ordinal-group: 4; +} + +.variables-view-container[actions-first] .variables-view-delete, +.variables-view-container[actions-first] .variables-view-add-property, +.variables-view-container[actions-first] .variables-view-open-inspector { + -moz-box-ordinal-group: 0; +} + +.variables-view-container[actions-first] [invisible] { + visibility: hidden; +} + +/* Variables and properties tooltips */ + +.variable-or-property > tooltip > label { + margin: 0 2px 0 2px; +} + +.variable-or-property[non-enumerable] > tooltip > label.enumerable, +.variable-or-property[non-configurable] > tooltip > label.configurable, +.variable-or-property[non-writable] > tooltip > label.writable, +.variable-or-property[non-extensible] > tooltip > label.extensible { + color: #800; + text-decoration: line-through; +} + +.variable-or-property[overridden] > tooltip > label.overridden { + padding-inline-start: 4px; + border-inline-start: 1px dotted #000; +} + +.variable-or-property[safe-getter] > tooltip > label.WebIDL { + padding-inline-start: 4px; + border-inline-start: 1px dotted #000; + color: #080; +} + +/* Variables and properties editing */ +.variables-view-delete, +.variables-view-edit, +.variables-view-open-inspector { + width: 16px; + height: 16px; + background-size: cover; + cursor: pointer; +} + +.variables-view-delete:hover, +.variables-view-edit:hover, +.variables-view-open-inspector:hover { + filter: url(images/filters.svg#checked-icon-state); +} + +.variables-view-delete:active, +.variables-view-edit:active, +.variables-view-open-inspector:active { + filter: url(images/filters.svg#checked-icon-state) brightness(0.9); +} + +.variable-or-property:focus > .title > .variables-view-delete, +.variable-or-property:focus > .title > .variables-view-edit, +.variable-or-property:focus > .title > .variables-view-open-inspector { + filter: none; +} + +.variables-view-delete { + background-image: var(--delete-icon); +} + +@media (min-resolution: 1.1dppx) { + .variables-view-delete { + background-image: var(--delete-icon-2x); + } +} + +.variables-view-edit { + background-image: url("chrome://devtools/skin/images/vview-edit.png"); +} + +@media (min-resolution: 1.1dppx) { + .variables-view-edit { + background-image: url("chrome://devtools/skin/images/vview-edit@2x.png"); + } +} + +.variables-view-open-inspector { + background-image: url("chrome://devtools/skin/images/vview-open-inspector.png"); +} + +@media (min-resolution: 1.1dppx) { + .variables-view-open-inspector { + background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png"); + } +} + +/* Variables and properties input boxes */ + +.variable-or-property > .title > .separator + .element-value-input { + margin-inline-start: -2px !important; + margin-inline-end: 2px !important; +} + +.variable-or-property > .title > .separator[hidden=true] + .element-value-input { + margin-inline-start: 4px !important; + margin-inline-end: 2px !important; +} + +.element-name-input { + margin-inline-start: -2px !important; + margin-inline-end: 2px !important; + font-weight: 600; +} + +.element-value-input, +.element-name-input { + border: 1px solid rgba(128, 128, 128, .5) !important; + border-radius: 0; + color: inherit; +} + +/* Variables and properties searching */ + +.variable-or-property[unmatched] { + border: none; + margin: 0; +} + +/* Canvas graphs */ + +.graph-widget-container { + position: relative; +} + +.graph-widget-canvas { + width: 100%; + height: 100%; +} + +.graph-widget-canvas[input=hovering-background] { + cursor: text; +} + +.graph-widget-canvas[input=hovering-region] { + cursor: pointer; +} + +.graph-widget-canvas[input=hovering-selection-start-boundary], +.graph-widget-canvas[input=hovering-selection-end-boundary], +.graph-widget-canvas[input=adjusting-selection-boundary] { + cursor: col-resize; +} + +.graph-widget-canvas[input=adjusting-view-area] { + cursor: grabbing; +} + +.graph-widget-canvas[input=hovering-selection-contents] { + cursor: grab; +} + +.graph-widget-canvas[input=dragging-selection-contents] { + cursor: grabbing; +} + +/* Line graph widget */ + +.line-graph-widget-gutter { + position: absolute; + width: 10px; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + border-inline-end: 1px solid; +} + +.theme-light .line-graph-widget-gutter { + background: rgba(255,255,255,0.75); + border-inline-end-color: rgba(255,255,255,0.25); +} + +.theme-dark .line-graph-widget-gutter { + background: rgba(0,0,0,0.5); + border-inline-end-color: rgba(0,0,0,0.25); +} + +.line-graph-widget-gutter-line { + position: absolute; + width: 100%; + border-top: 1px solid; +} + +.line-graph-widget-gutter-line[type=maximum] { + border-color: #2cbb0f; +} + +.line-graph-widget-gutter-line[type=minimum] { + border-color: #ed2655; +} + +.line-graph-widget-gutter-line[type=average] { + border-color: #d97e00; +} + +.line-graph-widget-tooltip { + position: absolute; + border-radius: 2px; + line-height: 15px; + padding-inline-start: 6px; + padding-inline-end: 6px; + transform: translateY(-50%); + font-size: 0.8rem !important; + z-index: 1; + pointer-events: none; +} + +.theme-light .line-graph-widget-tooltip { + background: rgba(255,255,255,0.75); +} + +.theme-dark .line-graph-widget-tooltip { + background: rgba(0,0,0,0.5); +} + +.line-graph-widget-tooltip[with-arrows=true]::before { + content: ""; + position: absolute; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; + top: calc(50% - 3px); +} + +.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { + border-inline-end: 3px solid; + left: -3px; +} + +.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + border-inline-start: 3px solid; + right: -3px; +} + +.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { + border-inline-end-color: rgba(255,255,255,0.75); +} + +.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { + border-inline-end-color: rgba(0,0,0,0.5); +} + +.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + border-inline-start-color: rgba(255,255,255,0.75); +} + +.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + border-inline-start-color: rgba(0,0,0,0.5); +} + +.line-graph-widget-tooltip[type=maximum] { + left: 14px; +} + +.line-graph-widget-tooltip[type=minimum] { + left: 14px; +} + +.line-graph-widget-tooltip[type=average] { + right: 4px; +} + +.line-graph-widget-tooltip > [text=info] { + color: var(--theme-content-color1); +} + +.line-graph-widget-tooltip > [text=value] { + margin-inline-start: 3px; +} + +.line-graph-widget-tooltip > [text=metric] { + margin-inline-start: 1px; + color: var(--theme-content-color3); +} + +.theme-light .line-graph-widget-tooltip > [text=value], +.theme-light .line-graph-widget-tooltip > [text=metric] { + text-shadow: 1px 0px rgba(255,255,255,0.5), + -1px 0px rgba(255,255,255,0.5), + 0px -1px rgba(255,255,255,0.5), + 0px 1px rgba(255,255,255,0.5); +} + +.theme-dark .line-graph-widget-tooltip > [text=value], +.theme-dark .line-graph-widget-tooltip > [text=metric] { + text-shadow: 1px 0px rgba(0,0,0,0.5), + -1px 0px rgba(0,0,0,0.5), + 0px -1px rgba(0,0,0,0.5), + 0px 1px rgba(0,0,0,0.5); +} + +.line-graph-widget-tooltip[type=maximum] > [text=value] { + color: var(--theme-highlight-green); +} + +.line-graph-widget-tooltip[type=minimum] > [text=value] { + color: var(--theme-highlight-red); +} + +.line-graph-widget-tooltip[type=average] > [text=value] { + color: var(--theme-highlight-orange); +} + +/* Bar graph widget */ + +.bar-graph-widget-legend { + position: absolute; + top: 4px; + left: 8px; + color: #292e33; + font-size: 80%; + pointer-events: none; +} + +.bar-graph-widget-legend-item { + float: left; + margin-inline-end: 8px; +} + +.bar-graph-widget-legend-item > [view="color"], +.bar-graph-widget-legend-item > [view="label"] { + vertical-align: middle; +} + +.bar-graph-widget-legend-item > [view="color"] { + display: inline-block; + width: 8px; + height: 8px; + border: 1px solid #fff; + border-radius: 1px; + margin-inline-end: 4px; + pointer-events: all; + cursor: pointer; +} + +.bar-graph-widget-legend-item > [view="label"] { + text-shadow: 1px 0px rgba(255,255,255,0.8), + -1px 0px rgba(255,255,255,0.8), + 0px -1px rgba(255,255,255,0.8), + 0px 1px rgba(255,255,255,0.8); +} + +/* Charts */ + +.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-body-color-alt); +} + +.chart-colored-blob { + fill: var(--theme-content-color2); + background: var(--theme-content-color2); +} + +/* Charts: 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):not([focused]), +.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label { + transform: none !important; +} + +/* Charts: 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-body-color-alt); /* Grey foreground text */ +} + +.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); +} + +/* Table Widget */ + +/* Table body */ + +.table-widget-body > .devtools-side-splitter { + background-color: transparent; +} + +.table-widget-body { + overflow: auto; +} + +.table-widget-body, +.table-widget-empty-text { + background-color: var(--theme-body-background); +} + +/* Column Headers */ + +.table-widget-column-header, +.table-widget-cell { + border-inline-end: 1px solid var(--table-splitter-color) !important; +} + +/* Table widget column header colors are taken from netmonitor.inc.css to match + the look of both the tables. */ + +.table-widget-column-header { + position: sticky; + top: 0; + width: 100%; + margin: 0; + padding: 5px 0 0 !important; + color: inherit; + text-align: center; + font-weight: inherit !important; + border-image: linear-gradient(transparent 15%, + var(--theme-splitter-color) 15%, + var(--theme-splitter-color) 85%, + transparent 85%, + transparent calc(100% - 1px), + var(--theme-splitter-color) calc(100% - 1px)) 1 1; + background-repeat: no-repeat; +} + +.table-widget-column-header:not([sorted]):hover { + background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)); +} + +.table-widget-column-header[sorted] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; + box-shadow: -0.5px -0.5px 0 0.5px var(--theme-splitter-color); + background-position: right 6px center; +} + +.table-widget-column-header[sorted]:-moz-locale-dir(rtl) { + background-position: 6px center; +} + +.table-widget-column-header[sorted=ascending] { + background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending"); +} + +.table-widget-column-header[sorted=descending] { + background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending"); +} + +.theme-dark .table-widget-column[readonly] { + background-color: rgba(255,255,255,0.1); +} + +.theme-light .table-widget-column[readonly] { + background-color: rgba(0,0,0,0.1); +} + +.table-widget-body .devtools-side-splitter:last-of-type { + display: none; +} + +/* Firebug theme support for table widget */ + +.theme-firebug .devtools-toolbar.table-widget-column-header { + font-family: var(--proportional-font-family); + color: var(--theme-body-color); + + /* Make sure to override the default Firebug devtools-toolbar height */ + height: 19px !important; + + /* Make sure to override the dafault .table-widget-column-header font-weight and background */ + font-weight: bold !important; + background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)); + background-color: #C8D2DC !important; + + /* Vertically center header label */ + padding-top: 2px !important; +} + +.theme-firebug .devtools-toolbar.table-widget-column-header[sorted] { + background-color: #AAC3DC !important; +} + +.theme-firebug .devtools-toolbar.table-widget-column-header:hover:active { + background-image: linear-gradient(rgba(0, 0, 0, 0.1), + transparent); +} + +.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=descending]:not(:active) { + background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg); +} + +.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) { + background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg); +} + +/* Cells */ + +.table-widget-cell { + width: 100%; + padding: 3px 4px; + min-width: 100px; + -moz-user-focus: normal; + color: var(--theme-body-color); +} + +.table-widget-cell[hidden] { + display: none; +} + +.table-widget-cell.even:not(.theme-selected) { + background-color: var(--table-zebra-background); +} + +:root:not(.no-animate) .table-widget-cell.flash-out { + animation: flash-out 0.5s ease-in; +} + +@keyframes flash-out { + to { + background: var(--theme-contrast-background); + } +} + +/* Empty text and initial text */ + +.table-widget-empty-text { + display: none; + text-align: center; + font-size: large; + margin-top: -20px !important; +} + +.table-widget-body:empty + .table-widget-empty-text:not([value=""]), +.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { + display: block; +} + +/* Tree Widget */ + +.tree-widget-container { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + list-style: none; + overflow: hidden; + margin-inline-end: 40px; +} + +.tree-widget-container:-moz-focusring, +.tree-widget-container *:-moz-focusring { + outline-style: none; +} + +.tree-widget-empty-text { + padding: 10px 20px; + font-size: medium; + background: transparent; + pointer-events: none; +} + +/* Tree Item */ + +.tree-widget-container .tree-widget-item { + padding: 2px 0px 4px; + /* OSX has line-height 14px by default, which causes weird alignment issues + * because of 20px high icons. thus making line-height consistent with that of + * windows. + */ + line-height: 17px !important; + display: inline-block; + width: 100%; + word-break: keep-all; /* To prevent long urls like http://foo.com/bar from + breaking in multiple lines */ +} + +.tree-widget-container .tree-widget-children { + margin: 0; + padding: 0; + list-style: none; +} + +.tree-widget-item[level="1"] { + font-weight: 700; +} + +/* Twisties */ +.tree-widget-item::before { + content: ""; + width: 14px; + height: 14px; + float: left; + margin: 3px 2px -3px; + background-repeat: no-repeat; + background-image: url("chrome://devtools/skin/images/controls.png"); + background-size: 56px 28px; + cursor: pointer; + background-position: -28px -14px; +} + +.tree-widget-item:-moz-locale-dir(rtl)::before { + float: right; + transform: scaleX(-1); +} + +.theme-light .tree-widget-item:not(.theme-selected)::before { + background-position: 0 -14px; +} + +.tree-widget-item[empty]::before { + background: transparent; +} + +.tree-widget-item[expanded]::before { + background-position: -42px -14px; +} + +.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before { + background-position: -14px -14px; +} + +.tree-widget-item + ul { + overflow: hidden; + animation: collapse-tree-item 0.2s; + max-height: 0; +} + +.tree-widget-item[expanded] + ul { + animation: expand-tree-item 0.3s; + max-height: unset; +} + +@keyframes collapse-tree-item { + from { + max-height: 300px; + } + to { + max-height: 0; + } +} + +@keyframes expand-tree-item { + from { + max-height: 0; + } + to { + max-height: 500px; + } +} + +@media (min-resolution: 1.1dppx) { + .tree-widget-item:before { + background-image: url("chrome://devtools/skin/images/controls@2x.png"); + } +} + +/* Indentation of child items in the tree */ + +/* For level > 6 */ +.tree-widget-item[level] + ul > li > .tree-widget-item { + padding-inline-start: 98px; +} + +/* First level */ +.tree-widget-item[level="1"] + ul > li > .tree-widget-item { + padding-inline-start: 14px; +} + +/* Second level */ +.tree-widget-item[level="2"] + ul > li > .tree-widget-item { + padding-inline-start: 28px; +} + +/* Third level */ +.tree-widget-item[level="3"] + ul > li > .tree-widget-item { + padding-inline-start: 42px; +} + +/* Fourth level */ +.tree-widget-item[level="4"] + ul > li > .tree-widget-item { + padding-inline-start: 56px; +} + +/* Fifth level */ +.tree-widget-item[level="5"] + ul > li > .tree-widget-item { + padding-inline-start: 70px; +} + +/* Sixth level */ +.tree-widget-item[level="6"] + ul > li > .tree-widget-item { + padding-inline-start: 84px; +} + +/* Custom icons for certain tree items indicating the type of the item */ + +.tree-widget-item[type]::after { + content: ""; + float: left; + width: 16px; + height: 17px; + margin-inline-end: 4px; + background-repeat: no-repeat; + background-size: 20px auto; + background-position: 0 0; + background-size: auto 20px; + opacity: 0.75; +} + +.tree-widget-item.theme-selected[type]::after { + opacity: 1; +} + +.tree-widget-item:-moz-locale-dir(rtl)::after { + float: right; +} + +.theme-light .tree-widget-item.theme-selected[type]::after, +.theme-dark .tree-widget-item[type]::after { + filter: invert(1); +} + +.tree-widget-item[type="dir"]::after { + background-image: url(chrome://devtools/skin/images/filetypes/dir-close.svg); + background-position: 2px 0; + background-size: auto 16px; + width: 20px; +} + +.tree-widget-item[type="dir"][expanded]:not([empty])::after { + background-image: url(chrome://devtools/skin/images/filetypes/dir-open.svg); +} + +.tree-widget-item[type="url"]::after { + background-image: url(chrome://devtools/skin/images/filetypes/globe.svg); + background-size: auto 18px; + width: 18px; +} -- cgit v1.2.3