From 1d5f9f7aa7ac0bfe6a091b7c1395cafa33d52c43 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 19 Aug 2015 19:38:44 +0200 Subject: add firefox theme --- arc-firefox-theme/chrome/browser/devtools/add.svg | 3 + .../chrome/browser/devtools/alerticon-warning.png | Bin 0 -> 613 bytes .../browser/devtools/alerticon-warning@2x.png | Bin 0 -> 432 bytes .../chrome/browser/devtools/animationinspector.css | 256 +++ .../chrome/browser/devtools/app-manager/add.svg | 12 + .../devtools/app-manager/connection-footer.css | 224 +++ .../devtools/app-manager/default-app-icon.png | Bin 0 -> 5208 bytes .../chrome/browser/devtools/app-manager/device.css | 410 +++++ .../chrome/browser/devtools/app-manager/error.svg | 13 + .../chrome/browser/devtools/app-manager/help.css | 40 + .../browser/devtools/app-manager/index-icons.svg | 80 + .../chrome/browser/devtools/app-manager/index.css | 103 ++ .../chrome/browser/devtools/app-manager/noise.png | Bin 0 -> 6216 bytes .../chrome/browser/devtools/app-manager/plus.svg | 12 + .../browser/devtools/app-manager/projects.css | 556 +++++++ .../chrome/browser/devtools/app-manager/remove.svg | 10 + .../chrome/browser/devtools/app-manager/rocket.svg | 30 + .../browser/devtools/app-manager/warning.svg | 13 + .../chrome/browser/devtools/arrow-e.png | Bin 0 -> 168 bytes .../chrome/browser/devtools/arrow-e@2x.png | Bin 0 -> 417 bytes .../browser/devtools/breadcrumbs-divider@2x.png | Bin 0 -> 1207 bytes .../browser/devtools/breadcrumbs-scrollbutton.png | Bin 0 -> 259 bytes .../devtools/breadcrumbs-scrollbutton@2x.png | Bin 0 -> 564 bytes .../chrome/browser/devtools/canvasdebugger.css | 451 ++++++ .../chrome/browser/devtools/close.png | Bin 0 -> 1466 bytes .../chrome/browser/devtools/close@2x.png | Bin 0 -> 272 bytes .../chrome/browser/devtools/command-console.png | Bin 0 -> 548 bytes .../chrome/browser/devtools/command-console@2x.png | Bin 0 -> 1225 bytes .../chrome/browser/devtools/command-eyedropper.png | Bin 0 -> 1049 bytes .../browser/devtools/command-eyedropper@2x.png | Bin 0 -> 2066 bytes .../chrome/browser/devtools/command-frames.png | Bin 0 -> 522 bytes .../chrome/browser/devtools/command-frames@2x.png | Bin 0 -> 836 bytes .../browser/devtools/command-paintflashing.png | Bin 0 -> 872 bytes .../browser/devtools/command-paintflashing@2x.png | Bin 0 -> 1833 bytes .../chrome/browser/devtools/command-pick.png | Bin 0 -> 1237 bytes .../chrome/browser/devtools/command-pick@2x.png | Bin 0 -> 2721 bytes .../browser/devtools/command-responsivemode.png | Bin 0 -> 951 bytes .../browser/devtools/command-responsivemode@2x.png | Bin 0 -> 1411 bytes .../chrome/browser/devtools/command-rulers.png | Bin 0 -> 1281 bytes .../chrome/browser/devtools/command-rulers@2x.png | Bin 0 -> 1369 bytes .../chrome/browser/devtools/command-scratchpad.png | Bin 0 -> 556 bytes .../browser/devtools/command-scratchpad@2x.png | Bin 0 -> 898 bytes .../chrome/browser/devtools/command-screenshot.png | Bin 0 -> 1202 bytes .../browser/devtools/command-screenshot@2x.png | Bin 0 -> 1631 bytes .../chrome/browser/devtools/command-tilt.png | Bin 0 -> 1344 bytes .../chrome/browser/devtools/command-tilt@2x.png | Bin 0 -> 2411 bytes .../chrome/browser/devtools/commandline-icon.png | Bin 0 -> 254 bytes .../browser/devtools/commandline-icon@2x.png | Bin 0 -> 586 bytes .../chrome/browser/devtools/commandline.css | 172 ++ .../chrome/browser/devtools/common.css | 264 ++++ .../chrome/browser/devtools/computedview.css | 208 +++ .../chrome/browser/devtools/controls.png | Bin 0 -> 1630 bytes .../chrome/browser/devtools/controls@2x.png | Bin 0 -> 2045 bytes .../browser/devtools/cubic-bezier-swatch.png | Bin 0 -> 1184 bytes .../browser/devtools/cubic-bezier-swatch@2x.png | Bin 0 -> 1661 bytes .../chrome/browser/devtools/dark-theme.css | 1458 +++++++++++++++++ .../chrome/browser/devtools/debugger-blackbox.png | Bin 0 -> 547 bytes .../browser/devtools/debugger-blackbox@2x.png | Bin 0 -> 988 bytes .../chrome/browser/devtools/debugger-collapse.png | Bin 0 -> 311 bytes .../browser/devtools/debugger-collapse@2x.png | Bin 0 -> 338 bytes .../chrome/browser/devtools/debugger-expand.png | Bin 0 -> 310 bytes .../chrome/browser/devtools/debugger-expand@2x.png | Bin 0 -> 350 bytes .../chrome/browser/devtools/debugger-pause.png | Bin 0 -> 150 bytes .../chrome/browser/devtools/debugger-pause@2x.png | Bin 0 -> 189 bytes .../chrome/browser/devtools/debugger-play.png | Bin 0 -> 288 bytes .../chrome/browser/devtools/debugger-play@2x.png | Bin 0 -> 494 bytes .../browser/devtools/debugger-prettyprint.png | Bin 0 -> 639 bytes .../browser/devtools/debugger-prettyprint@2x.png | Bin 0 -> 1259 bytes .../chrome/browser/devtools/debugger-step-in.png | Bin 0 -> 206 bytes .../browser/devtools/debugger-step-in@2x.png | Bin 0 -> 355 bytes .../chrome/browser/devtools/debugger-step-out.png | Bin 0 -> 214 bytes .../browser/devtools/debugger-step-out@2x.png | Bin 0 -> 339 bytes .../chrome/browser/devtools/debugger-step-over.png | Bin 0 -> 306 bytes .../browser/devtools/debugger-step-over@2x.png | Bin 0 -> 472 bytes .../devtools/debugger-toggleBreakpoints.png | Bin 0 -> 886 bytes .../devtools/debugger-toggleBreakpoints@2x.png | Bin 0 -> 1676 bytes .../chrome/browser/devtools/debugger.css | 672 ++++++++ .../chrome/browser/devtools/dock-bottom@2x.png | Bin 0 -> 154 bytes .../chrome/browser/devtools/dock-side@2x.png | Bin 0 -> 153 bytes .../chrome/browser/devtools/dropmarker.svg | 3 + .../chrome/browser/devtools/editor-breakpoint.png | Bin 0 -> 430 bytes .../browser/devtools/editor-debug-location.png | Bin 0 -> 266 bytes .../browser/devtools/editor-debug-location@2x.png | Bin 0 -> 462 bytes .../chrome/browser/devtools/editor-error.png | Bin 0 -> 3794 bytes .../chrome/browser/devtools/eyedropper.css | 45 + .../chrome/browser/devtools/fast-forward.png | Bin 0 -> 1260 bytes .../chrome/browser/devtools/fast-forward@2x.png | Bin 0 -> 1621 bytes .../chrome/browser/devtools/filetype-dir-close.svg | 4 + .../chrome/browser/devtools/filetype-dir-open.svg | 4 + .../chrome/browser/devtools/filetype-globe.svg | 3 + .../chrome/browser/devtools/filetype-store.svg | 7 + .../chrome/browser/devtools/filter-swatch.svg | 17 + .../chrome/browser/devtools/filters.svg | 27 + .../browser/devtools/floating-scrollbars-light.css | 10 + .../browser/devtools/floating-scrollbars.css | 33 + .../chrome/browser/devtools/font-inspector.css | 77 + .../chrome/browser/devtools/inspector.css | 155 ++ .../chrome/browser/devtools/itemArrow-dark-ltr.svg | 4 + .../chrome/browser/devtools/itemArrow-dark-rtl.svg | 4 + .../chrome/browser/devtools/itemArrow-ltr.svg | 4 + .../chrome/browser/devtools/itemArrow-rtl.svg | 4 + .../chrome/browser/devtools/itemToggle.png | Bin 0 -> 571 bytes .../chrome/browser/devtools/itemToggle@2x.png | Bin 0 -> 1032 bytes .../chrome/browser/devtools/layoutview.css | 60 + .../chrome/browser/devtools/light-theme.css | 1456 +++++++++++++++++ .../browser/devtools/magnifying-glass-light.png | Bin 0 -> 186 bytes .../browser/devtools/magnifying-glass-light@2x.png | Bin 0 -> 421 bytes .../chrome/browser/devtools/magnifying-glass.png | Bin 0 -> 192 bytes .../browser/devtools/magnifying-glass@2x.png | Bin 0 -> 449 bytes .../chrome/browser/devtools/markup-view.css | 100 ++ .../chrome/browser/devtools/netmonitor.css | 920 +++++++++++ .../chrome/browser/devtools/newtab-inverted.png | Bin 0 -> 470 bytes .../chrome/browser/devtools/newtab-inverted@2x.png | Bin 0 -> 866 bytes .../chrome/browser/devtools/newtab.png | Bin 0 -> 568 bytes .../chrome/browser/devtools/newtab@2x.png | Bin 0 -> 1742 bytes .../chrome/browser/devtools/noise.png | Bin 0 -> 2118 bytes .../chrome/browser/devtools/performance-icons.svg | 42 + .../chrome/browser/devtools/performance.css | 695 +++++++++ .../chrome/browser/devtools/power.svg | 14 + .../devtools/profiler-stopwatch-checked.svg | 14 + .../chrome/browser/devtools/profiler-stopwatch.svg | 14 + .../chrome/browser/devtools/profiler.css | 400 +++++ .../devtools/projecteditor/projecteditor.css | 188 +++ .../devtools/responsive-horizontal-resizer.png | Bin 0 -> 102 bytes .../devtools/responsive-horizontal-resizer@2x.png | Bin 0 -> 129 bytes .../browser/devtools/responsive-se-resizer.png | Bin 0 -> 129 bytes .../browser/devtools/responsive-se-resizer@2x.png | Bin 0 -> 205 bytes .../devtools/responsive-vertical-resizer.png | Bin 0 -> 105 bytes .../devtools/responsive-vertical-resizer@2x.png | Bin 0 -> 141 bytes .../chrome/browser/devtools/responsiveui-home.png | Bin 0 -> 276 bytes .../browser/devtools/responsiveui-rotate.png | Bin 0 -> 245 bytes .../browser/devtools/responsiveui-rotate@2x.png | Bin 0 -> 438 bytes .../browser/devtools/responsiveui-screenshot.png | Bin 0 -> 303 bytes .../devtools/responsiveui-screenshot@2x.png | Bin 0 -> 531 bytes .../chrome/browser/devtools/responsiveui-touch.png | Bin 0 -> 470 bytes .../browser/devtools/responsiveui-touch@2x.png | Bin 0 -> 927 bytes .../chrome/browser/devtools/rewind.png | Bin 0 -> 1269 bytes .../chrome/browser/devtools/rewind@2x.png | Bin 0 -> 1650 bytes .../chrome/browser/devtools/ruleview.css | 264 ++++ .../chrome/browser/devtools/scratchpad.css | 13 + .../chrome/browser/devtools/search-clear-dark.svg | 21 + .../browser/devtools/search-clear-failed.svg | 21 + .../chrome/browser/devtools/search-clear-light.svg | 21 + .../chrome/browser/devtools/shadereditor.css | 123 ++ .../chrome/browser/devtools/splitview.css | 152 ++ .../chrome/browser/devtools/storage.css | 48 + .../chrome/browser/devtools/styleeditor.css | 305 ++++ .../chrome/browser/devtools/timeline-filter.svg | 37 + .../chrome/browser/devtools/toggle-tools.png | Bin 0 -> 883 bytes .../chrome/browser/devtools/toggle-tools@2x.png | Bin 0 -> 1834 bytes .../browser/devtools/tool-debugger-paused.svg | 3 + .../chrome/browser/devtools/tool-debugger.svg | 7 + .../chrome/browser/devtools/tool-inspector.svg | 9 + .../chrome/browser/devtools/tool-network.svg | 36 + .../chrome/browser/devtools/tool-options.svg | 3 + .../browser/devtools/tool-profiler-active.svg | 14 + .../chrome/browser/devtools/tool-profiler.svg | 14 + .../chrome/browser/devtools/tool-scratchpad.svg | 6 + .../chrome/browser/devtools/tool-storage.svg | 7 + .../chrome/browser/devtools/tool-styleeditor.svg | 6 + .../chrome/browser/devtools/tool-webaudio.svg | 3 + .../chrome/browser/devtools/tool-webconsole.svg | 3 + .../devtools/tooltip/arrow-horizontal-dark.png | Bin 0 -> 1418 bytes .../devtools/tooltip/arrow-horizontal-dark@2x.png | Bin 0 -> 1796 bytes .../devtools/tooltip/arrow-horizontal-light.png | Bin 0 -> 1434 bytes .../devtools/tooltip/arrow-horizontal-light@2x.png | Bin 0 -> 1870 bytes .../devtools/tooltip/arrow-vertical-dark.png | Bin 0 -> 1401 bytes .../devtools/tooltip/arrow-vertical-dark@2x.png | Bin 0 -> 1866 bytes .../devtools/tooltip/arrow-vertical-light.png | Bin 0 -> 1377 bytes .../devtools/tooltip/arrow-vertical-light@2x.png | Bin 0 -> 1752 bytes .../chrome/browser/devtools/tracer-icon.png | Bin 0 -> 709 bytes .../chrome/browser/devtools/tracer-icon@2x.png | Bin 0 -> 1323 bytes .../chrome/browser/devtools/undock@2x.png | Bin 0 -> 178 bytes .../chrome/browser/devtools/vview-delete.png | Bin 0 -> 3229 bytes .../chrome/browser/devtools/vview-delete@2x.png | Bin 0 -> 3542 bytes .../chrome/browser/devtools/vview-edit.png | Bin 0 -> 3329 bytes .../chrome/browser/devtools/vview-edit@2x.png | Bin 0 -> 4062 bytes .../chrome/browser/devtools/vview-lock.png | Bin 0 -> 3269 bytes .../chrome/browser/devtools/vview-lock@2x.png | Bin 0 -> 3839 bytes .../browser/devtools/vview-open-inspector.png | Bin 0 -> 2942 bytes .../browser/devtools/vview-open-inspector@2x.png | Bin 0 -> 3095 bytes .../chrome/browser/devtools/webaudioeditor.css | 257 +++ .../chrome/browser/devtools/webconsole.css | 592 +++++++ .../chrome/browser/devtools/webconsole.png | Bin 0 -> 1943 bytes .../chrome/browser/devtools/webconsole@2x.png | Bin 0 -> 2633 bytes .../browser/devtools/webconsole_networkpanel.css | 99 ++ .../chrome/browser/devtools/widgets.css | 1643 ++++++++++++++++++++ 187 files changed, 12998 insertions(+) create mode 100644 arc-firefox-theme/chrome/browser/devtools/add.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/animationinspector.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/device.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/help.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/index.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/arrow-e.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/close.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/close@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-console.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-console@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png create mode 100755 arc-firefox-theme/chrome/browser/devtools/command-frames.png create mode 100755 arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-pick.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-rulers.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-screenshot.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-tilt.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/commandline-icon.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/commandline.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/common.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/computedview.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/controls.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/controls@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/dark-theme.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-expand.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-pause.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-play.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/debugger.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/dropmarker.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/editor-error.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/eyedropper.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/fast-forward.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/filetype-store.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/filters.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/font-inspector.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/inspector.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg create mode 100755 arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/itemToggle.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/layoutview.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/light-theme.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/markup-view.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/netmonitor.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/newtab.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/newtab@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/noise.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/performance-icons.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/performance.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/power.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/rewind.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/rewind@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/ruleview.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/scratchpad.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/shadereditor.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/splitview.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/storage.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/styleeditor.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/toggle-tools.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-network.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-options.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-storage.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tracer-icon.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/undock@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-delete.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-edit.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-lock.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/widgets.css (limited to 'arc-firefox-theme/chrome/browser/devtools') diff --git a/arc-firefox-theme/chrome/browser/devtools/add.svg b/arc-firefox-theme/chrome/browser/devtools/add.svg new file mode 100644 index 0000000..af162e3 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png new file mode 100644 index 0000000..5c5d0ae Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png new file mode 100644 index 0000000..dc3a3b1 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css new file mode 100644 index 0000000..6cc0bdb --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -0,0 +1,256 @@ +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 */ + +#toolbar { + border-bottom: 1px solid var(--theme-splitter-color); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + height: 20px; +} + +#toolbar .label { + padding: 1px 4px; +} + +#toggle-all { + border-width: 0 0 0 1px; + min-height: 20px; +} + +/* 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; +} + +/* The animation players container */ + +#players { + flex: 1; + overflow: auto; +} + +/* Element picker and toggle-all buttons */ + +#element-picker, +#toggle-all { + position: relative; +} + +#element-picker::before, +#toggle-all::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-image: url("chrome://browser/skin/devtools/command-pick.png"); +} + +#toggle-all::before { + background-image: url("debugger-pause.png"); +} + +#element-picker[checked]::before { + background-position: -48px 0; + filter: none; /* Icon is blue when checked, don't invert for light theme */ +} + +#toggle-all.paused::before { + background-image: url("debugger-play.png"); +} + +@media (min-resolution: 1.25dppx) { + #element-picker::before { + background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); + background-size: 64px; + } + + #toggle-all::before { + background-image: url("debugger-pause@2x.png"); + } + + #toggle-all.paused::before { + background-image: url("debugger-play@2x.png"); + } +} + +/* Animation target node gutter, contains a preview of the dom node */ + +.animation-target { + background-color: var(--theme-toolbar-background); + padding: 1px 4px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.animation-target .attribute-name { + padding-left: 4px; +} + +.animation-target .node-selector { + background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-right: 5px; + cursor: pointer; +} + +.animation-target .node-selector:hover { + background-position: -32px 0; +} + +.animation-target .node-selector:active { + background-position: -16px 0; +} + +/* Animation title gutter, contains the name, duration, iteration */ + +.animation-title { + background-color: var(--theme-toolbar-background); + border-bottom: 1px solid var(--theme-splitter-color); + padding: 1px 4px; + word-wrap: break-word; + overflow: auto; +} + +.animation-title .meta-data { + float: right; +} + +.animation-title strong { + margin: 0 .5em; +} + +/* Timeline wiget */ + +.timeline { + height: 20px; + width: 100%; + display: flex; + flex-direction: row; + border-bottom: 1px solid var(--theme-splitter-color); +} + +.timeline .playback-controls { + display: flex; + flex-direction: row; +} + +/* Playback control buttons */ + +.timeline .playback-controls button { + flex-grow: 1; + border-width: 0 1px 0 0; +} + +.timeline .toggle::before { + background-image: url(debugger-pause.png); +} + +.paused .timeline .toggle::before, +.finished .timeline .toggle::before { + background-image: url(debugger-play.png); +} + +.timeline .ff::before { + background-image: url(fast-forward.png); +} + +.timeline .rw::before { + background-image: url(rewind.png); +} + +@media (min-resolution: 1.25dppx) { + .timeline .toggle::before { + background-image: url(debugger-pause@2x.png); + } + + .paused .timeline .toggle::before, + .finished .timeline .toggle::before { + background-image: url(debugger-play@2x.png); + } + + .timeline .ff::before { + background-image: url(fast-forward@2x.png); + } + + .timeline .rw::before { + background-image: url(rewind@2x.png); + } +} + +.timeline .rate { + -moz-appearance: none; + text-align: center; + color: var(--theme-body-color); + border-right: 1px solid var(--theme-splitter-color); +} + +/* Slider (input type range) container */ + +.timeline .sliders-container { + flex-grow: 1; + height: 100%; + position: relative; + border-width: 1px 0; +} + +.timeline .sliders-container .current-time { + position: absolute; + padding: 0; + margin: 0; + left: 0; + width: 100%; + height: 100%; +} + +.timeline .sliders-container .current-time::-moz-range-thumb { + height: 100%; + width: 4px; + border-radius: 0; + border: none; + background: var(--theme-highlight-blue); +} + +.timeline .sliders-container .current-time::-moz-range-track { + width: 100%; + height: 50px; + background: transparent; +} + +/* Current time label */ + +.timeline .time-display { + display: flex; + align-items: center; + justify-content: center; + width: 50px; + border-left: 1px solid var(--theme-splitter-color); + background: var(--theme-toolbar-background); +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg new file mode 100644 index 0000000..f1b5594 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg @@ -0,0 +1,12 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css new file mode 100644 index 0000000..dc51832 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css @@ -0,0 +1,224 @@ +/* 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/. */ + +/************** LAYOUT **************/ + +#connection-footer { + display: flex; + flex-direction: column; + height: 50px; +} + +#banners-and-logs { + display: flex; + flex-grow: 1; + max-height: 100%; +} + +#logs { + display: flex; + width: 40%; + padding: 0; + width: 100%; +} + +.banner { + display: none; + width: 60%; +} + +#connection-footer[status="connected"] #banner-connected, +#connection-footer[status="connecting"] #banner-connecting, +#connection-footer[status="disconnected"] #banner-disconnected, +#connection-footer[status="disconnecting"] #banner-disconnecting { + display: flex; +} + +body.show-simulators .banner, +body.edit-connection .banner { + display: none !important; +} + +body.show-simulators #banner-simulators, +body.edit-connection #banner-editing { + display: flex !important; +} + +#banner-logs { + width: 40%; + display: flex; +} + +#logs > pre { + overflow: auto; + white-space: pre-line; +} + +#status.banner-box { + width: 100% !important; +} + +.banner-box { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; +} + +#banner-connected > .banner-box { + align-items: flex-start; +} + +#start-simulator-box { + display: inline; +} + +/************** PIXELS **************/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 0.9rem; +} + +body { + color: #333; + background-color: white; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; +} + +button { + background: linear-gradient(to bottom, #49535C, #394148); + box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1); + color: #9FA6AD; + text-shadow: 0px 1px 1px rgba(0,0,0,0.6); + border: 1px solid #111; + cursor: pointer; + border-radius: 3px; + padding: 3px 10px; +} + +button.left { + margin-right: 0px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +button.right { + margin-left: -6px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +button.action-primary { + background: linear-gradient(to bottom, #276DA3, #1E5580); + color: #EEE; +} + +button.action-cancel { + background: linear-gradient(to bottom, #B32B02, #942300); + color: #EEE; +} + +#banners-and-logs { + border-top: #111 solid; + border-width: 1px 0; + background: linear-gradient(to bottom, #323A42, #29313A); + color: #A8BABF; + box-shadow: inset 0 0 1px #424A51; +} + +#status { + background: linear-gradient(to bottom, #454F59, #404952); + box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973; +} + +#logs > pre { + border: 1px solid #111; + box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3); + font-size: 10px; + background: #22272D; + padding: 5px; + height: 100%; + padding-left: 20px; + position: relative; +} + +#logs > pre span{ + text-shadow: 0 1px 2px #000; + color: #3195FB; + position: fixed; + right: calc(30% - 15px); + bottom: -1px; +} + +#logs > pre b { + font-size: 10px; + color: #70C4FF; +} + +.banner-box { + box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973; + border-right: 1px solid #111; + background-position: center right; + background-size: 1px 100%; + background-repeat: no-repeat; + padding: 10px 20px; + position: relative; +} + +.connected-status { + color: #B3BFC9; + text-shadow: 0px 1px 2px rgba(0,0,0,0.9); + padding-bottom: 10px; +} + +.connected-status { + font-size: 150%; + top: 10%; + padding-right: 3px; + position: relative; +} + +.connected-indicator { + box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3); + height: 100%; + flex: 0 0 10px; +} + +#banner-connected .connected-indicator, +#banner-connecting .connected-indicator { + background: linear-gradient(to bottom, #69B8FF, #339FFF ); +} + +#banner-simulators .connected-indicator, +#banner-disconnected .connected-indicator, +#banner-editing .connected-indicator, +#banner-disconnecting .connected-indicator { + background: linear-gradient(to bottom, #375A87, #1C4375 ); +} + +#banner-simulators .banner-content > * { + display: inline-block; +} + +#banner-simulators[simulator-count="0"] .found-simulator, +#banner-simulators:not([simulator-count="0"]) .no-simulator { + display: none; +} + +#connection-no-device, +[device-count="0"] > #connection-found-device, +#connection-manual, +#connection-assisted { + display: none; +} + +#connection-found-device, +[device-count="0"] > #connection-no-device, +[adb-available="true"] > #connection-assisted, +[adb-available="false"] > #connection-manual { + display: inline; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png b/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png new file mode 100644 index 0000000..f186d9c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css new file mode 100644 index 0000000..fc6efd9 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css @@ -0,0 +1,410 @@ +/* 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/. */ + +/***************** GENERAL *****************/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body { + font-size: 0.9rem; + color: #333; + background-color: rgb(225, 225, 225); + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + display: flex; + flex-direction: column; +} + +template { + display: none; +} + +h1 { + font-size: 20px; +} + +#content { + display: flex; + flex-direction: row; + height: 100%; + overflow: hidden; +} + +#detail { + background-image: url('noise.png'); + display: flex; + flex-grow: 1; + z-index: 1; + overflow: hidden; +} + +#meta { + background-size: 100%; + padding-top: 50px; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} + + +#root-actor-debug { + background: white; +} + +/***************** APP BUTTONS *****************/ + + + +.app-buttons { + display: block; + margin-left: 20px; + color: #BBB; +} + +button { + margin: 0; + font-size: 11px; + border: 1px solid #CCC; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + border-radius: 3px; + border-width: 1px; +} + +.app-buttons > button { + display: none; +} + +.app-buttons > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.app[running="false"] > .app-buttons > .button-start, +.app[running="true"] > .app-buttons > .button-stop, +.app[running="true"] > .app-buttons > .button-debug { + display: inline-block; +} + +.button-debug { + color: #3498DB; +} + +.button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.button-debug[disabled] { + color: #3498DB; +} + +.button-start { + color: #18BC9C +} + +.button-start:hover { + background-color: #18BC9C; + color: #FFF; +} + +.button-start[disabled] { + color: #18BC9C +} + +.button-stop { + color: #E74C3C; +} + +.button-stop:hover { + background-color: #E74C3C; + color: #FFF; +} + +.button-stop[disabled] { + color: #E74C3C; +} + + + +/***************** PERMISSIONS *****************/ + + + + +.permission-table { + display: flex; + flex-direction: column; + height: 100%; +} + +.permission-table-body { + overflow: auto; + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.permission-table-header, +.permission-table-footer { + display: flex; + background: #FFF; + border-top: 1px solid #CCC; + z-index: 2; + flex-shrink: 0; +} + +.permission-table-header > div, +.permission-table-footer > div { + z-index: 2; + flex-grow: 1; + background: linear-gradient(to bottom, #49535C, #394148); + box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1); + color: #9FA6AD; + text-shadow: 0px 1px 1px rgba(0,0,0,0.6); + border: 0; + margin: auto 0; + padding: 5px; + text-align: center; + background: transparent; + box-shadow: none; + text-shadow: none; +} + +.permission-table-header > div { + flex-basis: 20%; +} + +.permission-table-header > div:first-child { + text-align: start; + padding-left: 10px; + flex-basis: 30%; +} + +.permission-table-header { + border: 0; + border-bottom: 1px solid #CCC; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); +} + +.permission-table-footer { + box-shadow: 0 -1px 4px rgba(0,0,0,0.3); +} + +.permission { + display: flex; + flex-grow: 1; +} + +.permission:nth-child(odd) { + background: #E4E4E4; +} + +.permission:hover { + background: #EEE; +} + +.permission > div { + flex-grow: 1; + flex-basis: 20%; + text-align: center; + padding: 3px; + border-right: 1px solid #CCC; + border-bottom: 1px solid #CCC; +} + +.permission > div:first-child { + text-align: start; + padding: 3px 10px; + flex-basis: 30%; + font-weight: bold; +} + +.permission > div[permission="1"]:before, .allow-label:after { + color: #98CF39; + content: ' \2713'; +} + +.permission > div[permission="2"]:before, .deny-label:after { + color: #CC4908; + content: ' \2715'; +} + +.permission > div[permission="3"]:before, .prompt-label:after { + color: #009EED; + content: ' !'; +} + + + + +/***************** SIDEBAR *****************/ + + + + +#sidebar { + background: #EEE; + position: relative; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; +} + +.sidebar-item { + background-color: #F6F6F6; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + color: #666; + line-height: 120%; + cursor: pointer; + display: flex; + padding: 15px 10px; + display: block; + text-align: start; + flex-grow: 1; +} + +.sidebar-item > * { + flex-shrink: 0; +} + +.sidebar-item:hover { + background-color: #EEE; +} + +.sidebar-item.selected { + background-color: #46AFE3; + color: #FFF; +} + +.help { + float: right; + padding: 0 5px; +} + +/***************** HEADER *****************/ + +header { + padding-top: 140px; + background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); + color: #FFF; + text-shadow: 0 1px 2px rgba(0,0,0,0.8); + padding: 10px; +} + + + +/***************** APPS & BROWSER TABS *****************/ + + + + +.apps, .browser-tabs { + display: flex; + flex-direction: column; + overflow: auto; +} + +.browser-tabs.hidden { + display: none; +} + +.app, .browser-tab { + display: flex; + align-items: center; + order: 1; +} + +.app-name, .browser-tab-details { + flex-grow: 1; + font-weight: bold; +} + +.app, .browser-tab { + padding: 10px 20px; + border-bottom: 1px solid #CCC; +} + +.app:hover, .browser-tab:hover { + background-color: #EFEFEF; +} + +.app-icon { + width: 32px; + height: 32px; + margin-right: 10px; +} + +.browser-tab-url-subheading { + font-size: 10px; +} + + + +/***************** NOT CONNECTED *****************/ + + + +body:not(.notconnected) > #notConnectedMessage, +body.notconnected > #content { + display: none; +} + +#notConnectedMessage { + flex-grow: 1; + flex-direction: column; + margin: 50px auto; +} + +#notConnectedMessage > span { + padding: 20px; + border: 1px solid #CCC; + border-radius: 5px; +} + +#notConnectedMessage > span:before { + content: ''; + background: url('error.svg') no-repeat; + background-size: 18px; + height: 24px; + width: 24px; + position: relative; + top: 10px; + display: inline-block; +} + + + +/***************** TABS *****************/ + +#tabs { + flex-grow: 1; + overflow: auto; +} + +.tabpanel:not(.selected) { + display: none; +} + +#tabs-headers { + flex-shrink: 0; + display: flex; + flex-direction: column; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg new file mode 100644 index 0000000..21261cd --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css new file mode 100644 index 0000000..087819e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css @@ -0,0 +1,40 @@ +/* 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/. */ + +html, body { + margin: 0; + height: 100%; +} + +body { + color: #555; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + overflow: hidden; + max-width: 600px; + margin: auto; + padding: 20px 0; + background-color: #FFF; +} + +button { + border: 1px solid #CCC; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + color: #3498DB; +} + +button:hover { + background-color: #3498DB; + color: #FFF; +} + +a, a:visited { + color: rgb(39,109,163); +} + +#close-button { + float: right; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg new file mode 100644 index 0000000..b0a414d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css new file mode 100644 index 0000000..cb3f876 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css @@ -0,0 +1,103 @@ +/* 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/. */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; +} + +#tabs { + box-shadow: inset -4px 0 0 rgba(0,0,0,0.3); + background: #252C33; +} + +#toolbox-tabs { + overflow-y: auto; +} + +.button { + width: 80px; + height: 85px; + padding-bottom: 5px; + -moz-appearance: none; + border: none; + border-bottom: 1px solid #121214; + background-color: transparent; + color: #B5B8BB; + cursor: pointer; + text-align: center; + -moz-box-align: end; + font-size: 10px; + text-shadow: 0 1px 0 #333; + color: #9FA6AD; +} + +.button:first-child { + border-top: none; +} + +.button[selected] { + box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496; + color: #DCE8F3; + background-color: #1A4766; + border-color: #191B1E; +} + +.button::-moz-focus-inner { + border-width: 0; +} + +.panel { + border-width: 0; +} + +.panel:not([selected="true"]) { + display: none; +} + +.button.toolbox { + background-repeat: no-repeat; + background-position: center 15px; + background-size: 40px 40px; +} + +.projects-button { + background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat; + background-position: left -5px; +} + +.projects-button[selected] { + background-position: right -5px; +} + +.device-button { + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-position: left -85px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.device-button[selected] { + background-position: right -85px, top left; +} + +.help-button { + border-bottom: 0; + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-position: left -165px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.help-button[selected] { + background-position: right -165px, top left; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png b/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png new file mode 100644 index 0000000..b3c42ac Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg new file mode 100644 index 0000000..10e8d2b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg @@ -0,0 +1,12 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css new file mode 100644 index 0000000..98b2289 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css @@ -0,0 +1,556 @@ +/* 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/. */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 0.9rem; +} + +html, body { + height: 100%; +} + +template { + display: none; +} + +body { + display: flex; + color: #333; + background-color: white; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + overflow: hidden; +} + +body:not(.connected) button.device-action { + display: none; +} + +strong { + color: #111; +} + + +/********* SIDEBAR ***********/ + + + +#sidebar { + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; + background-color: #E9EAEB; + position: relative; + box-shadow: 3px 0 1.5px rgba(0,0,0,0.08); +} + +#project-list { + height: 100%; + overflow: auto; +} + +#project-list:not([projects-count="0"]) > #no-project { + display: none; +} + +#no-project { + padding: 100px 20px 0; + font-weight: bold; + color: #BBB; + font-size: 22px; +} + + +/********* PROJECT MENU ***********/ + + +.project-item { + padding: 10px 0; + background-color: #F0F1F2; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + color: #666; + line-height: 120%; + cursor: pointer; + display: flex; + position: relative; +} + +.project-item:hover { + background-color: #EEE; +} + +.project-item > * { + flex-shrink: 0; +} + +.project-item.selected { + background-color: #46AFE3; +} + +.project-item.selected strong { + color: #FFF; +} + +.project-item.selected p, +.project-item.selected span { + color: #C1DCF0; +} + +.button-remove { + background-image: url('remove.svg'); + background-size: 20px; + width: 20px; + height: 20px; + position: absolute; + right: 5px; + bottom: 5px; + visibility: hidden; + opacity: 0.5; +} + +.project-item:hover .button-remove { + visibility: visible; +} + +.project-item-status { + width: 6px; + margin: -10px 0; + border-right: 1px solid rgba(0,0,0,0.1); + box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2); +} + +.project-item-status[status="valid"] { + background-color: #70BF53; +} + +.project-item-status[status~="warning"] { + background-color: #F2B33F; +} + +.project-item-status[status~="error"] { + background-color: #ED4C62; +} + +.project-item-icon { + width: 32px; + height: 32px; + margin: 0 10px; +} + +.project-item-meta { + flex-grow: 1; + flex-shrink: 1 !important; +} + +.project-item-type { + font-size: 10px; + line-height: 20px; + float: right; + padding-right: 10px; + color: #7597B9; + text-transform: uppercase; +} + +.project-item-description { + color: #888; + font-size: 90%; +} + +/********* ADD PROJECT ***********/ + +#new-packaged-project { + box-shadow: 0 -1px 5px rgba(0,0,0,0.1); + background-position: calc(100% - 10px) 10px; +} + +#new-packaged-project, +#new-hosted-project { + background-color: #EEE; + border: none; + border-top: 1px solid #DDD; + padding: 10px; + font-weight: bold; +} + +#new-packaged-project:hover, +#new-hosted-project:hover { + background-color: #DDD; +} + +#new-hosted-project-wrapper { + display: flex; + align-items: center; +} + +#new-packaged-project, +#new-hosted-project-click { + background-image: url('plus.svg'); + background-size: 20px; + background-repeat: no-repeat; + cursor: pointer; +} + +#new-hosted-project-click { + background-position: top right; + width: 20px; + height: 20px; + margin-left: 5px; +} + +#url-input { + flex-grow: 1; + width: 90%; + box-shadow: none; + border-radius: 3px; + border: 1px solid #DDD; + padding: 4px; + margin-top: 4px; +} + + +/********* LENSE ***********/ + + +#lense { + height: 100%; + flex-grow: 1; + display: flex; + z-index: 1; + overflow: hidden; + background-color: rgb(225, 225, 225); + background-image: url('rocket.svg'), url('noise.png'); + background-repeat: no-repeat, repeat; + background-size: 35%, auto; + background-position: center center, top left; +} + +#lense > div { + display: flex; + flex-grow: 1; + flex-direction: column; +} + + +/********* PROJECT ***********/ + + +.project-details { + background-color: rgb(225, 225, 225); + padding: 10px; + line-height: 160%; + display: flex; + flex-direction: column; +} + +.project-metadata { + flex-grow: 1; +} + +.project-status { + display: flex; +} + +.project-title { + flex-direction: row; + display: flex; + align-items: flex-start; + padding-bottom: 10px; + border-bottom: 1px solid #CCC; + margin-bottom: 10px; +} + +.project-title > h1 { + flex-grow: 1; + font-size: 24px; +} + +.project-location { + color: gray; + font-size: 10px; + cursor: pointer; + font-family: monospace; +} + +.project-location:hover { + text-decoration: underline; +} + +.project-header { + display: flex; + border-bottom: 1px solid #CCC; + margin: 10px 20px 10px 20px; + padding-bottom: 10px; +} + +.project-icon { + flex-shrink: 0; + width: 64px; + height: 64px; + margin-right: 10px; +} + +.project-location { + font-size: 11px; + color: #999; +} + +.project-description { + font-style: italic; + color: #333; +} + +.project-status > p { + text-transform: uppercase; + font-size: 10px; + padding: 2px 10px; + border-radius: 2px; + margin-top: 6px; + line-height: 10px; +} + +.project-validation { + color: #FFF; + display: none; + margin-left: 10px; +} + +.project-validation.valid { + background-color: #70BF53; +} + +.project-validation.warning { + background-color: #F2B33F; +} + +.project-validation.error { + background-color: #ED4C62; +} + +[status="valid"] > .project-validation.valid, +[status~="warning"] > .project-validation.warning, +[status~="error"] > .project-validation.error { + display: inline; +} + +.project-type { + display: none; + margin-left: 10px; +} +[type="hosted"] > .project-type.hosted, +[type="packaged"] > .project-type.packaged { + display: inline; +} + +/********* PROJECT BUTTONS ***********/ + + + +.project-buttons { + display: flex; + margin-left: 20px; + color: #BBB; +} + +.project-buttons > button { + margin: 0; + font-size: 11px; + border: 1px solid #CCC; + border-left-width: 0; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; +} + +.project-buttons > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.project-buttons > button:first-child { + border-left-width: 1px; +} + +.project-button-debug { + color: #3498DB; +} + +.project-button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.project-button-debug[disabled] { + color: #3498DB; +} + +.project-button-update { + color: #777; +} + +.project-button-update:hover { + background-color: #777; + color: #FFF; +} + +.project-button-update[disabled] { + color: #777; +} + + + +/********* ERRORS AND WARNINGS ***********/ + +.project-warnings, +.project-errors, +.project-item-warnings, +.project-item-errors { + display: none; +} + +[status~="warning"] .project-item-warnings, +[status~="error"] .project-item-errors { + display: inline-block; +} + +[status~="warning"] > .project-warnings, +[status~="error"] > .project-errors { + display: block; +} + +.project-warnings, +.project-errors { + margin: 20px 20px 0; + padding: 10px 10px; + font-family: monospace; +} + +.project-warnings { + border-left: 3px solid #ECB51E; + background-color: rgba(236, 181, 20, 0.1); +} + +.project-errors { + border-left: 3px solid #ED4C62; + background-color: rgba(237,76,98,0.1); +} + +.project-item-warnings { + background-image: url('warning.svg'); +} + +.project-item-errors { + background-image: url('error.svg'); + color: rgb(227, 79, 34); +} + +.project-item-warnings, +.project-item-errors { + background-repeat: no-repeat; + background-size: 12px; + background-position: left center; + margin-top: 6px; +} + +.project-item-warnings > span, +.project-item-errors > span { + font-size: 11px; + padding-left: 16px; + font-weight: bold; +} + + +/********* MANIFEST EDITOR ***********/ + +.manifest-editor { + display: flex; + flex-direction: column; + flex-grow: 1; + background-color: #E1E1E1; +} + +.manifest-header { + display: flex; + flex-direction: row; +} + +.manifest-header > h2 { + font-size: 18px; + margin: 1em 15px 1em 30px; + display: none; +} + +.manifest-header > button { + margin: 18px 0; + font-size: 11px; + border: 1px solid #CCC; + border-right-width: 0; + padding: 2px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + display: none; +} + +.manifest-header > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.manifest-header > button:last-child { + border-right-width: 1px; +} + +[type="packaged"] > .editable { + display: block; +} + +[type="hosted"] > .viewable { + display: block; +} + +.manifest-button-save { + color: #777; +} + +.manifest-button-save:hover { + background-color: #777; + color: #FFF; +} + +.manifest-button-save[disabled] { + color: #777; +} + +.variables-view { + flex-grow: 1; + border: 0; + border-top: 5px solid #C9C9C9; +} + +/* Bug 925921: Remove when the manifest editor is always on */ + +.manifest-editor { + display: none; +} + +.project-details { + flex-grow: 1; +} + +#lense[manifest-editable] .manifest-editor { + display: flex; +} + +#lense[manifest-editable] .project-details { + flex-grow: 0; +} + +/* End blocks to remove */ diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg new file mode 100644 index 0000000..3d36871 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg new file mode 100644 index 0000000..95c42a4 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg new file mode 100644 index 0000000..89e7c6f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/arrow-e.png b/arc-firefox-theme/chrome/browser/devtools/arrow-e.png new file mode 100644 index 0000000..cfa950a Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/arrow-e.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png b/arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png new file mode 100644 index 0000000..c628ca0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png new file mode 100644 index 0000000..9ce5dd7 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png new file mode 100644 index 0000000..5f28c8b Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png new file mode 100644 index 0000000..22c3c86 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css new file mode 100644 index 0000000..69e847c --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css @@ -0,0 +1,451 @@ +/* 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 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; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#empty-notice > button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#empty-notice > button .button-text { + display: none; +} + +#waiting-notice { + font-size: 110%; +} + +/* Snapshots pane */ + +#snapshots-pane > tabs { + -moz-border-end: 1px solid; +} + +#snapshots-pane .devtools-toolbar { + -moz-border-end: 1px solid; +} + +.theme-dark #snapshots-pane > tabs, +.theme-dark #snapshots-pane .devtools-toolbar { + -moz-border-end-color: black; /* Match the splitter color. */ +} + +.theme-light #snapshots-pane > tabs, +.theme-light #snapshots-pane .devtools-toolbar { + -moz-border-end-color: #aaa; /* Match the splitter color. */ +} + +#record-snapshot { + list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg"); +} + +#record-snapshot[checked] { + list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg"); +} + +/* Snapshots items */ + +.snapshot-item-thumbnail { + image-rendering: -moz-crisp-edges; + background-image: 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)); + background-size: 12px 12px, 12px 12px; + background-position: 0px 0px, 6px 6px; + background-repeat: repeat, repeat; +} + +.snapshot-item-thumbnail[flipped=true] { + transform: scaleY(-1); +} + +.theme-dark .snapshot-item-thumbnail { + background-color: #000; +} + +.theme-light .snapshot-item-thumbnail { + background-color: #fff; +} + +.snapshot-item-details { + -moz-padding-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 */ + +#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#resume { + list-style-image: url(debugger-play.png); + -moz-image-region: rect(0px,32px,16px,16px); +} + +#step-over { + list-style-image: url(debugger-step-over.png); +} + +#step-in { + list-style-image: url(debugger-step-in.png); +} + +#step-out { + list-style-image: url(debugger-step-out.png); +} + +@media (min-resolution: 1.25dppx) { + #resume { + list-style-image: url(debugger-play@2x.png); + -moz-image-region: rect(0px,64px,32px,32px); + } + + #step-over { + list-style-image: url(debugger-step-over@2x.png); + } + + #step-in { + list-style-image: url(debugger-step-in@2x.png); + } + + #step-out { + list-style-image: url(debugger-step-out@2x.png); + } +} + +#debugging-controls > toolbarbutton { + transition: opacity 0.15s ease-in-out; +} + +#debugging-controls > toolbarbutton[disabled=true] { + opacity: 0.5; +} + +#calls-slider { + -moz-padding-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 .side-menu-widget-item { + padding: 0; +} + +/* Calls list items */ + +.theme-dark #calls-list .side-menu-widget-item { + border-color: #111; + border-bottom-color: transparent; +} + +.theme-light #calls-list .side-menu-widget-item { + border-color: #eee; + border-bottom-color: transparent; +} + +.theme-dark .call-item-view:hover { + background-color: rgba(255,255,255,.025); +} + +.theme-light .call-item-view:hover { + background-color: rgba(0,0,0,.025); +} + +.theme-dark .call-item-view[draw-call] { + background-color: rgba(112,191,83,0.15); +} + +.theme-light .call-item-view[draw-call] { + background-color: rgba(44,187,15,0.1); +} + +.theme-dark .call-item-view[interesting-call] { + background-color: rgba(223,128,255,0.15); +} + +.theme-light .call-item-view[interesting-call] { + background-color: rgba(184,46,229,0.1); +} + +.call-item-gutter { + width: calc(3em + 22px); + -moz-padding-start: 22px; + -moz-padding-end: 4px; + padding-top: 2px; + padding-bottom: 2px; + -moz-border-end: 1px solid; + -moz-margin-end: 6px; +} + +.selected .call-item-gutter { + background-image: url("editor-debug-location.png"); + background-repeat: no-repeat; + background-position: 6px center; + background-size: 12px; +} + +@media (min-resolution: 1.25dppx) { + .selected .call-item-gutter { + background-image: url("editor-debug-location@2x.png"); + } +} + +.call-item-gutter { + background-color: var(--theme-sidebar-background); + color: var(--theme-content-color3); + border-color: var(--theme-splitter-color); +} + +.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 { + -moz-padding-start: 2px; + -moz-padding-end: 6px; + text-align: end; + cursor: pointer; + color: var(--theme-highlight-bluegrey); +} + +.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; +} + +.theme-dark .call-item-location { + border-color: #111; +} + +.theme-light .call-item-location { + border-color: #eee; +} + +.call-item-stack { + -moz-padding-start: calc(3em + 22px); + 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 { + -moz-padding-start: 2px; + -moz-padding-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-image: 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)); + background-size: 30px 30px, 30px 30px; + background-position: 0px 0px, 15px 15px; + background-repeat: repeat, repeat; +} + +.theme-dark #screenshot-container { + background-color: #000; +} + +.theme-light #screenshot-container { + background-color: #fff; +} + +@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 { + overflow: hidden; +} + +.theme-dark #snapshot-filmstrip { + border-top: 1px solid #000; + color: var(--theme-selection-color); +} + +.theme-light #snapshot-filmstrip { + border-top: 1px solid #aaa; + color: var(--theme-body-color-alt); +} + +.filmstrip-thumbnail { + image-rendering: -moz-crisp-edges; + background-image: 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)); + 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; + transition: opacity 0.1s ease-in-out; +} + +.filmstrip-thumbnail[flipped=true] { + transform: scaleY(-1); +} + +.theme-dark .filmstrip-thumbnail { + background-color: #000; +} + +.theme-light .filmstrip-thumbnail { + background-color: #fff; +} + +.filmstrip-thumbnail { + -moz-border-end: 1px solid var(--theme-splitter-color) +} + +#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/arc-firefox-theme/chrome/browser/devtools/close.png b/arc-firefox-theme/chrome/browser/devtools/close.png new file mode 100644 index 0000000..b539412 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/close.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/close@2x.png b/arc-firefox-theme/chrome/browser/devtools/close@2x.png new file mode 100644 index 0000000..79ef6ce Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/close@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-console.png b/arc-firefox-theme/chrome/browser/devtools/command-console.png new file mode 100644 index 0000000..5c3740e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-console.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-console@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-console@2x.png new file mode 100644 index 0000000..00bdc35 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-console@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png new file mode 100644 index 0000000..a96b8eb Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png new file mode 100644 index 0000000..edfe4c1 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-frames.png b/arc-firefox-theme/chrome/browser/devtools/command-frames.png new file mode 100755 index 0000000..5c37ccb Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-frames.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png new file mode 100755 index 0000000..84b37d3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png new file mode 100644 index 0000000..244fb3c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png new file mode 100644 index 0000000..77435bf Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-pick.png b/arc-firefox-theme/chrome/browser/devtools/command-pick.png new file mode 100644 index 0000000..37ce97c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-pick.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png new file mode 100644 index 0000000..88d739e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png new file mode 100644 index 0000000..2cad915 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png new file mode 100644 index 0000000..6fce404 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers.png new file mode 100644 index 0000000..ae7c705 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-rulers.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png new file mode 100644 index 0000000..8378959 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png new file mode 100644 index 0000000..f9470b4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png new file mode 100644 index 0000000..ea5630f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-screenshot.png b/arc-firefox-theme/chrome/browser/devtools/command-screenshot.png new file mode 100644 index 0000000..f6da8e9 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-screenshot.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png new file mode 100644 index 0000000..b7cdced Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-tilt.png b/arc-firefox-theme/chrome/browser/devtools/command-tilt.png new file mode 100644 index 0000000..6909b0a Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-tilt.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png new file mode 100644 index 0000000..2c35d19 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline-icon.png b/arc-firefox-theme/chrome/browser/devtools/commandline-icon.png new file mode 100644 index 0000000..e51f67f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/commandline-icon.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png b/arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png new file mode 100644 index 0000000..407fdae Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline.css b/arc-firefox-theme/chrome/browser/devtools/commandline.css new file mode 100644 index 0000000..7666eed --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/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: #ebeced; /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */ + --gcli-input-color: #18191a; /* --theme-body-color */ + --gcli-border-color: #aaaaaa; /* --theme-splitter-color */ +} + +:root[devtoolstheme="dark"] { + --gcli-background-color: #343c45; /* --theme-toolbar-background */ + --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ + --gcli-input-color: #b6babf; /* --theme-body-color-alt */ + --gcli-border-color: black; /* --theme-splitter-color */ +} + +.gcli-body { + margin: 0; + font: message-box; + color: 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); + -moz-padding-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 { + -moz-padding-start: 8px; +} + +.gcli-menu-desc { + -moz-padding-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; + -moz-padding-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/arc-firefox-theme/chrome/browser/devtools/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css new file mode 100644 index 0000000..9cbb98d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/common.css @@ -0,0 +1,264 @@ + +:root { + font: message-box; + --monospace-font-family: monospace; +} + +.devtools-monospace { + font-family: var(--monospace-font-family); + font-size: 80%; +} + +/* Splitters */ +.devtools-horizontal-splitter { + -moz-appearance: none; + background-image: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid rgba(118, 121, 125, .5); + min-height: 3px; + height: 3px; + margin-top: -3px; + position: relative; +} + +.devtools-side-splitter { + -moz-appearance: none; + background-image: none; + background-color: transparent; + border: 0; + -moz-border-end: 1px solid rgba(118, 121, 125, .5); + min-width: 3px; + width: 3px; + -moz-margin-start: -3px; + position: relative; + cursor: e-resize; +} + +.devtools-toolbox-side-iframe { + min-width: 465px; +} + +/* Autocomplete Popup */ +/* Dark and light theme */ + +.devtools-autocomplete-popup { + -moz-appearance: none !important; + box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; + background-color: transparent; + border-radius: 3px; + overflow-x: hidden; + max-height: 32rem; +} + +.devtools-autocomplete-listbox { + -moz-appearance: none !important; + background-color: transparent; + border-width: 0px !important; +} + +.devtools-autocomplete-listbox > richlistitem, +.devtools-autocomplete-listbox > richlistitem[selected] { + width: 100%; + background-color: transparent; + border-radius: 4px; +} + +.devtools-autocomplete-listbox.dark-theme > richlistitem[selected], +.devtools-autocomplete-listbox.dark-theme > richlistitem:hover { + background-color: rgba(0,0,0,0.5); +} + +.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value, +.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value { + color: hsl(208,100%,60%); +} + +.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label { + color: #eee; +} + +.devtools-autocomplete-listbox.dark-theme > richlistitem > label { + color: #ccc; +} + +.devtools-autocomplete-listbox > richlistitem > .initial-value, +.devtools-autocomplete-listbox > richlistitem > .autocomplete-value { + margin: 0; + padding: 1px 0; +} + +.devtools-autocomplete-listbox > richlistitem > .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; +} + +.devtools-autocomplete-listbox.light-theme > richlistitem[selected], +.devtools-autocomplete-listbox.light-theme > richlistitem:hover { + background-color: rgba(128,128,128,0.3); +} + +.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value, +.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value { + color: #222; +} + +.devtools-autocomplete-listbox.light-theme > richlistitem > label { + color: #666; +} + +/* Tooltip widget (see browser/devtools/shared/widgets/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: Alert Icon */ + +.devtools-tooltip-alert-icon { + width: 32px; + height: 32px; + margin: 6px; + -moz-margin-end: 20px; +} + +.devtools-tooltip-alert-icon { + list-style-image: url("chrome://global/skin/icons/warning-32.png"); +} + +/* 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 { + -moz-padding-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; +} + +/* Eyedropper Widget */ + +.devtools-eyedropper-panel { + pointer-events: none; + -moz-appearance: none; + width: 156px; + height: 120px; + background-color: transparent; + border: 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; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css new file mode 100644 index 0000000..b920d7b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -0,0 +1,208 @@ +/* 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/. */ + +/* From content */ + +* { + box-sizing: border-box; +} + +:root { + height: 100%; +} + +body { + margin: 0; + display : flex; + flex-direction: column; + height: 100%; +} + +#propertyContainer { + -moz-user-select: text; + overflow: auto; + min-height: 0; + flex: 1; +} + +.row-striped { + background: var(--theme-body-background); +} + +.property-view-hidden, +.property-content-hidden { + display: none; +} + +.property-view { + clear: both; + padding: 2px 0 2px 17px; +} + +.property-view > * { + display: inline-block; + vertical-align: middle; +} + +.property-name { + /* -12px is so the expander triangle isn't pushed up above the property */ + width: calc(100% - 12px); + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + outline: 0; +} + +.property-value, .other-property-value { + background-image: url(arrow-e.png); + background-repeat: no-repeat; + background-size: 5px 8px; +} + +@media (min-resolution: 1.25dppx) { + .property-value, .other-property-value { + background-image: url(arrow-e@2x.png); + } +} + +.property-value { + width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background-position: 2px center; + padding-left: 10px; + outline: 0; +} + +.other-property-value { + background-position: left center; + padding-left: 8px; +} + +@media (min-width: 400px) { + .property-name { + width: 200px; + } + .property-value { + /* -212px is accounting for the 200px property-name and the 12px triangle */ + width: calc(100% - 212px); + } +} + +.property-content { + padding-left: 17px; +} + +/* From skin */ +.expander { + visibility: hidden; + margin-left: -12px!important; +} + +.expandable { + visibility: visible; +} + +.match { + visibility: hidden; +} + +.matchedselectors > p { + clear: both; + margin: 0 2px 0 0; + 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; +} + +/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ +.rule-text { + direction: ltr; +} + +.matched { + text-decoration: line-through; +} + +.parentmatch { + opacity: 0.5; +} + +#noResults { + font-size: 110%; + margin: 5px; + text-align: center; +} + +.onlyuserstyles { + cursor: pointer; +} + +.legendKey { + margin: 0 5px; +} + +#root .devtools-toolbar { + width: 100%; + display: -moz-box; +} + +.link { + padding: 0 3px; + cursor: pointer; + float: right; +} + +/* 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: 1em; + height: 1em; + vertical-align: text-top; + -moz-margin-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/arc-firefox-theme/chrome/browser/devtools/controls.png b/arc-firefox-theme/chrome/browser/devtools/controls.png new file mode 100644 index 0000000..569c266 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/controls.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/controls@2x.png b/arc-firefox-theme/chrome/browser/devtools/controls@2x.png new file mode 100644 index 0000000..fb06251 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/controls@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png new file mode 100644 index 0000000..2dcb58a Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png new file mode 100644 index 0000000..64dbef8 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css new file mode 100644 index 0000000..4068fb0 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -0,0 +1,1458 @@ +/* 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/. */ + +/* 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. + */ +:root { + --theme-body-background: #14171a; + --theme-sidebar-background: #181d20; + --theme-contrast-background: #b28025; + + --theme-tab-toolbar-background: #252c33; + --theme-toolbar-background: #343c45; + --theme-selection-background: #1d4f73; + --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); + --theme-selection-color: #f5f7fa; + --theme-splitter-color: black; + --theme-comment: #757873; + + --theme-body-color: #8fa1b2; + --theme-body-color-alt: #b6babf; + --theme-content-color1: #a9bacb; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #5f7387; + + --theme-highlight-green: #70bf53; + --theme-highlight-blue: #46afe3; + --theme-highlight-bluegrey: #5e88b0; + --theme-highlight-purple: #6b7abb; + --theme-highlight-lightorange: #d99b28; + --theme-highlight-orange: #d96629; + --theme-highlight-red: #eb5368; + --theme-highlight-pink: #df80ff; + + /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ + --theme-graphs-green: #70bf53; + --theme-graphs-blue: #46afe3; + --theme-graphs-purple: #df80ff; + --theme-graphs-yellow: #d99b28; + --theme-graphs-red: #eb5368; + --theme-graphs-grey: #757873; +} + +.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 { + 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, +.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: #0f171f; + color: var(--theme-content-color3); + border-color: #303b47; +} + +.theme-separator { /* grey */ + border-color: #303b47; +} + +.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-green); +} + +.CodeMirror-Tern-completion-number:before { + background-color: #5c9966; +} + +.theme-fg-color2, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-variable, +.cm-s-mozilla .cm-def, +.cm-s-mozilla .cm-property, +.cm-s-mozilla .cm-qualifier, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-blue); +} + +.CodeMirror-Tern-completion-object:before { + background-color: #3689b2; +} + +.cm-s-mozilla .cm-unused-line { + text-decoration: line-through; + text-decoration-color: #5f88b0; +} + +.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-pink); +} + +.CodeMirror-Tern-completion-array:before { + background-color: var(--theme-highlight-bluegrey); +} + +.theme-fg-color4 { + color: var(--theme-highlight-purple); +} + +.theme-fg-color5, +.cm-s-mozilla .cm-keyword { + color: var(--theme-highlight-lightorange); +} + +.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-orange); +} + +.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, +.CodeMirror-dialog { /* General toolbar styling */ + color: var(--theme-body-color-alt); + background-color: var(--theme-toolbar-background); + border-color: hsla(210,8%,5%,.6); +} + +.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 { /* Inherit platform specific font sizing and styles */ + font-family: inherit; + font-size: inherit; + background: transparent; +} + +.CodeMirror 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); +} + +/* Highlight for a line that represents a stack frame's location. */ +div.CodeMirror div.debug-line { + background: rgba(0,128,255,0.1); + box-shadow: + 0 1px 0 0 rgba(0,128,255,0.4), + 0 -1px 0 0 rgba(0,128,255,0.4); +} + +/* Generic highlighted text */ +div.CodeMirror span.marked-text { + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); + -moz-margin-start: -1px; + -moz-margin-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; +} + +/* Twisty and checkbox controls */ +.theme-twisty, .theme-checkbox { + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-image: url("chrome://browser/skin/devtools/controls.png"); + background-size: 56px 28px; +} + +.theme-twisty { + cursor: pointer; + background-position: -28px -14px; +} + +.theme-twisty:-moz-focusring { + outline-style: none; +} + +.theme-twisty[open] { + background-position: -42px -14px; +} + +.theme-twisty[invisible] { + visibility: hidden; +} + +.theme-checkbox { + display: inline-block; + border: 0; + padding: 0; + outline: none; + background-position: -28px 0; +} + +.theme-checkbox[checked] { + background-position: -42px 0; +} + +@media (min-resolution: 1.25dppx) { + .theme-twisty, .theme-checkbox { + background-image: url("chrome://browser/skin/devtools/controls@2x.png"); + } +} + +/* XUL panel styling (see browser/devtools/shared/widgets/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[side="top"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); + margin-bottom: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); + margin-top: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); + margin-right: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); + margin-left: -4px; +} + +@media (min-resolution: 1.25dppx) { + .theme-tooltip-panel .panel-arrow[side="top"], + .theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/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 { + 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); +} + + + +/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ +.theme-light { + --searchbox-background-color: #ffee99; + --searchbox-border-color: #ffbf00; + --searcbox-no-match-background-color: #ffe5e5; + --searcbox-no-match-border-color: #e52e2e; +} + +.theme-dark { + --searchbox-background-color: #4d4222; + --searchbox-border-color: #d99f2b; + --searcbox-no-match-background-color: #402325; + --searcbox-no-match-border-color: #cc3d3d; +} + +/* 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; +} + +/* Toolbar buttons */ +.devtools-menulist, +.devtools-toolbarbutton { + -moz-appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 78px; + min-height: 18px; + padding: 1px; + text-shadow: none; + border: none; + border-radius: 0; + margin: 2px 3px; + color: inherit; + transition: background 0.05s ease-in-out; + color: var(--theme-content-color1); + background-color: var(--theme-toolbar-background); +} + +.devtools-menulist:-moz-focusring, +.devtools-toolbarbutton:-moz-focusring { + outline: 1px dotted hsla(210,30%,85%,0.7); + outline-offset: -4px; +} + +.devtools-toolbarbutton[standalone] { + -moz-margin-end: 5px; + border-width: 1px; + border-style: solid; +} +.devtools-toolbarbutton[label][standalone] { + min-height: 2em; +} + +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 32px; +} + +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { + -moz-padding-start: 5px; + -moz-padding-end: 5px; + min-width: inherit; +} + +/* Command buttons with menupopups should be styled slightly differently - + no background color and a bit more narrow */ +#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { + background: transparent; +} +#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { + padding: 0 2px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbar .devtools-toolbarbutton { + border-width: 0; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { + margin: 0; +} + +.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 { + -moz-margin-end: 4px; +} + +.devtools-menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/dropmarker.svg"); + -moz-box-align: center; + padding: 0 3px; +} + +.theme-dark .devtools-menulist, +.theme-dark .devtools-toolbarbutton { + border-color: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-menulist, +.theme-light .devtools-toolbarbutton { + border-color: rgba(170, 170, 170, .5); /* Splitters */ +} + +/* Text-only buttons */ +.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(170, 170, 170, .2); /* Splitter */ +} +.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(0, 0, 0, .2); /* Splitter */ +} + +/* Button States */ +.theme-dark .devtools-toolbarbutton:not([disabled]):hover, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-toolbarbutton[checked=true], +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(29, 79, 115, .7); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-toolbarbutton[checked=true], +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(76, 158, 217, .2); /* Select highlight blue */ +} + +.theme-dark .devtools-menulist[open=true], +.theme-dark .devtools-toolbarbutton[open=true], +.theme-dark .devtools-toolbarbutton[open=true]:hover, +.theme-dark .devtools-toolbarbutton[open=true]:hover:active, +.theme-dark .devtools-toolbarbutton[checked=true]:hover { + background: rgba(29, 79, 115, .8); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-menulist[open=true], +.theme-light .devtools-toolbarbutton[open=true], +.theme-light .devtools-toolbarbutton[open=true]:hover, +.theme-light .devtools-toolbarbutton[open=true]:hover:active, +.theme-light .devtools-toolbarbutton[checked=true]:hover { + background: rgba(76, 158, 217, .4); /* Select highlight blue */ +} + +.devtools-option-toolbarbutton { + -moz-appearance: none; + list-style-image: url("chrome://browser/skin/devtools/tool-options.svg"); + background: none; + opacity: .8; + border: none; +} + +.devtools-option-toolbarbutton[open=true] { + opacity: 1; +} + +/* Toolbar button groups */ +.devtools-toolbarbutton-group > .devtools-toolbarbutton { + margin-left: 1px; + margin-right: 1px; + outline-offset: -3px; + box-shadow: none; +} + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { + -moz-margin-end: 0; +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { + -moz-margin-start: 3px; +} + +.devtools-separator + .devtools-toolbarbutton { + -moz-margin-start: 1px; +} + +/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ + +.devtools-button { + border: 0 solid var(--theme-splitter-color); + background: var(--theme-toolbar-background); + margin: 0; + padding: 0; + min-width: 32px; + min-height: 18px; + /* The icon is absolutely positioned in the button using ::before */ + position: relative; +} + +.devtools-button[standalone] { + min-height: 32px; + border-width: 1px; +} + +/* Button States */ +.theme-dark .devtools-button:not([disabled]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-button:not([disabled]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-button[checked] { + background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-button[checked] { + background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ +} + +.devtools-button::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-repeat: no-repeat; +} + +@media (min-resolution: 1.25dppx) { + .devtools-button::before { + background-size: 32px; + } +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput { + -moz-appearance: none; + margin: 0 3px; + border: 1px solid; + border-radius: 2px; + padding: 4px 6px; + border-color: var(--theme-splitter-color); +} + +.devtools-searchinput { + margin-top: 1px; + margin-bottom: 1px; + padding: 0; + -moz-padding-start: 22px; + -moz-padding-end: 4px; + background-position: 8px center; + background-size: 11px 11px; + background-repeat: no-repeat; + font-size: inherit; +} + +.theme-dark .devtools-searchinput { + background-image: url(magnifying-glass.png); +} + +.theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light.png); +} + +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { + visibility: hidden; +} + +/* Searchbox is a div container element for a search input element */ +.devtools-searchbox { + display: -moz-box; + -moz-box-flex: 1; + position: relative; +} + +.devtools-rule-searchbox { + -moz-box-flex: 1; + padding-right: 23px; + width: 100%; + font: inherit; +} + +.devtools-rule-searchbox[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-no-search-result { + border-color: var(--theme-highlight-red) !important; +} + +.devtools-searchinput-clear { + position: absolute; + top: 3.5px; + right: 7px; + padding: 0; + border: 0; + width: 16px; + height: 16px; + background-position: 0 0; + background-repeat: no-repeat; + background-color: transparent; +} + +.theme-dark .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); +} + +.theme-light .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); +} + +.devtools-style-searchbox-no-match + .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/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 { + list-style-image: url("chrome://browser/skin/devtools/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 { + list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 1.25dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } +} + +/* Close button */ + +.devtools-closebutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; + opacity: 0.8; +} + +.devtools-closebutton > image { + width: 16px; + height: 16px; + -moz-appearance: none; + background-size: 16px 16px; + background-image: url("chrome://browser/skin/devtools/close@2x.png"); + background-position: center center; + background-repeat: no-repeat; +} + +.devtools-closebutton > .toolbarbutton-icon { + /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must + use evil CSS to give the impression of smaller content */ + margin: -4px; +} + +.devtools-closebutton > .toolbarbutton-text { + display: none; +} + +.devtools-closebutton:hover { + opacity: 1; +} + +/* In-tools sidebar */ +.devtools-sidebar-tabs { + -moz-appearance: none; + margin: 0; +} + +.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; + -moz-border-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; + -moz-border-start-width: 1px; + border-style: solid; + border-radius: 0; + position: static; + text-shadow: none; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + -moz-border-start-width: 0; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected], +.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: #ddd; + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected], +.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); +} + +/* Toolbox - moved from toolbox.css. + * Rules that apply to the global toolbox like command buttons, + * devtools tabs, docking buttons, etc. */ + +#toolbox-controls > toolbarbutton, +#toolbox-dock-buttons > toolbarbutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; +} + +#toolbox-controls > toolbarbutton > .toolbarbutton-text, +#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, +.command-button > .toolbarbutton-text { + display: none; +} + +#toolbox-dock-buttons > toolbarbutton > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 16px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} + +#toolbox-dock-bottom > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png"); +} + +#toolbox-dock-side > image { + background-image: url("chrome://browser/skin/devtools/dock-side@2x.png"); +} + +#toolbox-dock-window > image { + background-image: url("chrome://browser/skin/devtools/undock@2x.png"); +} + +#toolbox-dock-window, +#toolbox-dock-bottom, +#toolbox-dock-side { + opacity: 0.8; +} + +#toolbox-dock-window:hover, +#toolbox-dock-bottom:hover, +#toolbox-dock-side:hover { + opacity: 1; +} + +.devtools-separator { + margin: 0 2px; + width: 2px; + background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), + linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), + linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; +} + +/* Command buttons */ + +.command-button { + -moz-appearance: none; + border: none; + padding: 0 8px; + margin: 0; + width: 32px; + position: relative; +} + +.command-button:hover { + background-color: hsla(206,37%,4%,.2); +} +.command-button:hover:active, .command-button[checked=true]:not(:hover) { + background-color: hsla(206,37%,4%,.4); +} + +.command-button > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 64px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} +.command-button:hover > image { + background-position: -16px center; +} +.command-button:hover:active > image { + background-position: -32px center; +} +.command-button[checked=true] > image { + background-position: -48px center; +} +.command-button[open=true] > image { + background-position: 0 center; +} + +#command-button-paintflashing > image { + background-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); +} + +#command-button-screenshot > image { + background-image: url("chrome://browser/skin/devtools/command-screenshot.png"); +} + +#command-button-responsive > image { + background-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); +} + +#command-button-tilt > image { + background-image: url("chrome://browser/skin/devtools/command-tilt.png"); +} + +#command-button-scratchpad > image { + background-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); + background-size: 48px 16px; +} + +#command-button-pick > image { + background-image: url("chrome://browser/skin/devtools/command-pick.png"); +} + +#command-button-frames > image { + background-image: url("chrome://browser/skin/devtools/command-frames.png"); +} + +#command-button-splitconsole > image { + background-image: url("chrome://browser/skin/devtools/command-console.png"); +} + +#command-button-eyedropper > image { + background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); +} + +#command-button-rulers > image { + background-image: url("chrome://browser/skin/devtools/command-rulers.png"); +} + +@media (min-resolution: 1.25dppx) { + #command-button-paintflashing > image { + background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); + } + + #command-button-screenshot > image { + background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png"); + } + + #command-button-responsive > image { + background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png"); + } + + #command-button-tilt > image { + background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png"); + } + + #command-button-scratchpad > image { + background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png"); + } + + #command-button-pick > image { + background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); + } + + #command-button-frames > image { + background-image: url("chrome://browser/skin/devtools/command-frames@2x.png"); + } + + #command-button-splitconsole > image { + background-image: url("chrome://browser/skin/devtools/command-console@2x.png"); + } + + #command-button-eyedropper > image { + background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); + } + + #command-button-rulers > image { + background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); + } +} + +/* Tabs */ + +.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); +} + +.theme-light .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; +} + +.theme-dark .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; +} + +#toolbox-tabs { + margin: 0; +} + +.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: 110px; + margin: 0; + padding: 0; + border-style: solid; + border-width: 0; + -moz-border-start-width: 1px; + -moz-box-align: center; +} + +.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 { + background-color: hsla(206,37%,4%,.2); + color: #ced3d9; +} + +.theme-light .devtools-tab:hover { + background-color: rgba(170,170,170,.2); +} + +.theme-dark .devtools-tab:hover:active { + background-color: hsla(206,37%,4%,.4); + color: var(--theme-selection-color); +} + +.theme-light .devtools-tab:hover:active { + background-color: rgba(170,170,170,.4); +} + +.devtools-tab:not([selected])[highlighted] { + box-shadow: 0 2px 0 var(--theme-highlight-green) inset; +} + +.theme-dark .devtools-tab:not([selected])[highlighted] { + background-color: hsla(99,100%,14%,.2); +} + +.theme-light .devtools-tab:not([selected])[highlighted] { + background-color: rgba(44, 187, 15, .2); +} + +.devtools-tab > image { + border: none; + -moz-margin-end: 0; + -moz-margin-start: 4px; + opacity: 0.6; + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +.devtools-tab > label { + white-space: nowrap; +} + +.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); +} + +.theme-dark .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.2) inset; +} + +.theme-light .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.06) inset; +} + +#toolbox-tabs .devtools-tab[selected], +#toolbox-tabs .devtools-tab[highlighted] { + border-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab[selected]:last-child, +#toolbox-tabs .devtools-tab[highlighted]:last-child { + -moz-padding-end: 1px; +} + +#toolbox-tabs .devtools-tab[selected] + .devtools-tab, +#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { + -moz-border-start-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab:first-child[selected] { + -moz-border-start-width: 0; +} + +#toolbox-tabs .devtools-tab:last-child { + -moz-border-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; + -moz-padding-start: 1px; +} +#toolbox-tab-options > image { + margin: 0 8px; +} + +/* Invert the colors of certain dark theme images for displaying + * inside of the light theme. + */ +.theme-light .devtools-tab[icon-invertable] > image, +.theme-light #toolbox-dock-buttons > toolbarbutton > image, +.theme-light .command-button-invertable > image, +.theme-light .command-button-invertable:active > image, +.theme-light .devtools-closebutton > image, +.theme-light .devtools-toolbarbutton > image, +.theme-light .devtools-option-toolbarbutton > image, +.theme-light #breadcrumb-separator-normal, +.theme-light .scrollbutton-up > .toolbarbutton-icon, +.theme-light .scrollbutton-down > .toolbarbutton-icon, +.theme-light #black-boxed-message-button .button-icon, +.theme-light .notice-container button .button-icon, +.theme-light #requests-menu-perf-notice-button .button-icon, +.theme-light #requests-menu-network-summary-button .button-icon, +.theme-light .event-tooltip-debugger-icon, +.theme-light .devtools-button::before { + filter: url(filters.svg#invert); +} + +/* Since selected backgrounds are blue, we want to use the normal + * (light) icons. */ +.theme-light .command-button-invertable[checked=true]:not(:active) > image, +.theme-light .devtools-tab[icon-invertable][selected] > image, +.theme-light .devtools-tab[icon-invertable][highlighted] > image, +.theme-light #record-snapshot[checked] > image, +.theme-light #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { + filter: none !important; +} + +.theme-light .command-button:hover { + background-color: inherit; +} + +.theme-light .command-button:hover:active, +.theme-light .command-button[checked=true]:not(:hover) { + background-color: inherit; +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} + +.devtools-invisible-splitter { + border-color: transparent; +} + +.devtools-horizontal-splitter { + border-bottom: 1px solid var(--theme-splitter-color); +} + +.devtools-side-splitter { + -moz-border-end: 1px solid var(--theme-splitter-color); + border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ +} + +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + -moz-margin-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/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png new file mode 100644 index 0000000..c64f4bb Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png new file mode 100644 index 0000000..2dd33d2 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png new file mode 100644 index 0000000..9573fc7 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png new file mode 100644 index 0000000..12f7223 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-expand.png b/arc-firefox-theme/chrome/browser/devtools/debugger-expand.png new file mode 100644 index 0000000..f317997 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-expand.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png new file mode 100644 index 0000000..091601f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-pause.png b/arc-firefox-theme/chrome/browser/devtools/debugger-pause.png new file mode 100644 index 0000000..8288bdf Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-pause.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png new file mode 100644 index 0000000..53ed141 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-play.png b/arc-firefox-theme/chrome/browser/devtools/debugger-play.png new file mode 100644 index 0000000..9189a0a Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-play.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png new file mode 100644 index 0000000..5fe68e1 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png new file mode 100644 index 0000000..fb59dcc Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png new file mode 100644 index 0000000..e3791bf Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png new file mode 100644 index 0000000..b16b706 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png new file mode 100644 index 0000000..c0b4500 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png new file mode 100644 index 0000000..859c727 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png new file mode 100644 index 0000000..1c19679 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png new file mode 100644 index 0000000..ec28fc0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png new file mode 100644 index 0000000..452f0d4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png new file mode 100644 index 0000000..c4b7dcb Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png new file mode 100644 index 0000000..b8bbadd Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css new file mode 100644 index 0000000..c313820 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css @@ -0,0 +1,672 @@ +/* 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/. */ + +/* 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 { + -moz-border-end: 1px solid; +} + +#sources-pane .devtools-toolbar { + border: none; /* Remove the devtools-toolbar bottom border. */ + -moz-border-end: 1px solid; +} + +#sources-pane > tabs, +#sources-pane .devtools-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +/* Sources and breakpoints list */ + +.dbg-source-item { + padding: 2px 0px; +} + +.dbg-breakpoint-line { + font-weight: 600; +} + +.dbg-breakpoint-text { + -moz-padding-start: 6px; + font-style: italic; + font-size: 90%; +} + +.dbg-breakpoint-checkbox { + width: 16px; + height: 16px; + margin: 2px; +} + +.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; + -moz-padding-start: 0; +} + +/* Sources toolbar */ + +#sources-toolbar > .devtools-toolbarbutton, +#sources-controls > .devtools-toolbarbutton { + min-width: 32px; +} + +#black-box { + list-style-image: url(debugger-blackbox.png); +} + +@media (min-resolution: 1.25dppx) { + #black-box { + list-style-image: url(debugger-blackbox@2x.png); + } +} + +#pretty-print { + list-style-image: url(debugger-prettyprint.png); +} + +@media (min-resolution: 1.25dppx) { + #pretty-print { + list-style-image: url(debugger-prettyprint@2x.png); + } +} + +#toggle-breakpoints { + list-style-image: url(debugger-toggleBreakpoints.png); +} + +@media (min-resolution: 1.25dppx) { + #toggle-breakpoints { + list-style-image: url(debugger-toggleBreakpoints@2x.png); + } +} + +#sources-toolbar .devtools-toolbarbutton:not([label]) { + -moz-image-region: rect(0px,16px,16px,0px); +} + +#sources-toolbar .devtools-toolbarbutton:not([label])[checked] { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.25dppx) { + #sources-toolbar .devtools-toolbarbutton:not([label]) { + -moz-image-region: rect(0px,32px,32px,0px); + } + + #sources-toolbar .devtools-toolbarbutton:not([label])[checked] { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +#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(debugger-blackbox.png); + background-position: 0 0; + background-size: 32px 16px; + background-repeat: no-repeat; + -moz-margin-end: 5px; +} + +@media (min-resolution: 1.25dppx) { + #black-boxed-message-button > .button-box > .button-icon { + background-image: url(debugger-blackbox@2x.png); + } +} + +/* 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 { + -moz-padding-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(tracer-icon.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#trace[checked] { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.25dppx) { + #trace { + list-style-image: url(tracer-icon@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #trace[checked] { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +#clear-tracer { + /* Make this button as narrow as the text inside it. */ + min-width: 1px; +} + +.trace-name { + -moz-padding-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(29,79,115,.4); /* Select highlight blue at 40% alpha */ +} + +.theme-dark .selected > .trace-item { + background-color: rgba(29,79,115,.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: url(commandline-icon.png); + background-position: -16px 0; + background-repeat: no-repeat; + background-size: 32px 16px; + width: 16px; + height: 16px; + margin: 2px; +} + +@media (min-resolution: 1.25dppx) { + .dbg-expression-arrow { + background-image: url(commandline-icon@2x.png); + } +} + +.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; + -moz-margin-start: 1px; +} + +#filter-label { + -moz-margin-start: 2px; +} + +#searchbox-panel-operators { + margin-top: 5px; + margin-bottom: 8px; + -moz-margin-start: 2px; +} + +.searchbox-panel-operator-button { + min-width: 26px; + margin-top: 0; + margin-bottom: 0; + -moz-margin-start: 2px; + -moz-margin-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 { + -moz-padding-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 { + -moz-padding-start: 6px; +} + +.dbg-results-header-location { + font-weight: 600; +} + +.dbg-results-header-match-count { + -moz-padding-start: 6px; +} + +.dbg-results-line-number { + min-width: 3em; + -moz-border-end: 1px solid rgba(128,128,128,0.2); + -moz-padding-end: 4px; + text-align: end; +} + +.dbg-results-line-contents { + -moz-padding-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(29,79,115,.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 */ + +#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, +#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#resume { + list-style-image: url(debugger-pause.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#resume[checked] { + list-style-image: url(debugger-play.png); +} + +@media (min-resolution: 1.25dppx) { + #resume { + list-style-image: url(debugger-pause@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #resume[checked] { + list-style-image: url(debugger-play@2x.png); + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +#resume ~ toolbarbutton { + transition: opacity 0.15s ease-in-out; +} + +#resume:not([checked]) ~ toolbarbutton { + opacity: 0.5; +} + +#step-over { + list-style-image: url(debugger-step-over.png); +} + +#step-in { + list-style-image: url(debugger-step-in.png); +} + +#step-out { + list-style-image: url(debugger-step-out.png); +} + +@media (min-resolution: 1.25dppx) { + #step-over { + list-style-image: url(debugger-step-over@2x.png); + } + + #step-in { + list-style-image: url(debugger-step-in@2x.png); + } + + #step-out { + list-style-image: url(debugger-step-out@2x.png); + } +} + +#instruments-pane-toggle { + background: none; + box-shadow: none; + border: none; + list-style-image: url(debugger-collapse.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#instruments-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand.png); +} + +#instruments-pane-toggle:hover { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.25dppx) { + #instruments-pane-toggle { + list-style-image: url(debugger-collapse@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #instruments-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand@2x.png); + } + + #instruments-pane-toggle:hover { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +/* Horizontal vs. vertical layout */ + +#vertical-layout-panes-container { + min-height: 35vh; + max-height: 80vh; +} + +#body[layout=vertical] #sources-pane > tabs { + -moz-border-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 { + -moz-margin-end: 0; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png new file mode 100644 index 0000000..d5df16f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png new file mode 100644 index 0000000..17de7f1 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg new file mode 100644 index 0000000..09b65c7 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png new file mode 100644 index 0000000..401f26b Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png new file mode 100644 index 0000000..d590573 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png new file mode 100644 index 0000000..b1dd7ee Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-error.png b/arc-firefox-theme/chrome/browser/devtools/editor-error.png new file mode 100644 index 0000000..39ef81e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/editor-error.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/eyedropper.css b/arc-firefox-theme/chrome/browser/devtools/eyedropper.css new file mode 100644 index 0000000..cf22caf --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/eyedropper.css @@ -0,0 +1,45 @@ +/* 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/. */ + +#canvas { + image-rendering: -moz-crisp-edges; + cursor: none; + border: 3px solid #E0E0E0; + border-radius: 50%; +} + +#canvas-overflow { + overflow: hidden; + width: 96px; + height: 96px; +} + +#color-preview { + width: 16px; + height: 16px; + box-shadow: 0px 0px 0px black; + border: solid 1px #fff; + margin: 3px; +} + +#color-value-box { + background-color: #E0E0E0; + border-radius: 1px; + width: 150px; +} + +#color-value { + padding: 0.3em; + text-shadow: 1px 1px 1px #fff; +} + +#color-value.highlight { + font-family: inherit; +} + +window { + /* inexplicably, otherwise background shows up on Linux */ + border: 1px solid transparent; + background-color: transparent; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward.png new file mode 100644 index 0000000..f2c6c52 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/fast-forward.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png new file mode 100644 index 0000000..4c3cf88 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg new file mode 100644 index 0000000..e8ff440 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg new file mode 100644 index 0000000..fd8209d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg @@ -0,0 +1,4 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg new file mode 100644 index 0000000..809e098 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg new file mode 100644 index 0000000..95be627 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg new file mode 100644 index 0000000..37dcab4 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg new file mode 100644 index 0000000..916028b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css new file mode 100644 index 0000000..7e38611 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css @@ -0,0 +1,10 @@ +/* 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("floating-scrollbars.css"); + +scrollbar thumb { + background-color: rgba(170,170,170,0.2) !important; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css new file mode 100644 index 0000000..ff70d64 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -0,0 +1,33 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +scrollbar { + -moz-appearance: none !important; + position: relative; + background-color: transparent; + background-image: none; + z-index: 2147483647; + padding: 2px; +} + +scrollbar[orient="vertical"] { + -moz-margin-start: -10px; + min-width: 10px; + max-width: 10px; +} + +scrollbar[orient="horizontal"] { + margin-top: -10px; + min-height: 10px; + max-height: 10px; +} + +scrollbar thumb { + -moz-appearance: none !important; + border-width: 0px !important; + background-color: rgba(170,170,170,0.2) !important; + border-radius: 3px !important; +} + +scrollbar scrollbarbutton, scrollbar gripper { + display: none; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css new file mode 100644 index 0000000..30424df --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css @@ -0,0 +1,77 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding-bottom: 20px; +} + +#all-fonts { + padding: 0; + margin: 0; +} + +#showall { + border-radius: 0; + border: 1px solid black; + margin: 3px; + cursor: pointer; + position: fixed; + bottom: 0; + right: 0; +} + +.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/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css new file mode 100644 index 0000000..cab78e7 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css @@ -0,0 +1,155 @@ +/* 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/. */ + + +#inspector-searchbox { + transition-property: max-width, -moz-padding-end, -moz-padding-start; + transition-duration: 250ms; + transition-timing-function: ease; +} + +#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box { + overflow: hidden; +} + +#inspector-searchbox:not([focused]):not([filled]) { + max-width: 20px !important; + -moz-padding-end: 5px; + -moz-padding-start: 22px; + background-position: 8px center, top left, top left; +} + +#inspector-searchbox[focused], +#inspector-searchbox[filled] { + max-width: 200px !important; +} + +/* Expand/collapse panel toolbar button */ + +#inspector-pane-toggle { + background: none; + box-shadow: none; + border: none; + list-style-image: url(debugger-collapse.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#inspector-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#inspector-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand.png); +} + +#inspector-pane-toggle:active { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.25dppx) { + #inspector-pane-toggle { + list-style-image: url(debugger-collapse@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #inspector-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand@2x.png); + } + + #inspector-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +/* Tooltip: Events */ + +#devtools-tooltip-events-container { + margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ + max-width: 590px; + overflow-y: auto; +} + +.event-header { + display: flex; + align-items: center; + cursor: pointer; +} + +.event-tooltip-event-type, +.event-tooltip-filename, +.event-tooltip-attributes { + -moz-margin-start: 0; + flex-shrink: 0; + cursor: pointer; +} + +.event-tooltip-event-type { + font-weight: bold; + font-size: 13px; +} + +.event-tooltip-filename { + -moz-margin-end: 0; + font-size: 100%; + flex-shrink: 1; +} + +.event-tooltip-debugger-icon { + width: 16px; + height: 16px; + -moz-margin-end: 4px; + opacity: 0.6; + flex-shrink: 0; +} + +.event-tooltip-debugger-icon:hover { + opacity: 1; +} + +.event-tooltip-content-box { + display: none; + overflow: auto; + -moz-margin-end: 0; +} + +.event-tooltip-content-box[open] { + display: block; +} + +.event-tooltip-source-container { + margin-top: 5px; + margin-bottom: 10px; + -moz-margin-start: 5px; + -moz-margin-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; + border-radius: 3px; + padding: 2px; + -moz-margin-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; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg new file mode 100644 index 0000000..7bd7028 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg @@ -0,0 +1,4 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg new file mode 100644 index 0000000..9315d9e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg new file mode 100644 index 0000000..93913c9 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg @@ -0,0 +1,4 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg new file mode 100755 index 0000000..e580b88 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg @@ -0,0 +1,4 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemToggle.png b/arc-firefox-theme/chrome/browser/devtools/itemToggle.png new file mode 100644 index 0000000..dc30c22 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/itemToggle.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png b/arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png new file mode 100644 index 0000000..9042128 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css new file mode 100644 index 0000000..8027a4c --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css @@ -0,0 +1,60 @@ +/* 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-sidebar { + box-sizing: border-box; +} + +#main { + background-color: white; + border-color: hsla(210,100%,85%,0.7); + border-style: dotted; + color: var(--theme-selection-color); +} + +.margin, +.size { + color: var(--theme-highlight-blue); +} + +#content { + background-color: #87ceeb; + border-color: hsl(210,100%,85%); + border-style: dotted; +} + +#padding, +#margins { + border-color: hsla(210,100%,85%,0.2); + outline: dotted 1px hsl(210,100%,85%); +} + +#padding { + background-color: #6a5acd; +} + +#borders { + background-color: #444444; + border-style: dotted; + border-color: hsl(210,100%,85%); +} + +#margins { + background-color: #edff64; + /* This opacity applies to all of the regions, since they are nested. */ + opacity: .8; +} + +.editable { + border: 1px dashed transparent; +} + +.editable:hover { + border-bottom-color: hsl(0,0%,50%); +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; + padding: 0; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css new file mode 100644 index 0000000..ac6a511 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -0,0 +1,1456 @@ +/* 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/. */ + +/* 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. + */ +:root { + --theme-body-background: #fcfcfc; + --theme-sidebar-background: #f7f7f7; + --theme-contrast-background: #e6b064; + + --theme-tab-toolbar-background: #ebeced; + --theme-toolbar-background: #f0f1f2; + --theme-selection-background: #4c9ed9; + --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); + --theme-selection-color: #f5f7fa; + --theme-splitter-color: #aaaaaa; + --theme-comment: #757873; + + --theme-body-color: #18191a; + --theme-body-color-alt: #585959; + --theme-content-color1: #292e33; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #667380; + + --theme-highlight-green: #2cbb0f; + --theme-highlight-blue: #0088cc; + --theme-highlight-bluegrey: #5f88b0; + --theme-highlight-purple: #5b5fff; + --theme-highlight-lightorange: #d97e00; + --theme-highlight-orange: #f13c00; + --theme-highlight-red: #ed2655; + --theme-highlight-pink: #b82ee5; + + /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ + --theme-graphs-green: #85d175; + --theme-graphs-blue: #83b7f6; + --theme-graphs-purple: #b693eb; + --theme-graphs-yellow: #efc052; + --theme-graphs-red: #e57180; + --theme-graphs-grey: #cccccc; +} + +.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: hsl(0,0%,90%); + color: var(--theme-content-color3); + border-color: hsl(0,0%,65%); +} + +.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-green); +} + +.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-def, +.cm-s-mozilla .cm-property, +.cm-s-mozilla .cm-qualifier, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-blue); +} + +.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, +.variables-view-property > .title > .name { + color: var(--theme-highlight-bluegrey); +} + +.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-lightorange); +} + +.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-orange); +} + +.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, +.CodeMirror-dialog { /* General toolbar styling */ + color: var(--theme-body-color-alt); + 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 { /* Inherit platform specific font sizing and styles */ + font-family: inherit; + font-size: inherit; + background: transparent; +} + +.CodeMirror 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); +} + +/* Highlight for a line that represents a stack frame's location. */ +div.CodeMirror div.debug-line { + background: rgba(0,128,255,0.1); + box-shadow: + 0 1px 0 0 rgba(0,128,255,0.4), + 0 -1px 0 0 rgba(0,128,255,0.4); +} + +/* Generic highlighted text */ +div.CodeMirror span.marked-text { + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); + -moz-margin-start: -1px; + -moz-margin-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; +} + +/* Twisty and checkbox controls */ + +.theme-twisty, .theme-checkbox { + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-image: url("chrome://browser/skin/devtools/controls.png"); + background-size: 56px 28px; +} + +.theme-twisty { + cursor: pointer; + background-position: 0 -14px; +} + +.theme-twisty:-moz-focusring { + outline-style: none; +} + +.theme-twisty[open] { + background-position: -14px -14px; +} + +.theme-twisty[invisible] { + visibility: hidden; +} + +/* Use white twisty when next to a selected item in markup view */ +.theme-selected ~ .theme-twisty { + background-position: -28px -14px; +} + +.theme-selected ~ .theme-twisty[open] { + background-position: -42px -14px; +} + +.theme-checkbox { + display: inline-block; + border: 0; + padding: 0; + outline: none; + background-position: 0 0; +} + +.theme-checkbox[checked] { + background-position: -14px 0; +} + +@media (min-resolution: 1.25dppx) { + .theme-twisty, .theme-checkbox { + background-image: url("chrome://browser/skin/devtools/controls@2x.png"); + } +} + +/* XUL panel styling (see browser/devtools/shared/widgets/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[side="top"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png"); + margin-bottom: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png"); + margin-top: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png"); + margin-right: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png"); + margin-left: -4px; +} + +@media (min-resolution: 1.25dppx) { + .theme-tooltip-panel .panel-arrow[side="top"], + .theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/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); +} + + + +/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ +.theme-light { + --searchbox-background-color: #ffee99; + --searchbox-border-color: #ffbf00; + --searcbox-no-match-background-color: #ffe5e5; + --searcbox-no-match-border-color: #e52e2e; +} + +.theme-dark { + --searchbox-background-color: #4d4222; + --searchbox-border-color: #d99f2b; + --searcbox-no-match-background-color: #402325; + --searcbox-no-match-border-color: #cc3d3d; +} + +/* 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; +} + +/* Toolbar buttons */ +.devtools-menulist, +.devtools-toolbarbutton { + -moz-appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 78px; + min-height: 18px; + padding: 1px; + text-shadow: none; + border: none; + border-radius: 0; + margin: 2px 3px; + color: inherit; + transition: background 0.05s ease-in-out; + color: var(--theme-content-color1); + background-color: var(--theme-toolbar-background); +} + +.devtools-menulist:-moz-focusring, +.devtools-toolbarbutton:-moz-focusring { + outline: 1px dotted hsla(210,30%,85%,0.7); + outline-offset: -4px; +} + +.devtools-toolbarbutton[standalone] { + -moz-margin-end: 5px; + border-width: 1px; + border-style: solid; +} +.devtools-toolbarbutton[label][standalone] { + min-height: 2em; +} + +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 32px; +} + +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { + -moz-padding-start: 5px; + -moz-padding-end: 5px; + min-width: inherit; +} + +/* Command buttons with menupopups should be styled slightly differently - + no background color and a bit more narrow */ +#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { + background: transparent; +} +#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { + padding: 0 2px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbar .devtools-toolbarbutton { + border-width: 0; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { + margin: 0; +} + +.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 { + -moz-margin-end: 4px; +} + +.devtools-menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/dropmarker.svg"); + -moz-box-align: center; + padding: 0 3px; +} + +.theme-dark .devtools-menulist, +.theme-dark .devtools-toolbarbutton { + border-color: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-menulist, +.theme-light .devtools-toolbarbutton { + border-color: rgba(170, 170, 170, .5); /* Splitters */ +} + +/* Text-only buttons */ +.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(170, 170, 170, .2); /* Splitter */ +} +.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(0, 0, 0, .2); /* Splitter */ +} + +/* Button States */ +.theme-dark .devtools-toolbarbutton:not([disabled]):hover, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-toolbarbutton[checked=true], +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(29, 79, 115, .7); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-toolbarbutton[checked=true], +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(76, 158, 217, .2); /* Select highlight blue */ +} + +.theme-dark .devtools-menulist[open=true], +.theme-dark .devtools-toolbarbutton[open=true], +.theme-dark .devtools-toolbarbutton[open=true]:hover, +.theme-dark .devtools-toolbarbutton[open=true]:hover:active, +.theme-dark .devtools-toolbarbutton[checked=true]:hover { + background: rgba(29, 79, 115, .8); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-menulist[open=true], +.theme-light .devtools-toolbarbutton[open=true], +.theme-light .devtools-toolbarbutton[open=true]:hover, +.theme-light .devtools-toolbarbutton[open=true]:hover:active, +.theme-light .devtools-toolbarbutton[checked=true]:hover { + background: rgba(76, 158, 217, .4); /* Select highlight blue */ +} + +.devtools-option-toolbarbutton { + -moz-appearance: none; + list-style-image: url("chrome://browser/skin/devtools/tool-options.svg"); + background: none; + opacity: .8; + border: none; +} + +.devtools-option-toolbarbutton[open=true] { + opacity: 1; +} + +/* Toolbar button groups */ +.devtools-toolbarbutton-group > .devtools-toolbarbutton { + margin-left: 1px; + margin-right: 1px; + outline-offset: -3px; + box-shadow: none; +} + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { + -moz-margin-end: 0; +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { + -moz-margin-start: 3px; +} + +.devtools-separator + .devtools-toolbarbutton { + -moz-margin-start: 1px; +} + +/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ + +.devtools-button { + border: 0 solid var(--theme-splitter-color); + background: var(--theme-toolbar-background); + margin: 0; + padding: 0; + min-width: 32px; + min-height: 18px; + /* The icon is absolutely positioned in the button using ::before */ + position: relative; +} + +.devtools-button[standalone] { + min-height: 32px; + border-width: 1px; +} + +/* Button States */ +.theme-dark .devtools-button:not([disabled]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-button:not([disabled]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-button[checked] { + background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-button[checked] { + background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ +} + +.devtools-button::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-repeat: no-repeat; +} + +@media (min-resolution: 1.25dppx) { + .devtools-button::before { + background-size: 32px; + } +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput { + -moz-appearance: none; + margin: 0 3px; + border: 1px solid; + border-radius: 2px; + padding: 4px 6px; + border-color: var(--theme-splitter-color); +} + +.devtools-searchinput { + margin-top: 1px; + margin-bottom: 1px; + padding: 0; + -moz-padding-start: 22px; + -moz-padding-end: 4px; + background-position: 8px center; + background-size: 11px 11px; + background-repeat: no-repeat; + font-size: inherit; +} + +.theme-dark .devtools-searchinput { + background-image: url(magnifying-glass.png); +} + +.theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light.png); +} + +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { + visibility: hidden; +} + +/* Searchbox is a div container element for a search input element */ +.devtools-searchbox { + display: -moz-box; + -moz-box-flex: 1; + position: relative; +} + +.devtools-rule-searchbox { + -moz-box-flex: 1; + padding-right: 23px; + width: 100%; + font: inherit; +} + +.devtools-rule-searchbox[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-no-search-result { + border-color: var(--theme-highlight-red) !important; +} + +.devtools-searchinput-clear { + position: absolute; + top: 3.5px; + right: 7px; + padding: 0; + border: 0; + width: 16px; + height: 16px; + background-position: 0 0; + background-repeat: no-repeat; + background-color: transparent; +} + +.theme-dark .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); +} + +.theme-light .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); +} + +.devtools-style-searchbox-no-match + .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/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 { + list-style-image: url("chrome://browser/skin/devtools/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 { + list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 1.25dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } +} + +/* Close button */ + +.devtools-closebutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; + opacity: 0.8; +} + +.devtools-closebutton > image { + width: 16px; + height: 16px; + -moz-appearance: none; + background-size: 16px 16px; + background-image: url("chrome://browser/skin/devtools/close@2x.png"); + background-position: center center; + background-repeat: no-repeat; +} + +.devtools-closebutton > .toolbarbutton-icon { + /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must + use evil CSS to give the impression of smaller content */ + margin: -4px; +} + +.devtools-closebutton > .toolbarbutton-text { + display: none; +} + +.devtools-closebutton:hover { + opacity: 1; +} + +/* In-tools sidebar */ +.devtools-sidebar-tabs { + -moz-appearance: none; + margin: 0; +} + +.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; + -moz-border-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; + -moz-border-start-width: 1px; + border-style: solid; + border-radius: 0; + position: static; + text-shadow: none; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + -moz-border-start-width: 0; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected], +.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: #ddd; + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected], +.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); +} + +/* Toolbox - moved from toolbox.css. + * Rules that apply to the global toolbox like command buttons, + * devtools tabs, docking buttons, etc. */ + +#toolbox-controls > toolbarbutton, +#toolbox-dock-buttons > toolbarbutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; +} + +#toolbox-controls > toolbarbutton > .toolbarbutton-text, +#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, +.command-button > .toolbarbutton-text { + display: none; +} + +#toolbox-dock-buttons > toolbarbutton > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 16px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} + +#toolbox-dock-bottom > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png"); +} + +#toolbox-dock-side > image { + background-image: url("chrome://browser/skin/devtools/dock-side@2x.png"); +} + +#toolbox-dock-window > image { + background-image: url("chrome://browser/skin/devtools/undock@2x.png"); +} + +#toolbox-dock-window, +#toolbox-dock-bottom, +#toolbox-dock-side { + opacity: 0.8; +} + +#toolbox-dock-window:hover, +#toolbox-dock-bottom:hover, +#toolbox-dock-side:hover { + opacity: 1; +} + +.devtools-separator { + margin: 0 2px; + width: 2px; + background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), + linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), + linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; +} + +/* Command buttons */ + +.command-button { + -moz-appearance: none; + border: none; + padding: 0 8px; + margin: 0; + width: 32px; + position: relative; +} + +.command-button:hover { + background-color: hsla(206,37%,4%,.2); +} +.command-button:hover:active, .command-button[checked=true]:not(:hover) { + background-color: hsla(206,37%,4%,.4); +} + +.command-button > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 64px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} +.command-button:hover > image { + background-position: -16px center; +} +.command-button:hover:active > image { + background-position: -32px center; +} +.command-button[checked=true] > image { + background-position: -48px center; +} +.command-button[open=true] > image { + background-position: 0 center; +} + +#command-button-paintflashing > image { + background-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); +} + +#command-button-screenshot > image { + background-image: url("chrome://browser/skin/devtools/command-screenshot.png"); +} + +#command-button-responsive > image { + background-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); +} + +#command-button-tilt > image { + background-image: url("chrome://browser/skin/devtools/command-tilt.png"); +} + +#command-button-scratchpad > image { + background-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); + background-size: 48px 16px; +} + +#command-button-pick > image { + background-image: url("chrome://browser/skin/devtools/command-pick.png"); +} + +#command-button-frames > image { + background-image: url("chrome://browser/skin/devtools/command-frames.png"); +} + +#command-button-splitconsole > image { + background-image: url("chrome://browser/skin/devtools/command-console.png"); +} + +#command-button-eyedropper > image { + background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); +} + +#command-button-rulers > image { + background-image: url("chrome://browser/skin/devtools/command-rulers.png"); +} + +@media (min-resolution: 1.25dppx) { + #command-button-paintflashing > image { + background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); + } + + #command-button-screenshot > image { + background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png"); + } + + #command-button-responsive > image { + background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png"); + } + + #command-button-tilt > image { + background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png"); + } + + #command-button-scratchpad > image { + background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png"); + } + + #command-button-pick > image { + background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); + } + + #command-button-frames > image { + background-image: url("chrome://browser/skin/devtools/command-frames@2x.png"); + } + + #command-button-splitconsole > image { + background-image: url("chrome://browser/skin/devtools/command-console@2x.png"); + } + + #command-button-eyedropper > image { + background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); + } + + #command-button-rulers > image { + background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); + } +} + +/* Tabs */ + +.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); +} + +.theme-light .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; +} + +.theme-dark .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; +} + +#toolbox-tabs { + margin: 0; +} + +.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: 110px; + margin: 0; + padding: 0; + border-style: solid; + border-width: 0; + -moz-border-start-width: 1px; + -moz-box-align: center; +} + +.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 { + background-color: hsla(206,37%,4%,.2); + color: #ced3d9; +} + +.theme-light .devtools-tab:hover { + background-color: rgba(170,170,170,.2); +} + +.theme-dark .devtools-tab:hover:active { + background-color: hsla(206,37%,4%,.4); + color: var(--theme-selection-color); +} + +.theme-light .devtools-tab:hover:active { + background-color: rgba(170,170,170,.4); +} + +.devtools-tab:not([selected])[highlighted] { + box-shadow: 0 2px 0 var(--theme-highlight-green) inset; +} + +.theme-dark .devtools-tab:not([selected])[highlighted] { + background-color: hsla(99,100%,14%,.2); +} + +.theme-light .devtools-tab:not([selected])[highlighted] { + background-color: rgba(44, 187, 15, .2); +} + +.devtools-tab > image { + border: none; + -moz-margin-end: 0; + -moz-margin-start: 4px; + opacity: 0.6; + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +.devtools-tab > label { + white-space: nowrap; +} + +.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); +} + +.theme-dark .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.2) inset; +} + +.theme-light .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.06) inset; +} + +#toolbox-tabs .devtools-tab[selected], +#toolbox-tabs .devtools-tab[highlighted] { + border-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab[selected]:last-child, +#toolbox-tabs .devtools-tab[highlighted]:last-child { + -moz-padding-end: 1px; +} + +#toolbox-tabs .devtools-tab[selected] + .devtools-tab, +#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { + -moz-border-start-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab:first-child[selected] { + -moz-border-start-width: 0; +} + +#toolbox-tabs .devtools-tab:last-child { + -moz-border-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; + -moz-padding-start: 1px; +} +#toolbox-tab-options > image { + margin: 0 8px; +} + +/* Invert the colors of certain dark theme images for displaying + * inside of the light theme. + */ +.theme-light .devtools-tab[icon-invertable] > image, +.theme-light #toolbox-dock-buttons > toolbarbutton > image, +.theme-light .command-button-invertable > image, +.theme-light .command-button-invertable:active > image, +.theme-light .devtools-closebutton > image, +.theme-light .devtools-toolbarbutton > image, +.theme-light .devtools-option-toolbarbutton > image, +.theme-light #breadcrumb-separator-normal, +.theme-light .scrollbutton-up > .toolbarbutton-icon, +.theme-light .scrollbutton-down > .toolbarbutton-icon, +.theme-light #black-boxed-message-button .button-icon, +.theme-light .notice-container button .button-icon, +.theme-light #requests-menu-perf-notice-button .button-icon, +.theme-light #requests-menu-network-summary-button .button-icon, +.theme-light .event-tooltip-debugger-icon, +.theme-light .devtools-button::before { + filter: url(filters.svg#invert); +} + +/* Since selected backgrounds are blue, we want to use the normal + * (light) icons. */ +.theme-light .command-button-invertable[checked=true]:not(:active) > image, +.theme-light .devtools-tab[icon-invertable][selected] > image, +.theme-light .devtools-tab[icon-invertable][highlighted] > image, +.theme-light #record-snapshot[checked] > image, +.theme-light #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { + filter: none !important; +} + +.theme-light .command-button:hover { + background-color: inherit; +} + +.theme-light .command-button:hover:active, +.theme-light .command-button[checked=true]:not(:hover) { + background-color: inherit; +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} + +.devtools-invisible-splitter { + border-color: transparent; +} + +.devtools-horizontal-splitter { + border-bottom: 1px solid var(--theme-splitter-color); +} + +.devtools-side-splitter { + -moz-border-end: 1px solid var(--theme-splitter-color); + border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ +} + +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + -moz-margin-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/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png new file mode 100644 index 0000000..e8c1841 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png new file mode 100644 index 0000000..d784870 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png new file mode 100644 index 0000000..bd09ffb Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png new file mode 100644 index 0000000..1784285 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/markup-view.css b/arc-firefox-theme/chrome/browser/devtools/markup-view.css new file mode 100644 index 0000000..e1912d8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/markup-view.css @@ -0,0 +1,100 @@ +/* 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/. */ + +* { + padding: 0; + margin: 0; +} + +.more-nodes { + padding-left: 16px; +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; +} + + +/* 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); +} + +/* In case a node isn't displayed in the page, we fade the syntax highlighting */ +.not-displayed .open, +.not-displayed .close { + opacity: .7; +} + +.tag-line { + padding-left: 2px; +} + +/* Preview */ + +#previewbar { + position: fixed; + top: 0; + right: 0; + width: 90px; + background: black; + border-left: 1px solid; + border-bottom: 1px solid; + overflow: hidden; +} + +#previewbar { + background: var(--theme-tab-toolbar-background); + border-color: var(--theme-splitter-color); +} + +#preview { + position: absolute; + top: 0; + right: 5px; + width: 80px; + height: 100%; + background-image: -moz-element(#root); + background-repeat: no-repeat; +} + +#previewbar.hide, +#previewbar.disabled { + display: none; +} + +#viewbox { + position: absolute; + top: 0; + right: 5px; + width: 80px; + border: 1px dashed #888; + background: rgba(205,205,255,0.2); + outline: 1px solid transparent; +} + +/* Events */ +.markupview-events { + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0px 2px; + -moz-margin-start: 5px; + -moz-user-select: none; +} + +.markupview-events { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); +} diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css new file mode 100644 index 0000000..96ba494 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -0,0 +1,920 @@ +/* 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/. */ + +/* 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/. */ + +#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(profiler-stopwatch.svg); +} + +#requests-menu-perf-notice-button .button-text { + display: none; +} + +#requests-menu-reload-notice-button { + min-height: 26px; + margin: 0; +} + + +/* Network requests table */ + +#requests-menu-toolbar { + padding: 0; +} + +.requests-menu-header:first-child, +.requests-menu-subitem:first-child { + -moz-padding-start: 6px; +} + +.requests-menu-subitem { + padding: 3px; +} + +.theme-dark .requests-menu-header:not(:last-child), +.theme-dark .requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .requests-menu-header:not(:last-child), +.theme-light .requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: 1px 0 0 transparent; +} + +.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 transparent; +} + +.requests-menu-header-button { + -moz-appearance: none; + background: none; + min-width: 1px; + min-height: 24px; + margin: 0; + border: none; + padding: 0; + color: inherit; + font-weight: inherit !important; + transition: background-color 0.1s ease-in-out; +} + +.requests-menu-header-button:hover { + background: rgba(0,0,0,0.10); +} + +.requests-menu-header-button:hover:active { + background: rgba(0,0,0,0.25); +} + +.requests-menu-header-button:not(:active)[sorted] { + background: rgba(0,0,0,0.15); +} + +.requests-menu-header-button:not(:active)[sorted=ascending] { + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; +} + +.requests-menu-header-button:not(:active)[sorted=descending] { + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: bottom; +} + +/* Network requests table: specific column dimensions */ + +.requests-menu-status-and-method { + width: 12em; +} + +.requests-menu-status { + width: 20px; + height: 10px; +} + +.requests-menu-method { + text-align: center; + font-weight: 600; +} + +.requests-menu-icon-and-file { + width: 20vw; + min-width: 4em; +} + +.requests-menu-icon { + background: #fff; + width: calc(1em + 4px); + height: calc(1em + 4px); + margin: -4px 0px; + -moz-margin-end: 4px; +} + +.theme-dark .requests-menu-icon { + outline: 1px solid rgba(0,0,0,0.2); +} + +.theme-light .requests-menu-icon { + outline: 1px solid rgba(128,128,128,0.25); +} + +.requests-menu-file { + text-align: start; +} + +.requests-menu-security-and-domain { + width: 14vw; + min-width: 10em; +} + +.requests-security-state-icon { + -moz-margin-end: 4px; + -moz-image-region:rect(0px, 16px, 16px, 0px); +} + +.requests-security-state-icon:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +.requests-security-state-icon:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} + +.security-state-insecure { + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); +} + +.security-state-secure { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https.png); +} + +.security-state-weak { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); +} + +.security-state-broken { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); +} + +.requests-menu-type { + text-align: center; + width: 4em; +} + +.requests-menu-size { + text-align: center; + width: 8em; +} + +.requests-menu-transferred { + text-align: center; + width: 8em; +} + +/* Network requests table: status codes */ + +box.requests-menu-status { + background: #fff; + width: 10px; + -moz-margin-start: 5px; + -moz-margin-end: 5px; + border-radius: 10px; + transition: box-shadow 0.5s ease-in-out; +} + +label.requests-menu-status-code { + -moz-margin-start: 3px !important; + width: 3em; + -moz-margin-end: -3em !important; +} + +.theme-dark box.requests-menu-status:not([code]) { + background-color: rgba(95, 115, 135, 1); /* dark grey */ +} + +.theme-light box.requests-menu-status:not([code]) { + background-color: rgba(143, 161, 178, 1); /* grey */ +} + +.theme-dark box.requests-menu-status[code="cached"] { + border: 2px solid rgba(95, 115, 135, 1); /* dark grey */ + background-color: transparent; +} + +.theme-light box.requests-menu-status[code="cached"] { + border: 2px solid rgba(143, 161, 178, 1); /* grey */ + background-color: transparent; +} + +.theme-dark box.requests-menu-status[code^="1"] { + background-color: rgba(70, 175, 227, 1); /* light blue */ +} + +.theme-light box.requests-menu-status[code^="1"] { + background-color: rgba(0, 136, 204, 1); /* light blue */ +} + +.theme-dark box.requests-menu-status[code^="2"] { + background-color: rgba(112, 191, 83, 1); /* green */ +} + +.theme-light box.requests-menu-status[code^="2"] { + background-color: rgba(44, 187, 15, 1); /* green */ +} + +/* 3xx are triangles */ +.theme-dark box.requests-menu-status[code^="3"] { + background-color: transparent; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ + border-radius: 0; +} + +.theme-light box.requests-menu-status[code^="3"] { + background-color: transparent; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ + border-radius: 0; +} + +/* 4xx and 5xx are squares - error codes */ +.theme-dark box.requests-menu-status[code^="4"] { + background-color: rgba(235, 83, 104, 1); /* red */ + border-radius: 0; /* squares */ +} + +.theme-light box.requests-menu-status[code^="4"] { + background-color: rgba(237, 38, 85, 1); /* red */ + border-radius: 0; /* squares */ +} + +.theme-dark box.requests-menu-status[code^="5"] { + background-color: rgba(223, 128, 255, 1); /* pink? */ + border-radius: 0; + transform: rotate(45deg); +} + +.theme-light box.requests-menu-status[code^="5"] { + background-color: rgba(184, 46, 229, 1); /* pink! */ + border-radius: 0; + transform: rotate(45deg); +} + +/* Network requests table: waterfall header */ + +#requests-menu-waterfall-label { + -moz-padding-start: 8px; + -moz-padding-end: 8px; +} + +.requests-menu-timings-division { + width: 100px; + padding-top: 2px; + -moz-padding-start: 4px; + font-size: 75%; + pointer-events: none; +} + +.requests-menu-timings-division:not(:first-child) { + -moz-border-start: 1px dotted; + -moz-margin-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[division-scale=millisecond] { + -moz-border-start-color: var(--theme-selection-color) !important; +} + +.theme-light .requests-menu-timings-division[division-scale=millisecond] { + -moz-border-start-color: var(--theme-body-color-alt) !important; +} + +.theme-dark .requests-menu-timings-division[division-scale=second] { + -moz-border-start-color: var(--theme-selection-color) !important; + font-weight: 600; +} + +.theme-light .requests-menu-timings-division[division-scale=second] { + -moz-border-start-color: var(--theme-body-color-alt) !important; + font-weight: 600; +} + +.theme-dark .requests-menu-timings-division[division-scale=minute] { + -moz-border-start-color: var(--theme-selection-color) !important; + font-weight: 600; +} + +.theme-light .requests-menu-timings-division[division-scale=minute] { + -moz-border-start-color: var(--theme-body-color-alt) !important; + font-weight: 600; +} + +/* Network requests table: waterfall items */ + +.requests-menu-subitem.requests-menu-waterfall { + -moz-padding-start: 0px; + -moz-padding-end: 4px; + /* Background created on a in js. */ + /* @see browser/devtools/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 { + -moz-padding-start: 4px; + font-size: 85%; + font-weight: 600; +} + +.requests-menu-timings-box { + height: 9px; +} + +.requests-menu-timings-box.blocked { + background-color: rgba(235, 83, 104, 0.8); /* red */ +} + +.requests-menu-timings-box.dns { + background-color: rgba(223, 128, 255, 0.8); /* pink */ +} + +.requests-menu-timings-box.connect { + background-color: rgba(217, 102, 41, 0.8); /* orange */ +} + +/* Use custom colors for dark and light theme on remaining timing types. */ +.theme-dark .requests-menu-timings-box.send { + background-color: rgba(70, 175, 227, 0.8); /* light blue */ +} + +.theme-light .requests-menu-timings-box.send { + background-color: rgba(0, 136, 204, 0.8); /* blue */ +} + +.theme-dark .requests-menu-timings-box.wait { + background-color: rgba(94, 136, 176, 0.8); /* blue grey */ +} + +.theme-light .requests-menu-timings-box.wait { + background-color: rgba(95, 136, 176, 0.8); /* blue grey */ +} + +.theme-dark .requests-menu-timings-box.receive { + background-color: rgba(112, 191, 83, 0.8); /* green */ +} + +.theme-light .requests-menu-timings-box.receive { + background-color: rgba(44, 187, 15, 0.8); /* green */ +} + +/* SideMenuWidget */ + +.side-menu-widget-item-contents { + padding: 0px; +} + +.theme-dark .side-menu-widget-item:not(.selected)[odd] { + background: rgba(255,255,255,0.05); +} + +.theme-light .side-menu-widget-item:not(.selected)[odd] { + background: rgba(128,128,128,0.05); +} + +/* Network request details */ + +#details-pane-toggle { + background: none; + box-shadow: none; + border-color: transparent; + list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#details-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); +} + +#details-pane-toggle:active { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.25dppx) { + #details-pane-toggle { + list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png"); + } + + #details-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +/* Network request details tabpanels */ + +.theme-dark .tabpanel-content { + background-color: var(--theme-toolbar-background); + color: var(--theme-selection-color); +} + +/* Summary tabpanel */ + +.tabpanel-summary-container { + padding: 1px; +} + +.tabpanel-summary-label { + -moz-padding-start: 4px; + -moz-padding-end: 3px; + font-weight: 600; +} + +.tabpanel-summary-value { + color: inherit; + -moz-padding-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; + -moz-margin-end: 6px; +} + +#toggle-raw-headers { + margin-top: -10px; + -moz-margin-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; +} + +/* Security tabpanel */ +.security-info-section { + -moz-padding-start: 1em; +} + +#security-tabpanel { + overflow: auto; +} + +.security-warning-icon { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-margin-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 1.25dppx) { + .security-warning-icon { + background-image: url(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; +} + +/* Footer */ + +.theme-dark #requests-menu-footer { + border-top: 1px solid rgba(0,0,0,0.2); + box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset; + background-color: var(--theme-toolbar-background); +} + +.theme-light #requests-menu-footer { + border-top: 1px solid rgba(128,128,128,0.25); + box-shadow: 0 1px 0 transparent inset; + background-color: var(--theme-toolbar-background); +} + +.requests-menu-footer-button, +.requests-menu-footer-label { + min-width: 1em; + margin: 0; + border: none; + padding: 2px 1vw; +} + +.theme-dark .requests-menu-footer-button, +.theme-dark .requests-menu-footer-label { + color: var(--theme-selection-color); +} + +.theme-light .requests-menu-footer-button, +.theme-light .requests-menu-footer-label { + color: var(--theme-body-color); +} + +.requests-menu-footer-spacer { + min-width: 2px; +} + +.theme-dark .requests-menu-footer-spacer:not(:first-child), +.theme-dark .requests-menu-footer-button:not(:first-child) { + -moz-border-start: 1px solid rgba(128,128,128,0.15); + box-shadow: -1px 0 0 rgba(0,0,0,0.2); +} + +.theme-light .requests-menu-footer-spacer:not(:first-child), +.theme-light .requests-menu-footer-button:not(:first-child) { + -moz-border-start: 1px solid transparent; + box-shadow: -1px 0 0 rgba(128,128,128,0.25); +} + +.requests-menu-footer-button { + -moz-appearance: none; + background: rgba(0,0,0,0.025); +} + +.requests-menu-footer-button:hover { + background: rgba(0,0,0,0.10); +} + +.theme-dark .requests-menu-footer-button:hover:active { + background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ +} + +.theme-light .requests-menu-footer-button:hover:active { + background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ +} + +.theme-dark .requests-menu-footer-button:not(:active)[checked] { + background-color: rgba(29,79,115,1); /* Select Highlight Blue */ + color: rgba(245,247,250,1); /* Light foreground text */ +} + +.theme-light .requests-menu-footer-button:not(:active)[checked] { + background-color: rgba(76,158,217,1); /* Select Highlight Blue */ + color: rgba(245,247,250,1); /* Light foreground text */ +} + +.requests-menu-footer-label { + padding-top: 3px; + font-weight: 600; +} + +#requests-menu-filter-freetext-text { + transition-property: max-width, -moz-padding-end, -moz-padding-start; + transition-duration: 250ms; + transition-timing-function: ease; +} + +#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box { + overflow: hidden; +} + +#requests-menu-filter-freetext-text:not([focused]):not([filled]) { + max-width: 20px !important; + -moz-padding-end: 5px; + -moz-padding-start: 22px; + background-position: 8px center, top left, top left; +} + +#requests-menu-filter-freetext-text[focused], +#requests-menu-filter-freetext-text[filled] { + max-width: 200px !important; +} + +/* Performance analysis buttons */ + +#requests-menu-network-summary-button { + background: none; + box-shadow: none; + border-color: transparent; + list-style-image: url(profiler-stopwatch.svg); + -moz-padding-end: 0; + cursor: pointer; +} + +#requests-menu-network-summary-label { + -moz-padding-start: 0; + cursor: pointer; +} + +#requests-menu-network-summary-label:hover { + text-decoration: underline; +} + +/* 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; + -moz-border-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-toolbar-background); +} + +#network-statistics-charts .pie-chart-container { + -moz-margin-start: 3vw; + -moz-margin-end: 1vw; +} + +#network-statistics-charts .table-chart-container { + -moz-margin-start: 1vw; + -moz-margin-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; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #requests-menu-toolbar { + height: 22px; + } + + .requests-menu-header-button { + min-height: 20px; + } + + #details-pane { + margin: 0 !important; + /* To prevent all the margin hacks to hide the sidebar. */ + } + + .requests-menu-status-and-method { + width: 16vw; + } + + .requests-menu-icon-and-file { + width: 30vw; + } + + .requests-menu-security-and-domain { + width: 30vw; + } + + .requests-menu-type { + width: 8vw; + } + + .requests-menu-size { + width: 16vw; + border-width: 0 !important; + box-shadow: none !important; + /* The "Timeline" header is not visible anymore, and thus the + right border and box-shadow of "Size" column should be hidden. */ + } +} + +#headers-summary-resend { + padding: 4px; +} + +#toggle-raw-headers { + padding: 4px; +} + +.requests-menu-status-and-method { + width: 9em; +} + +.requests-menu-security-and-domain { + width: 16vw; +} + +.requests-menu-size { + width: 6em; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + .requests-menu-header-button { + font-size: 85%; + } +} diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png new file mode 100644 index 0000000..2d29c2c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png new file mode 100644 index 0000000..6feba0e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab.png b/arc-firefox-theme/chrome/browser/devtools/newtab.png new file mode 100644 index 0000000..32e42b0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/newtab.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab@2x.png b/arc-firefox-theme/chrome/browser/devtools/newtab@2x.png new file mode 100644 index 0000000..ffde5f0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/newtab@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/noise.png b/arc-firefox-theme/chrome/browser/devtools/noise.png new file mode 100644 index 0000000..01d340a Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/noise.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg new file mode 100644 index 0000000..3004e04 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css new file mode 100644 index 0000000..50c375c --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -0,0 +1,695 @@ +/* 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/. */ + +/* 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); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --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); +} + +/* Toolbar */ + +#performance-toolbar > tabs, +#performance-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#performance-toolbar-control-other { + -moz-padding-end: 5px; +} + +#performance-toolbar-controls-detail-views > toolbarbutton { + min-width: 0; +} + +#performance-toolbar-controls-detail-views .toolbarbutton-text { + -moz-padding-start: 4px; + -moz-padding-end: 8px; +} + +#filter-button { + list-style-image: url(timeline-filter.svg#filter); + min-width: 24px; +} + +#filter-button[disabled] { + list-style-image: url(timeline-filter.svg#filter-disabled); +} + +#filter-button[open] { + list-style-image: url(timeline-filter.svg#filter-open); +} + +#performance-filter-menupopup > menuitem:before { + content: ""; + display: block; + width: 8px; + height: 8px; + margin: 0 8px; + border-radius: 1px; +} + +/* Recording Notice */ + +#performance-view .notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; +} + +#performance-view .notice-container button { + min-width: 30px; + min-height: 28px; + margin: 0; +} + +#performance-view .notice-container vbox { + text-align: center; +} + +.console-profile-command { + font-family: monospace; + margin: 3px 2px; +} + +#performance-view .realtime-message { + opacity: 0.5; + display: block; +} + +#performance-view toolbarbutton.record-button { + padding: 5px; +} + +#performance-view toolbarbutton.record-button[checked], +#performance-view toolbarbutton.record-button[checked] { + color: var(--theme-selection-color); + background: var(--theme-selection-background); +} + +#performance-view .realtime-disabled-message, +#performance-view .realtime-disabled-on-e10s-message { + display: none; + /* This label does not want to wrap naturally (based on some combination of + it's parents and flex). Quick and dirty way to force it to wrap -> don't + let it get bigger than half the screen size */ + max-width: 60vw; +} + +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { + display: block; + opacity: 0.5; + +} +#performance-view[e10s="unsupported"] .realtime-disabled-message { + display: block; + opacity: 0.5; +} + +#details-pane-container .buffer-status-message, +#details-pane-container .buffer-status-message-full { + display: none; +} + +#details-pane-container[buffer-status="in-progress"] .buffer-status-message { + display: block; + opacity: 0.5; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message { + display: block; + color: var(--theme-highlight-red); + font-weight: bold; + opacity: 1; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message-full { + display: block; +} + +/* Overview Panel */ + +#main-record-button { + list-style-image: url(profiler-stopwatch.svg); +} + +#main-record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#main-record-button[locked] { + pointer-events: none; +} + +#main-record-button .button-icon { + margin: 0; +} + +#main-record-button .button-text { + display: none; +} + +/* Details Panel */ + +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); +} + +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); +} + +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); +} + +/* Profile call tree */ + +.call-tree-cells-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + 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"] { + width: 6vw; +} + +.call-tree-header[type="percentage"], +.call-tree-cell[type="percentage"], +.call-tree-header[type="self-percentage"], +.call-tree-cell[type="self-percentage"] { + width: 5vw; +} + +.call-tree-header[type="samples"], +.call-tree-cell[type="samples"] { + width: 4.5vw; +} + +.call-tree-header[type="allocations"], +.call-tree-cell[type="allocations"], +.call-tree-header[type="self-allocations"], +.call-tree-cell[type="self-allocations"] { + width: 9vw; +} + +.call-tree-header[type="function"], +.call-tree-cell[type="function"] { + -moz-box-flex: 1; +} + +.call-tree-header, +.call-tree-cell { + -moz-box-align: center; + overflow: hidden; + padding: 1px 4px; + color: var(--theme-body-color); + -moz-border-end-color: var(--cell-border-color); +} + +.call-tree-header:not(:last-child), +.call-tree-cell:not(:last-child) { + -moz-border-end-width: 1px; + -moz-border-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:last-child:not(:focus) { + 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 label { + color: var(--theme-selection-color) !important; +} + +.call-tree-item:focus .call-tree-cell { + -moz-border-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 { + -moz-margin-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 { + -moz-margin-start: 8px !important; + font-size: 90%; + color: var(--theme-content-color2); +} + +.call-tree-zoom { + -moz-appearance: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: 11px; + min-width: 11px; + -moz-margin-start: 8px !important; + cursor: zoom-in; + opacity: 0; +} + +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); +} + +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); +} + +@media (min-resolution: 1.25dppx) { + .theme-dark .call-tree-zoom { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light@2x.png); + } +} + +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; +} + +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; +} + +/** + * Details Waterfall Styles + */ + +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow-x: hidden; + overflow-y: auto; +} + +.waterfall-header-contents { + overflow-x: hidden; +} + +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +.waterfall-marker-container[is-spacer] { + pointer-events: none; +} + +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); +} + +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); +} + +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; +} + +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; +} + +.waterfall-marker-item { + overflow: hidden; +} + +.waterfall-sidebar { + -moz-border-end: 1px solid var(--theme-splitter-color); +} + +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; +} + +.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) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + -moz-margin-start: 8px; + -moz-margin-end: 6px; + border-radius: 1px; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; +} + +.waterfall-marker-bar { + height: 9px; + transform-origin: left center; + border-radius: 1px; +} + +.waterfall-marker-container.selected > .waterfall-sidebar, +.waterfall-marker-container.selected > .waterfall-marker-item { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +#waterfall-details { + -moz-padding-start: 8px; + -moz-padding-end: 8px; + padding-top: 2vh; + overflow: auto; + min-width: 50px; +} + +.marker-details-bullet { + width: 8px; + height: 8px; + border-radius: 1px; +} + +menuitem.marker-color-graphs-purple:before, +.marker-color-graphs-purple { + background-color: var(--theme-graphs-purple); +} +menuitem.marker-color-graphs-grey:before, +.marker-color-graphs-grey{ + background-color: var(--theme-graphs-grey); +} +menuitem.marker-color-graphs-green:before, +.marker-color-graphs-green { + background-color: var(--theme-graphs-green); +} +menuitem.marker-color-graphs-yellow:before, +.marker-color-graphs-yellow { + background-color: var(--theme-graphs-yellow); +} +menuitem.marker-color-graphs-red:before, +.marker-color-graphs-red { + background-color: var(--theme-graphs-red); +} +menuitem.marker-color-graphs-blue:before, +.marker-color-graphs-blue { + background-color: var(--theme-graphs-blue); +} + +#waterfall-details > * { + padding-top: 3px; +} + +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} + +/* Recording items */ + +.recording-item { + padding: 4px; +} + +.recording-item-title { + font-size: 110%; +} + +.recording-item-footer { + padding-top: 4px; + font-size: 90%; +} + +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} + +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); +} + +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/** + * JIT View + */ + +#jit-optimizations-view { + width: 350px; + overflow-x: hidden; + overflow-y: auto; + min-width: 200px; +} + +/* override default styles for tree widget */ +#jit-optimizations-view .tree-widget-empty-text { + font-size: inherit; + padding: 0px; + margin: 8px; +} + +#jit-optimizations-view:not(.empty) .tree-widget-empty-text { + display: none; +} + +#jit-optimizations-toolbar { + height: 18px; + min-height: 0px; /* override .devtools-toolbar min-height */ +} + +.jit-optimizations-title { + margin: 0px 4px; + font-weight: 600; +} + +#jit-optimizations-raw-view { + font-size: 90%; +} + +/* override default .tree-widget-item line-height */ +#jit-optimizations-raw-view .tree-widget-item { + line-height: 20px !important; + display: block; + overflow: hidden; +} + +#jit-optimizations-raw-view .tree-widget-item[level="1"] { + font-weight: 600; +} + +#jit-optimizations-view .opt-outcome::before { + content: "→"; + margin: 4px 0px; + color: var(--theme-body-color); +} +#jit-optimizations-view .theme-selected .opt-outcome::before { + color: var(--theme-selection-color); +} + +#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] { + color: var(--theme-highlight-green); +} +#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] { + color: var(--theme-highlight-red); +} +#jit-optimizations-view .tree-widget-container { + -moz-margin-end: 0px; +} +#jit-optimizations-view .tree-widget-container > li, +#jit-optimizations-view .tree-widget-children > li { + overflow: hidden; +} + +.opt-line::before { + content: ":"; + color: var(--theme-highlight-orange); +} +.theme-selected .opt-line::before { + color: var(--theme-selection-color); +} +.opt-line.header-line::before { + color: var(--theme-body-color); +} +#jit-optimizations-view.empty .opt-line.header-line::before { + display: none; +} + +.opt-url { + -moz-margin-start: 4px !important; +} +.opt-url:hover { + text-decoration: underline; +} +.opt-url.debugger-link { + cursor: pointer; +} + +#jit-optimizations-view .opt-icon::before { + content: ""; + background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-repeat: no-repeat; + background-size: 48px 40px; + margin: 5px 6px 0 0; + width: 8px; + height: 8px; + max-height: 8px; + display: inline-block; +} + +#jit-optimizations-view .opt-icon[severity=warning]::before { + background-position: -16px -16px; +} + +@media (min-resolution: 1.25dppx) { + #jit-optimizations-view .opt-icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } +} + +/** + * 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://browser/skin/devtools/webconsole.png); + background-repeat: no-repeat; + background-size: 48px 40px; + margin: 2px 5px 0 0; + width: 8px; + height: 8px; + max-height: 8px; + display: inline-block; + background-position: -16px -16px; +} +@media (min-resolution: 1.25dppx) { + menuitem.experimental-option::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } +} +#performance-options-menupopup:not(.experimental-enabled) .experimental-option, +#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { + display: none; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/power.svg b/arc-firefox-theme/chrome/browser/devtools/power.svg new file mode 100644 index 0000000..f675e30 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/power.svg @@ -0,0 +1,14 @@ + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg new file mode 100644 index 0000000..f682354 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg new file mode 100644 index 0000000..e9fe8f9 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler.css b/arc-firefox-theme/chrome/browser/devtools/profiler.css new file mode 100644 index 0000000..8f127cd --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/profiler.css @@ -0,0 +1,400 @@ +/* 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/. */ + +/* 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); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); + --tab-hover-background-color: rgba(0,0,0,0.3); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); + --tab-hover-background-color: rgba(255,255,255,0.8); +} + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#empty-notice button, +#recording-notice button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#empty-notice button[checked], +#recording-notice button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#empty-notice button .button-text, +#recording-notice button .button-text { + display: none; +} + +.theme-dark #loading-notice { + font-size: 250%; + color: rgba(255,255,255,0.2); +} + +.theme-light #loading-notice { + font-size: 250%; + color: rgba(0,0,0,0.2); +} + +/* Recordings pane */ + +#recordings-pane > tabs, +#recordings-pane .devtools-toolbar { + -moz-border-end-width: 1px; +} + +#recordings-pane > tabs, +#recordings-pane .devtools-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#record-button { + list-style-image: url(profiler-stopwatch.svg); +} + +#record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#record-button[locked] { + pointer-events: none; +} + +/* Recording items */ + +.recording-item { + padding: 4px; +} + +.recording-item-title { + font-size: 110%; +} + +.recording-item-footer { + padding-top: 4px; + font-size: 90%; +} + +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} + +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); +} + +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Profile pane */ + +#profile-content tabs { + -moz-box-align: stretch; + height: 24px; + font: inherit; +} + +#profile-content tab { + -moz-box-flex: 0; + background-color: transparent; + border: none; + border-radius: 0; + padding: 0; + text-shadow: none; + transition-duration: 0.25s; + transition-timing-function: ease-in-out; + transition-property: opacity, transform; +} + +#profile-content tab { + color: var(--theme-body-color); +} + +#profile-content tab:not([selected]) { + cursor: pointer; +} + +#profile-content tab[covered] { + opacity: 0; + transform: translateY(100%); +} + +#profile-content tab { + -moz-appearance: none; + -moz-border-end: 1px solid var(--theme-splitter-color); +} + +#profile-content tab:hover { + background-color: var(--tab-hover-background-color); +} + +#profile-content tab[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +#profile-content tabpanel { + -moz-box-orient: vertical; + transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ +} + +#profile-newtab-button { + -moz-appearance: none; + background-color: transparent; + background-position: 4px 2px; + background-size: 54px 20px; + min-width: 26px; + margin: 0; + border: none; + cursor: pointer; +} + +.theme-dark #profile-newtab-button { + background-color: rgba(112,191,83,0.2); +} + +.theme-light #profile-newtab-button { + background-color: rgba(44,187,15,0.2); +} + +.theme-dark #profile-newtab-button { + background-image: url(newtab-inverted.png); +} + +.theme-light #profile-newtab-button { + background-image: url(newtab.png); +} + +@media (min-resolution: 1.25dppx) { + .theme-dark #profile-newtab-button { + background-image: url(newtab-inverted@2x.png); + } + + .theme-light #profile-newtab-button { + background-image: url(newtab@2x.png); + } +} + +#profile-newtab-button:hover { + background-position: 40px 2px; +} + +#profile-newtab-button:hover:active { + background-position: 22px 2px; +} + +/* Profile call tree */ + +.call-tree-headers-container { + border-top: 1px solid var(--theme-splitter-color); +} + +.call-tree-cells-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow: auto; +} + +.call-tree-cells-container[categories-hidden] .call-tree-category { + display: none; +} + +.call-tree-header[type="duration"], +.call-tree-cell[type="duration"], +.call-tree-header[type="self-duration"], +.call-tree-cell[type="self-duration"] { + width: 9em; +} + +.call-tree-header[type="percentage"], +.call-tree-cell[type="percentage"], +.call-tree-header[type="self-percentage"], +.call-tree-cell[type="self-percentage"] { + width: 6em; +} + +.call-tree-header[type="samples"], +.call-tree-cell[type="samples"] { + width: 5em; +} + +.call-tree-header[type="function"], +.call-tree-cell[type="function"] { + -moz-box-flex: 1; +} + +.call-tree-header, +.call-tree-cell { + -moz-box-align: center; + overflow: hidden; + padding: 1px 4px; + color: var(--theme-body-color); +} + +.call-tree-header:not(:last-child), +.call-tree-cell:not(:last-child) { + -moz-border-end-width: 1px; + -moz-border-end-style: solid; +} + +.call-tree-header, +.call-tree-cell { + -moz-border-end-color: var(--cell-border-color); +} + +.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:last-child:not(:focus) { + 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 label { + color: var(--theme-selection-color) !important; +} + +.call-tree-item:focus .call-tree-cell { + -moz-border-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-url { + -moz-margin-start: 4px !important; + cursor: pointer; +} + +.call-tree-url:hover { + text-decoration: underline; +} + +.call-tree-url { + color: var(--theme-highlight-blue); +} + +.call-tree-line { + color: var(--theme-highlight-orange); +} + +.call-tree-column { + color: var(--theme-highlight-orange); + opacity: 0.6; +} + +.call-tree-host { + -moz-margin-start: 8px !important; + font-size: 90%; + color: var(--theme-content-color2); +} + +.call-tree-name[value=""], +.call-tree-url[value=""], +.call-tree-line[value=""], +.call-tree-column[value=""], +.call-tree-host[value=""] { + display: none; +} + +.call-tree-zoom { + -moz-appearance: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: 11px; + min-width: 11px; + -moz-margin-start: 8px !important; + cursor: zoom-in; + opacity: 0; +} + +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); +} + +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); +} + +@media (min-resolution: 1.25dppx) { + .theme-dark .call-tree-zoom { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light@2x.png); + } +} + +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; +} + +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; +} + +#profile-content tab label { + margin-bottom: 4px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css b/arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css new file mode 100644 index 0000000..9ea540e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css @@ -0,0 +1,188 @@ +/* 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 { + color: #18191a; +} + +.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: 2px; + 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/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png new file mode 100644 index 0000000..7d113f0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png new file mode 100644 index 0000000..bb3c4bd Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png new file mode 100644 index 0000000..35b54d6 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png new file mode 100644 index 0000000..9dbf4fe Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png new file mode 100644 index 0000000..3b4e78c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png new file mode 100644 index 0000000..cbae606 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png new file mode 100644 index 0000000..43379d0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png new file mode 100644 index 0000000..2bacbd2 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png new file mode 100644 index 0000000..eeeb823 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png new file mode 100644 index 0000000..084220e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png new file mode 100644 index 0000000..927c5cf Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png new file mode 100644 index 0000000..9058703 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png new file mode 100644 index 0000000..e464503 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind.png b/arc-firefox-theme/chrome/browser/devtools/rewind.png new file mode 100644 index 0000000..098e256 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/rewind.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png b/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png new file mode 100644 index 0000000..eaac45d Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css new file mode 100644 index 0000000..8c2e3d1 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -0,0 +1,264 @@ +/* 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; +} + +.ruleview { + height: 100%; +} + +.ruleview-rule-source { + -moz-padding-start: 5px; + text-align: end; + float: right; + -moz-user-select: none; +} + +.ruleview-rule-source, +.ruleview-rule-source > label { + cursor: pointer; +} + +.ruleview-rule-source[unselectable], +.ruleview-rule-source[unselectable] > label { + cursor: default; +} + +.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; + margin-top: 4px; +} + +.ruleview-rule-pseudo-element { + padding-left:20px; + border-left: solid 10px; +} + +.ruleview-rule, +#noResults { + padding: 2px 4px; +} + +/* User agent styles are not editable, display them differently */ +.ruleview-rule[uneditable=true] { + background: var(--theme-tab-toolbar-background); +} + +.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; +} + +#noResults { + font: message-box; + color: GrayText; +} + +.ruleview-rule + .ruleview-rule { + border-top-width: 1px; + border-top-style: dotted; +} + +.ruleview-warning { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-margin-start: 5px; + display: inline-block; + vertical-align: top; + width: 13px; + height: 12px; +} + + +@media (min-resolution: 1.25dppx) { + .ruleview-warning { + background-image: url(alerticon-warning@2x.png); + } +} + +.ruleview-ruleopen { + -moz-padding-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 { + display: inline-block; +} + +.ruleview-newproperty { + /* (enable checkbox width: 12px) + (expander width: 15px) */ + -moz-margin-start: 27px; +} + +.ruleview-namecontainer, +.ruleview-propertyvaluecontainer, +.ruleview-propertyname, +.ruleview-propertyvalue { + text-decoration: inherit; +} + +.ruleview-computedlist { + list-style: none; + padding: 0; +} + +.ruleview-computed { + -moz-margin-start: 35px; +} + +.ruleview-swatch { + cursor: pointer; + border-radius: 50%; + width: 1em; + height: 1em; + vertical-align: text-top; + -moz-margin-end: 5px; + display: inline-block; + position: relative; +} + +.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://browser/skin/devtools/cubic-bezier-swatch.png"); + background-size: 1em; +} + +.ruleview-filterswatch { + background: url("chrome://browser/skin/devtools/filter-swatch.svg"); + background-size: 1em; +} + +@media (min-resolution: 1.25dppx) { + .ruleview-bezierswatch { + background: url("chrome://browser/skin/devtools/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; +} + +.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-selector { + word-wrap: break-word; +} + +.ruleview-selector-separator, .ruleview-selector-unmatched { + color: #888; +} + +.ruleview-selectorhighlighter { + background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.ruleview-selectorhighlighter:hover { + background-position: -32px 0; +} + +.ruleview-selectorhighlighter:active, +.ruleview-selectorhighlighter.highlighted { + background-position: -16px 0; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css new file mode 100644 index 0000000..96d6f70 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css @@ -0,0 +1,13 @@ +/* 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/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg new file mode 100644 index 0000000..77779e8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg new file mode 100644 index 0000000..fc65d21 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg new file mode 100644 index 0000000..205b744 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css new file mode 100644 index 0000000..c63a4c6 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css @@ -0,0 +1,123 @@ +/* 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 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; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#reload-notice { + font-size: 120%; +} + +#waiting-notice { + font-size: 110%; +} + +/* Shaders pane */ + +#shaders-pane { + min-width: 150px; +} + +#shaders-pane + .devtools-side-splitter { + border-color: transparent; +} + +.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(itemToggle.png); + background-color: transparent; + background-repeat: no-repeat; + background-clip: content-box; + background-size: 32px 16px; + background-position: -16px 0; + width: 16px; + height: 16px; + border: 0; +} + +@media (min-resolution: 1.25dppx) { + .side-menu-widget-item-checkbox .checkbox-check { + background-image: url(itemToggle@2x.png); + } +} + +.side-menu-widget-item-checkbox[checked] .checkbox-check { + background-position: 0 0; +} + +/* Invert all toggle icons but the one in the active row for light theme */ +.theme-light .side-menu-widget-item:not(.selected) .checkbox-check { + filter: url(filters.svg#invert); +} + +/* 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/arc-firefox-theme/chrome/browser/devtools/splitview.css b/arc-firefox-theme/chrome/browser/devtools/splitview.css new file mode 100644 index 0000000..9710c38 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/splitview.css @@ -0,0 +1,152 @@ +/* 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/. */ + + +.splitview-nav-container .devtools-throbber { + display: none; + text-align: center; +} + +.loading .splitview-nav-container .devtools-throbber { + display: block; +} + +.theme-dark .splitview-nav-container { + background-color: var(--theme-toolbar-background); +} + +.splitview-nav { + -moz-appearance: none; + list-style-image: none; + list-style: none; + padding: 0; + margin: 0; +} + +.theme-dark .splitview-nav { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .splitview-nav:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.theme-light .splitview-nav { + box-shadow: inset -1px 0 0 #aaa; +} + +.theme-light .splitview-nav:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; +} + +.splitview-nav > li { + /* To compensate for the top and bottom borders */ + margin-top: -1px; + margin-bottom: -1px; + -moz-padding-end: 8px; + -moz-box-align: center; + outline: 0; + vertical-align: bottom; +} + +.theme-dark .splitview-nav > li { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); +} + +.theme-dark .splitview-nav > li:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .splitview-nav > li { + border-top: 1px solid rgba(128,128,128,0.15); + border-bottom: 1px solid transparent; +} + +.theme-light .splitview-nav > li:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +} + +.placeholder { + -moz-box-flex: 1; + text-align: center; +} + +.splitview-nav > li.splitview-active { + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: center right, center right, top left; + background-size: auto, 1px, auto; +} + +.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: center left, center left, top right; +} + +.theme-dark .splitview-nav > li.splitview-active { + background-image: url(itemArrow-dark-ltr.svg), + linear-gradient(#000, #000), + linear-gradient(#1d4f73, #1d4f73); +} + +.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: url(itemArrow-dark-rtl.svg), + linear-gradient(#000, #000), + linear-gradient(#1d4f73, #1d4f73); +} + +.theme-light .splitview-nav > li.splitview-active { + background-image: url(itemArrow-ltr.svg), + linear-gradient(#aaa, #aaa), + linear-gradient(#4c9ed9, #4c9ed9); +} + +.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: url(itemArrow-rtl.svg), + linear-gradient(#aaa, #aaa), + linear-gradient(#4c9ed9, #4c9ed9); +} + +/* Toolbars */ + +.splitview-main > .devtools-toolbar { + background-origin: border-box; + background-clip: border-box; +} + +.theme-dark .splitview-main > toolbar, +.theme-dark .loading .splitview-nav-container { + -moz-border-end: 1px solid #000; +} + +.theme-light .splitview-main > toolbar, +.theme-light .loading .splitview-nav-container { + -moz-border-end: 1px solid #aaa; +} + +.splitview-main > .devtools-toolbarbutton { + font-size: 11px; + padding: 0 8px; + width: auto; + min-width: 48px; + min-height: 0; +} + + +/* Resizers */ + +.splitview-portrait-resizer { + -moz-appearance: none; + background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), + linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); + height: 12px; + background-size: 10px 2px, 100% 12px; + background-clip: content-box, border-box; + background-repeat: repeat-y, no-repeat; + background-position: center center; + padding: 2px 0; + border-top: 1px solid hsla(210,8%,5%,.5); + border-bottom: 1px solid hsla(210,8%,5%,.5); +} diff --git a/arc-firefox-theme/chrome/browser/devtools/storage.css b/arc-firefox-theme/chrome/browser/devtools/storage.css new file mode 100644 index 0000000..5f6d78e --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/storage.css @@ -0,0 +1,48 @@ +/* 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; +} + +.theme-dark #storage-tree { + background: #343c45; /* Toolbars */ +} + +#storage-tree .tree-widget-item[type="store"]:after { + background-image: url(chrome://browser/skin/devtools/filetype-store.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 { + max-width: 100%; + } + + #storage-table #path { + display: none; + } + + #storage-table .table-widget-cell { + min-width: 100px; + } +} diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css new file mode 100644 index 0000000..a4a300f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css @@ -0,0 +1,305 @@ +/* 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/. */ + +.stylesheet-title, +.stylesheet-name { + text-decoration: none; +} + +.stylesheet-name { + font-size: 13px; +} + +.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 { + 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.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; +} + +.theme-light .stylesheet-sidebar { + border-color: #aaa; /* Splitters */ +} + +.theme-dark .stylesheet-sidebar { + border-color: #000; /* Splitters */ +} + +.theme-light .media-rule-label { + border-bottom-color: #cddae5; /* Grey */ +} + +.theme-dark .media-rule-label { + border-bottom-color: #303b47; /* Grey */ +} + +.media-rule-label { + padding: 4px; + cursor: pointer; + border-bottom: 1px solid; +} + +.media-rule-line { + -moz-padding-start: 4px; +} + +.theme-light .media-condition-unmatched { + color: grey; +} + +.theme-dark .media-condition-unmatched { + color: #606C75; +} + +.stylesheet-enabled { + padding: 8px 0; + margin: 0 8px; + background-image: url(itemToggle.png); + background-repeat: no-repeat; + background-clip: content-box; + background-position: 0 8px; + background-size: 48px 24px; + width: 24px; + height: 40px; +} + +@media (min-resolution: 1.25dppx) { + .stylesheet-enabled { + background-image: url(itemToggle@2x.png); + } +} + +.disabled > .stylesheet-enabled { + background-position: -24px 8px; +} + +/* Invert all toggle icons but the one in the active row for light theme */ +.theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled { + filter: url(filters.svg#invert); +} + +.splitview-nav > li > .stylesheet-enabled:focus, +.splitview-nav > li:hover > .stylesheet-enabled { + outline: 0; +} + +.stylesheet-linked-file:not(:empty){ + -moz-margin-end: 0.4em; +} + +.stylesheet-linked-file:not(:empty):before { + -moz-margin-start: 0.4em; +} + +li.linked-file-error .stylesheet-linked-file:after { + font-size: 110%; +} + +.stylesheet-more > h3 { + font-size: 11px; + -moz-margin-end: 2px; +} + +.devtools-searchinput { + 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) { + .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; + } + + .stylesheet-sidebar { + width: 180px; + } +} + +.csscoverage-report { + background-color: var(--theme-toolbar-background); +} + +.csscoverage-report-container { + height: 100vh; + padding: 0 30px; +} + +.csscoverage-report-content { + margin: 20px auto; + -moz-column-width: 300px; + font-size: 13px; +} + +.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-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; + -moz-border-start: none; +} + +.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 50px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg new file mode 100644 index 0000000..e050d20 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/toggle-tools.png b/arc-firefox-theme/chrome/browser/devtools/toggle-tools.png new file mode 100644 index 0000000..4954393 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/toggle-tools.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png b/arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png new file mode 100644 index 0000000..971f414 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg new file mode 100644 index 0000000..ae294f6 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg @@ -0,0 +1,3 @@ + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg new file mode 100644 index 0000000..128e6e8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg new file mode 100644 index 0000000..5a8cbb8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg new file mode 100644 index 0000000..bec394d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg new file mode 100644 index 0000000..62a6d75 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg @@ -0,0 +1,3 @@ + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg new file mode 100644 index 0000000..eff1673 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg new file mode 100644 index 0000000..d8e1bdd --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg new file mode 100644 index 0000000..ad2133a --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg new file mode 100644 index 0000000..7f5013b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg new file mode 100644 index 0000000..ac1f5c7 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg new file mode 100644 index 0000000..59d9d90 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg new file mode 100644 index 0000000..0739e82 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg @@ -0,0 +1,3 @@ + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png new file mode 100644 index 0000000..751fbc3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png new file mode 100644 index 0000000..e4db35e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png new file mode 100644 index 0000000..298ced1 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png new file mode 100644 index 0000000..7dec134 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png new file mode 100644 index 0000000..dfd5354 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png new file mode 100644 index 0000000..721bb0d Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png new file mode 100644 index 0000000..5a57fc3 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png new file mode 100644 index 0000000..c2b95c4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tracer-icon.png b/arc-firefox-theme/chrome/browser/devtools/tracer-icon.png new file mode 100644 index 0000000..8229dd7 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tracer-icon.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png b/arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png new file mode 100644 index 0000000..de0ded4 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/undock@2x.png b/arc-firefox-theme/chrome/browser/devtools/undock@2x.png new file mode 100644 index 0000000..137d6df Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/undock@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-delete.png b/arc-firefox-theme/chrome/browser/devtools/vview-delete.png new file mode 100644 index 0000000..db4b062 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-delete.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png new file mode 100644 index 0000000..ae6fbb2 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-edit.png b/arc-firefox-theme/chrome/browser/devtools/vview-edit.png new file mode 100644 index 0000000..f575032 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-edit.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png new file mode 100644 index 0000000..a34c8ed Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-lock.png b/arc-firefox-theme/chrome/browser/devtools/vview-lock.png new file mode 100644 index 0000000..b68cc5e Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-lock.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png new file mode 100644 index 0000000..5d7640b Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png new file mode 100644 index 0000000..ee1d7a5 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png new file mode 100644 index 0000000..2b09f01 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css new file mode 100644 index 0000000..11439a6 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css @@ -0,0 +1,257 @@ +/* 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 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; + background-color: var(--theme-toolbar-background); + 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; +} + +/* Edges in graph */ +.edgePath path { + stroke-width: 1px; + fill: none; +} + +.theme-dark .edgePath path { + stroke: #b6babf; /* Grey foreground text */ +} +.theme-light .edgePath path { + stroke: #aaaaaa; /* Splitters */ +} + +/* AudioParam connection edges */ +g.edgePath.param-connection { + stroke-dasharray: 5,5; +} + +.theme-dark .edgePath.param-connection path { + stroke: #b6babf; /* Grey foreground text */ +} +.theme-light .edgePath.param-connection path { + stroke: #aaaaaa; /* Splitters */ +} + +/* 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. */ +.theme-dark g.edgeLabel rect { + fill: #14171a; +} +.theme-light g.edgeLabel rect { + fill: #fcfcfc; /* Background - Editor */ +} +.theme-dark g.edgeLabel tspan { + fill: var(--theme-body-color-alt); +} +.theme-light g.edgeLabel tspan { + fill: #585959; /* Grey foreground text */ +} + +/* Audio Nodes */ +.nodes rect { + stroke-width: 1px; + cursor: pointer; +} + +.nodes rect { + stroke: var(--theme-tab-toolbar-background); +} +.theme-light rect { + fill: var(--theme-tab-toolbar-background); +} +.theme-dark rect { + fill: var(--theme-toolbar-background); +} + +/** + * Bypassed Nodes + */ + +.theme-light .nodes g.bypassed rect { + fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light); +} +.theme-dark .nodes g.bypassed rect { + fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark); +} +.nodes g.bypassed.selected rect { + stroke: var(--theme-selection-background); +} + +/* +.nodes g.bypassed text { + opacity: 0.8; +} +*/ + +/** + * Selected Nodes + */ +.nodes g.selected rect { + fill: var(--theme-selection-background); +} + +/* Don't style bypassed nodes text different because it'd be illegible in light-theme */ +.theme-light g.selected:not(.bypassed) text { + fill: var(--theme-toolbar-background); +} + + +/* Text in nodes and edges */ +text { + cursor: default; /* override the "text" cursor */ + font-weight: 300; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; + font-size: 14px; +} + +text { + fill: var(--theme-body-color-alt); +} + + +.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(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: url(debugger-collapse.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#inspector-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#inspector-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand.png); +} + +#inspector-pane-toggle:active { + -moz-image-region: rect(0px,32px,16px,16px); +} + +/** + * 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.25dppx) { + #inspector-pane-toggle { + list-style-image: url(debugger-collapse@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #inspector-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand@2x.png); + } + + #inspector-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } + + .web-audio-inspector .error { + background-image: url(alerticon-warning@2x.png); + } +} + +/** + * Inspector toolbar + */ + +#audio-node-toolbar .bypass { + list-style-image: url(power.svg); +} + +#audio-node-toolbar toolbarbutton[disabled] { + opacity: 0.5; + background-color: transparent; +} + +.theme-dark #audio-node-toolbar toolbarbutton[checked] { + background-color: #1d4f73; /* Select Highlight Blue */ +} +.theme-light #audio-node-toolbar toolbarbutton[checked] { + background-color: #4c9ed9; /* Select Highlight Blue */ +} + +/* don't invert checked buttons so we can have white icons on light theme */ +#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon { + filter: none; +} + + +/** + * 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/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css new file mode 100644 index 0000000..7b89259 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -0,0 +1,592 @@ +/* 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 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/. */ + +/* 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; + flex: none; + padding: 0 7px; + width: 100%; + box-sizing: border-box; +} + +.message > .timestamp { + flex: none; + color: GrayText; + margin: 4px 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; +} + +.message > .icon::before { + content: ""; + background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-position: 8px 8px; + background-repeat: no-repeat; + background-size: 48px 40px; + width: 8px; + height: 8px; + display: inline-block; +} + +@media (min-resolution: 1.25dppx) { + .message > .icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } +} + +.message > .message-body-wrapper { + flex: 1 1 100%; + 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 { + display: flex; + flex: none; + align-self: flex-start; + justify-content: flex-end; + width: 10em; + margin-top: 3px; + color: -moz-nativehyperlinktext; + text-decoration: none; + white-space: nowrap; +} + +.message-location:hover, +.message-location:focus { + text-decoration: underline; +} + +.message-location > .filename { + text-overflow: ellipsis; + text-align: end; + overflow: hidden; +} + +.message-location > .line-number { + flex: none; +} + +.message-flex-body { + display: flex; +} + +.message-body > * { + white-space: pre-wrap; + word-wrap: break-word; +} + +.message-flex-body > .message-body { + display: block; + flex: 1 1 auto; + vertical-align: middle; +} + +.message-flex-body > .message-location { + margin-top: 0; +} + +.jsterm-input-container { + border-top-width: 1px; + border-top-style: solid; +} + +#output-wrapper { + direction: ltr; + overflow: auto; +} + +#output-container { + -moz-user-select: text; + -moz-box-flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +#output-container.hideTimestamps > .message { + -moz-padding-start: 0; + -moz-margin-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-left: 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] { + background-color: rgba(255, 150, 150, 0.3); +} + +.theme-dark .message[severity=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 { + -moz-border-end: solid #000 6px; +} + +.message[category=network][severity=error] > .icon::before { + background-position: -8px 0; +} + +.message[category=network] > .message-body { + display: flex; +} + +.message[category=network] .method { + flex: none; +} + +.message[category=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 { + flex: none; + -moz-margin-start: 6px; +} + +.message[category=network].mixed-content .url { + color: #FF0000; +} + +.message .learn-more-link { + color: -moz-nativehyperlinktext; + margin: 0 6px; +} + +.message[category=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; + -moz-margin-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 { + -moz-border-end: solid #00b6f0 6px; +} + +.message[category=cssparser][severity=error] > .icon::before { + background-position: -8px -8px; +} + +.message[category=cssparser][severity=warn] > .icon::before { + background-position: -16px -8px; +} + +/* JS styles */ +.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#FCB142, #FB9500); + border-color: #E98A00; +} + +.message[category=exception] > .indent { + -moz-border-end: solid #fb9500 6px; +} + +.message[category=exception][severity=error] > .icon::before { + background-position: -8px -16px; +} + +.message[category=exception][severity=warn] > .icon::before { + background-position: -16px -16px; +} + +/* 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 { + -moz-border-end: solid #cbcbcb 6px; +} + +.message[category=console][severity=error] > .icon::before, +.message[category=output][severity=error] > .icon::before { + background-position: -8px -24px; +} + +.message[category=console][severity=warn] > .icon::before { + background-position: -16px -24px; +} + +.message[category=console][severity=info] > .icon::before { + background-position: -24px -24px; +} + +/* Input and output styles */ +.message[category=input] > .indent, +.message[category=output] > .indent { + -moz-border-end: solid #808080 6px; +} + +.message[category=input] > .icon::before { + background-position: -32px -24px; +} + +.message[category=output] > .icon::before { + background-position: -40px -24px; +} + +/* JSTerm Styles */ +.jsterm-input-node, +.jsterm-complete-node { + border: none; + padding: 0 0 0 16px; + -moz-appearance: none; + background-color: transparent; +} + +.jsterm-input-node { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); + background-repeat: no-repeat; + background-size: 16px 16px; +} + +@media (min-resolution: 1.25dppx) { + .jsterm-input-node { + background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); + } +} + +:-moz-any(.jsterm-input-node, + .jsterm-complete-node) > .textbox-input-box > .textbox-textarea { + overflow-x: hidden; +} + +.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; + -moz-margin-end: 15px; + border: 1px solid rgba(128, 128, 128, .5); + border-radius: 3px; +} + +#webconsole-sidebar > tabs { + height: 0; + border: none; +} + +.devtools-side-splitter ~ #webconsole-sidebar[hidden] { + display: none; +} + +/* Security styles */ + +.message[category=security] > .indent { + -moz-border-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 { + background-position: -8px -32px; +} + +.message[category=security][severity=warn] > .icon::before { + background-position: -16px -32px; +} + +.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 { + -moz-padding-end: 9px; + text-decoration: none; +} + +.stacktrace { + display: none; + list-style: none; + padding: 0 1em 0 1.5em; + margin: 5px 0 0 0; + max-height: 10em; + overflow-y: auto; + border: 1px solid rgb(200,200,200); + border-radius: 3px; +} + +.consoletable { + margin: 5px 0 0 0; +} + +.theme-light .message[severity=error] .stacktrace { + background-color: rgba(255, 255, 255, 0.5); +} + +.theme-dark .message[severity=error] .stacktrace { + background-color: rgba(0, 0, 0, 0.5); +} + +.message[open] .stacktrace { + display: block; +} + +.message .theme-twisty { + display: inline-block; + vertical-align: middle; + margin: 0 3px 0 0; +} + +.stacktrace li { + display: flex; + margin: 0; +} + +.stacktrace .function { + display: block; + flex: 1 1 auto; +} + +.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; +} + +/* Open DOMNode in inspector button */ +.open-inspector { + background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.elementNode:hover .open-inspector, +.open-inspector:hover { + background-position: -32px 0; +} + +.open-inspector:active { + background-position: -16px 0; +} + +.jsterm-input-container { + background-color: var(--theme-tab-toolbar-background); + border-color: var(--theme-body-background); +} + +.jsterm-input-node { + color: var(--theme-content-color1); +} + +.jsterm-complete-node { + color: var(--theme-comment); +} + +.navigation-marker .url { + background: var(--theme-body-background); +} + +.theme-dark .inlined-variables-view iframe { + border-color: #333; +} + +.theme-dark .stacktrace { + border-color: #333; +} + +.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-color: ThreeDShadow; +} +.theme-light .navigation-marker .url { + background: #fff; +} + +.theme-light .inlined-variables-view iframe { + border-color: #ccc; +} + +.theme-light .stacktrace { + border-color: #ccc; +} + +@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-left: 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; + } +} + +.jsterm-input-node { + width: 98%; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png new file mode 100644 index 0000000..8aee790 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/webconsole.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png new file mode 100644 index 0000000..2d5e97f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css new file mode 100644 index 0000000..3803fe3 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css @@ -0,0 +1,99 @@ +/* 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/. */ + +body { + font-family: sans-serif; + font-size: 11px; + background: #EEE; + color: #000; +} + +#header { + padding: 5px; + overflow-x:auto; + display: block; +} + +h1 { + font-size: 13px; + line-height: 15px; + padding: 3px 10px; + vertical-align: bottom; + margin: 0px; + background: linear-gradient(#BBB, #999); + border-radius: 2px; + text-shadow: #FFF 0px 1px 0px; +} + +h1 .info { + font-size: 11px; + line-height: 15px; + vertical-align: bottom; + float: right; + color: #333; + padding-right: 3px; +} + +.property-table { + padding: 2px 5px; + background: linear-gradient(#FFF, #F8F8F8); + color: #333; + width: 100%; + max-height: 330px; + overflow: auto; + display: block; +} + +.property-name { + font-size: 11px; + font-weight: bold; + color: #000; + white-space: nowrap; + text-align: end; + vertical-align: top; + width: 10%; +} + +.property-value { + padding-right: 5px; + font-size: 11px; + word-wrap: break-word; + width: 90%; +} + +div.group { + margin-top: 10px; +} + +div.group, +#header { + background: #FFF; + border-color: #E1E1E1; + border-style: solid; + border-width: 1px; + box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); + border-radius: 4px 4px 4px 4px; +} + +img#responseImageNode { + box-shadow: rgba(0,0,0,0.2) 0px 3px 3.5px; + max-width: 100%; +} + +#responseImageNodeDiv { + padding: 5px; +} + +#responseBodyFetchLink, #requestBodyFetchLink { + padding: 5px; + margin: 0; + cursor: pointer; + font-weight: bold; + font-size: 1.1em; + text-decoration: underline; +} + +.longStringEllipsis { + margin-left: 0.6em; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css new file mode 100644 index 0000000..0ef2f9f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -0,0 +1,1643 @@ +/* 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/. */ + +/* 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/. */ + + +/* Generic pane helpers */ + +.generic-toggled-side-pane { + -moz-margin-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-side-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 (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: 3px; + height: 3px; + margin-top: -3px; + + /* Reset the vertical splitter styles */ + border-width: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + -moz-margin-start: 0; + width: auto; + min-width: 0; + + /* In some edge case the cursor is not changed to n-resize */ + cursor: n-resize; + } + + .devtools-responsive-container > .devtools-sidebar-tabs { + min-height: 35vh; + max-height: 75vh; + } +} + +/* BreacrumbsWidget */ + +.breadcrumbs-widget-container { + -moz-margin-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("breadcrumbs-scrollbutton.png"); + list-style-image: none; + margin: 0 8px; + padding: 0; +} + +@media (min-resolution: 1.25dppx) { + .scrollbutton-up > .toolbarbutton-icon, + .scrollbutton-down > .toolbarbutton-icon { + background-image: url("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); +} + +/* The breadcrumb separator elements are used as background images with + * -moz-element, so we position them offscreen since we don't care about + * seeing the original elements. + */ +.breadcrumb-separator-container { + position: fixed; + top: -1000px; + left: -1000px; +} + +#breadcrumb-separator-before, +#breadcrumb-separator-after, +#breadcrumb-separator-normal { + width: 12px; + height: 24px; + overflow: hidden; +} + +#breadcrumb-separator-before, +#breadcrumb-separator-after:after { + background: var(--theme-selection-background); +} + +#breadcrumb-separator-after, +#breadcrumb-separator-before:after { + background: var(--theme-toolbar-background); +} + +/* This chevron arrow cannot be replicated easily in CSS, so we are using + * a background image for it (still keeping it in a separate element so + * we can handle RTL support with a CSS transform). + */ +#breadcrumb-separator-normal { + background: url(breadcrumbs-divider@2x.png) no-repeat center right; + background-size: 12px 24px; +} + +/* Fake a triangle by rotating a rectangle inside the elements */ +#breadcrumb-separator-before:after, +#breadcrumb-separator-after:after { + content: ""; + display: block; + width: 25px; + height: 24px; + transform: translateX(-18px) rotate(45deg); + -moz-box-sizing: border-box; +} + +.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%); +} + +.breadcrumbs-widget-item > .button-box { + border: none; + padding-top: 0; + padding-bottom: 0; +} + +.breadcrumbs-widget-item:not([checked]) { + background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; +} + +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { + background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0; +} + +.breadcrumbs-widget-item[checked] { + background: -moz-element(#breadcrumb-separator-before) no-repeat 0 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:-moz-locale-dir(rtl) { + padding: 0 20px 0 8px; +} + +.breadcrumbs-widget-item:-moz-locale-dir(rtl), +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) { + background-position: center right; +} + +#breadcrumb-separator-before:-moz-locale-dir(rtl), +#breadcrumb-separator-after:-moz-locale-dir(rtl), +#breadcrumb-separator-normal:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#breadcrumb-separator-before:-moz-locale-dir(rtl):after, +#breadcrumb-separator-after:-moz-locale-dir(rtl):after { + transform: translateX(-5px) rotate(45deg); +} + +.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; +} + +/* 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 */ + +.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr), +.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl), +.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.side-menu-widget-container:-moz-locale-dir(ltr), +.side-menu-widget-empty-text:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #aaa; +} + +.side-menu-widget-container:-moz-locale-dir(rtl), +.side-menu-widget-empty-text:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; +} + +.side-menu-widget-group { + /* To allow visibility of the dark margin shadow. */ + -moz-margin-end: 1px; +} + +.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { + /* To compensate for the arrow image's dark margin. */ + -moz-margin-end: -1px; +} + +/* SideMenuWidget groups */ + +.side-menu-widget-group-title { + padding: 4px; + background-color: var(--theme-tab-toolbar-background); +} + +.theme-dark .side-menu-widget-group-title { + color: var(--theme-content-color1); +} + +.theme-light .side-menu-widget-group-title { + color: var(--theme-content-color3); +} + +/* SideMenuWidget items */ + +.side-menu-widget-item { + /* To compensate for the top and bottom borders */ + margin-top: -1px; + margin-bottom: -1px; + background-clip: padding-box; +} + +.theme-dark .side-menu-widget-item { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); + color: var(--theme-selection-color); +} + +.theme-dark .side-menu-widget-item:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .side-menu-widget-item { + border-top: 1px solid rgba(128,128,128,0.15); + border-bottom: 1px solid transparent; + color: var(--theme-body-color); +} + +.theme-light .side-menu-widget-item:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +} + +.side-menu-widget-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.side-menu-widget-item-arrow { + -moz-margin-start: -7px; + width: 7px; /* The image's width is 7 pixels */ + /* Cover the border of the side-menu-widget-item */ + margin-top: -1px; + margin-bottom: -1px; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow { + background-size: auto, 1px 100%; + background-repeat: no-repeat; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { + background-position: center right, top right; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-position: center left, top left; +} + +.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { + background-image: url(itemArrow-dark-ltr.svg), linear-gradient(to right, #000, #000); +} + +.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-image: url(itemArrow-dark-rtl.svg), linear-gradient(to right, #000, #000); +} + +.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { + background-image: url(itemArrow-ltr.svg), linear-gradient(to right, #aaa, #aaa); +} + +.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-image: url(itemArrow-rtl.svg), linear-gradient(to right, #aaa, #aaa); +} + +/* SideMenuWidget items contents */ + +.side-menu-widget-item-contents { + padding: 4px; + /* To avoid having content overlapping the arrow image. */ + -moz-padding-end: 8px; +} + +.side-menu-widget-item-other { + /* To avoid having content overlapping the arrow image. */ + -moz-padding-end: 8px; + /* To compensate for the .side-menu-widget-item-contents padding. */ + -moz-margin-start: -4px; + -moz-margin-end: -8px; +} + +.side-menu-widget-item-other:first-of-type { + margin-top: 4px; +} + +.side-menu-widget-item-other:last-of-type { + margin-bottom: -4px; +} + +.theme-dark .side-menu-widget-item-other { + background-color: rgba(0,0,0,.1); +} + +.theme-light .side-menu-widget-item-other { + background-color: rgba(128,128,128,.1); +} + +.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other { + background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */ + color: var(--theme-selection-color); +} + +.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other { + background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */ + color: var(--theme-body-color); +} + +.side-menu-widget-item.selected .side-menu-widget-item-other.selected { + background-color: transparent; + color: var(--theme-selection-color); +} + +/* SideMenuWidget checkboxes */ + +.side-menu-widget-group-checkbox { + margin: 0; + -moz-margin-end: 4px; +} + +.side-menu-widget-item-checkbox { + margin: 0; + -moz-margin-start: 4px; +} + +/* SideMenuWidget misc */ + +.theme-dark .side-menu-widget-container, +.theme-dark .side-menu-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + +.side-menu-widget-empty-text { + padding: 4px 8px; +} + +/* 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; +} + +/* Generic variables traits */ + +.variables-view-variable:not(:last-child) { + border-bottom: 1px solid rgba(128, 128, 128, .15); +} + +.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 { + -moz-margin-start: 5px; +} + +.variable-or-property:not([untitled]) > .variables-view-element-details { + -moz-margin-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://browser/skin/devtools/vview-lock.png") no-repeat; + background-size: cover; + width: 16px; + height: 16px; +} + +@media (min-resolution: 1.25dppx) { + .variable-or-property-non-writable-icon { + background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); + } +} + +.variable-or-property-frozen-label, +.variable-or-property-sealed-label, +.variable-or-property-non-extensible-label { + height: 16px; + -moz-padding-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 { + -moz-padding-start: 4px; + -moz-border-start: 1px dotted #000; +} + +.variable-or-property[safe-getter] > tooltip > label.WebIDL { + -moz-padding-start: 4px; + -moz-border-start: 1px dotted #000; + color: #080; +} + +/* Variables and properties editing */ + +.variables-view-delete { + background: url("chrome://browser/skin/devtools/vview-delete.png"); + background-size: cover; + width: 16px; + height: 16px; +} + +@media (min-resolution: 1.25dppx) { + .variables-view-delete { + background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); + } +} + +.variables-view-delete:hover { + background-position: 16px; +} + +.variables-view-delete:active { + background-position: 32px; +} + +.variable-or-property:focus > .title > .variables-view-delete { + background-position: 0px; +} + +.variables-view-edit { + background: url("chrome://browser/skin/devtools/vview-edit.png"); + background-size: cover; + width: 16px; + height: 16px; + cursor: pointer; +} + +@media (min-resolution: 1.25dppx) { + .variables-view-edit { + background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); + } +} + +.variables-view-edit:hover { + background-position: 16px; +} + +.variables-view-edit:active { + background-position: 32px; +} + +.variable-or-property:focus > .title > .variables-view-edit { + background-position: 0px; +} + +.variables-view-open-inspector { + background: url("chrome://browser/skin/devtools/vview-open-inspector.png"); + background-size: cover; + width: 16px; + height: 16px; + cursor: pointer; +} + +@media (min-resolution: 1.25dppx) { + .variables-view-open-inspector { + background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); + } +} + +.variables-view-open-inspector:hover { + background-position: 16px; +} + +.variables-view-open-inspector:active { + background-position: 32px; +} + +.variable-or-property:focus > .title > .variables-view-open-inspector { + background-position: 0px; +} + +/* Variables and properties input boxes */ + +.variable-or-property > .title > .separator + .element-value-input { + -moz-margin-start: -2px !important; + -moz-margin-end: 2px !important; +} + +.variable-or-property > .title > .separator[hidden=true] + .element-value-input { + -moz-margin-start: 4px !important; + -moz-margin-end: 2px !important; +} + +.element-name-input { + -moz-margin-start: -2px !important; + -moz-margin-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; + -moz-border-end: 1px solid; +} + +.theme-light .line-graph-widget-gutter { + background: rgba(255,255,255,0.75); + -moz-border-end-color: rgba(255,255,255,0.25); +} + +.theme-dark .line-graph-widget-gutter { + background: rgba(0,0,0,0.5); + -moz-border-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; + -moz-padding-start: 6px; + -moz-padding-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 { + -moz-border-end: 3px solid; + left: -3px; +} + +.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + -moz-border-start: 3px solid; + right: -3px; +} + +.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { + -moz-border-end-color: rgba(255,255,255,0.75); +} + +.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { + -moz-border-end-color: rgba(0,0,0,0.5); +} + +.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + -moz-border-start-color: rgba(255,255,255,0.75); +} + +.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + -moz-border-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] { + -moz-margin-start: 3px; +} + +.line-graph-widget-tooltip > [text=metric] { + -moz-margin-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-canvas { + background: #f7f7f7; +} + +.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; + -moz-margin-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; + -moz-margin-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; + -moz-margin-end: 10px; +} + +.table-chart-row-label { + width: 8em; + -moz-padding-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 { + border: none; +} + +.table-widget-body { + overflow: auto; +} + +.theme-light .table-widget-body { + background: var(--theme-sidebar-background); +} + +.theme-dark .table-widget-body, +.theme-dark .table-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + +.theme-dark .table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #aaa; +} + +.table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; +} + +/* Column Headers */ + +.theme-dark .table-widget-column-header, +.theme-dark .table-widget-cell { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: inset 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .table-widget-column-header, +.theme-light .table-widget-cell { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: inset 1px 0 0 transparent; +} + +/* Table widget column header colors are taken from netmonitor.inc.css to match + the look of both the tables. This needs to be updated along with netmonitor + header colors in bug 951714 */ + +.table-widget-column-header { + background: rgba(0,0,0,0); + position: sticky; + top: 0; + min-height: 32px; + width: 100%; + border: none; + padding: 8px 0 0 !important; + color: inherit; + text-align: center; + font-weight: inherit !important; + transition: background-color 0.1s ease-in-out; +} + +.table-widget-column-header:hover { + background: rgba(0,0,0,0.10); +} + +.table-widget-column-header:hover:active { + background: rgba(0,0,0,0.25); +} + +.table-widget-column-header:not(:active)[sorted] { + background: rgba(0,0,0,0.15); +} + +.table-widget-column-header:not(:active)[sorted=ascending] { + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; +} + +.table-widget-column-header:not(:active)[sorted=descending] { + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: bottom; +} + +/* Cells */ + +.table-widget-cell { + width: 100%; + margin: -1px 0 !important; + padding: 3px 4px; + background-clip: padding-box; + min-width: 100px; + -moz-user-focus: normal; +} + +.theme-dark .table-widget-cell { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); + color: var(--theme-selection-color); +} + +.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-dark .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(255,255,255,0.05); +} + +.theme-dark .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .table-widget-cell { + border-top: 1px solid rgba(128,128,128,0.15); + border-bottom: 1px solid transparent; +} + +.theme-light .table-widget-cell:not(.theme-selected) { + color: var(--theme-body-color); +} + +.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-light .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(128,128,128,0.05); +} + +.theme-light .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +} + +.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; +} + +.theme-light .table-widget-empty-text { + background: #F7F7F7; /* Background-Sidebar */ +} + +.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; + -moz-margin-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: 800; +} + +/* Twisties */ +.tree-widget-item:before { + content: ""; + width: 14px; + height: 14px; + float: left; + margin: 3px 2px -3px; + background-repeat: no-repeat; + background-image: url("chrome://browser/skin/devtools/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: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[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.25dppx) { + .tree-widget-item:before { + background-image: url("chrome://browser/skin/devtools/controls@2x.png"); + } +} + +/* Indentation of child items in the tree */ + +/* For level > 6 */ +.tree-widget-item[level] + ul > li > .tree-widget-item { + -moz-padding-start: 98px; +} + +/* First level */ +.tree-widget-item[level="1"] + ul > li > .tree-widget-item { + -moz-padding-start: 14px; +} + +/* Second level */ +.tree-widget-item[level="2"] + ul > li > .tree-widget-item { + -moz-padding-start: 28px; +} + +/* Third level */ +.tree-widget-item[level="3"] + ul > li > .tree-widget-item { + -moz-padding-start: 42px; +} + +/* Fourth level */ +.tree-widget-item[level="4"] + ul > li > .tree-widget-item { + -moz-padding-start: 56px; +} + +/* Fifth level */ +.tree-widget-item[level="5"] + ul > li > .tree-widget-item { + -moz-padding-start: 70px; +} + +/* Sixth level */ +.tree-widget-item[level="6"] + ul > li > .tree-widget-item { + -moz-padding-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; + -moz-margin-end: 4px; + background-repeat: no-repeat; + background-size: 20px auto; + filter: url('filters.svg#invert'); + background-position: 0 0; + background-size: auto 20px; +} + +.tree-widget-item:-moz-locale-dir(rtl):after { + float: right; +} + +.theme-dark .tree-widget-item[type]:after { + filter: url('filters.svg#invert-white'); +} + +.tree-widget-item[type="dir"]:after { + background-image: url(chrome://browser/skin/devtools/filetype-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://browser/skin/devtools/filetype-dir-open.svg); +} + +.tree-widget-item[type="url"]:after { + background-image: url(chrome://browser/skin/devtools/filetype-globe.svg); + background-size: auto 18px; + width: 18px; +} + +/* 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/. */ + +/* Manifest Editor overrides */ + +.variables-view-container.manifest-editor { + background-color: #F5F5F5; + padding: 20px 2px; +} + +.manifest-editor .variable-or-property:focus > .title { + background-color: #EDEDED; + color: #000; + border-radius: 4px; +} + +.manifest-editor .variables-view-property > .title > .name { + color: #27406A; +} + +.manifest-editor .variable-or-property > .title > label, +.manifest-editor textbox { + font-family: monospace; +} + +.manifest-editor .variable-or-property > .title > .token-string { + color: #54BC6A; + font-weight: bold; +} + +.manifest-editor .variable-or-property > .title > .token-boolean, +.manifest-editor .variable-or-property > .title > .token-number { + color: #009BD4; + font-weight: bold; +} + +.manifest-editor .variable-or-property > .title > .token-undefined { + color: #bbb; +} + +.manifest-editor .variable-or-property > .title > .token-null { + color: #999; +} + +.manifest-editor .variable-or-property > .title > .token-other { + color: #333; +} + +.manifest-editor .variables-view-variable { + border-bottom: none; +} + +.manifest-editor .variables-view-delete, +.manifest-editor .variables-view-delete:hover, +.manifest-editor .variables-view-delete:active, +.manifest-editor .variable-or-property:focus .variables-view-delete, +.manifest-editor .variables-view-add-property, +.manifest-editor .variables-view-add-property:hover, +.manifest-editor .variables-view-add-property:active, +.manifest-editor .variable-or-property:focus .variables-view-add-property { + list-style-image: none; + -moz-image-region: initial; +} + +.manifest-editor .variables-view-delete::before, +.manifest-editor .variables-view-add-property::before { + width: 11px; + height: 11px; + content: ""; + display: inline-block; + background-size: 11px auto; +} + +.manifest-editor .variables-view-delete::before { + background-image: url("app-manager/remove.svg"); +} + +.manifest-editor .variables-view-add-property::before { + background-image: url("app-manager/add.svg"); + -moz-margin-end: 2px; +} + +.side-menu-widget-group-checkbox .checkbox-spacer-box, +.side-menu-widget-item-checkbox .checkbox-spacer-box { + margin: 0; + border: none; +} -- cgit v1.2.3