From: Robert Kaiser Date: Sun, 28 Aug 2016 20:10:22 +0000 (+0200) Subject: first part of syncing LCARStrek with Firefox 45-48 devtools theme changes X-Git-Tag: LCARStrek-2.45~8 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=dadba0f24ba2459f70e098788b20b0e4ba96a7d2 first part of syncing LCARStrek with Firefox 45-48 devtools theme changes --- diff --git a/LCARStrek/chrome.manifest b/LCARStrek/chrome.manifest index f800c8e0..a2a9f380 100644 --- a/LCARStrek/chrome.manifest +++ b/LCARStrek/chrome.manifest @@ -11,3 +11,4 @@ skin chatzilla LCARStrek chatzilla/ skin inspector LCARStrek inspector/ skin browser LCARStrek browser/ skin devtools LCARStrek devtools/ +skin webide LCARStrek webide/ diff --git a/LCARStrek/devtools/animationinspector.css b/LCARStrek/devtools/animationinspector.css index b54d7765..cedee0e4 100644 --- a/LCARStrek/devtools/animationinspector.css +++ b/LCARStrek/devtools/animationinspector.css @@ -97,44 +97,19 @@ body { min-height: var(--toolbar-height); } -.devtools-button { - position: relative; -} - -.devtools-button::before { - content: ""; - display: block; - width: 16px; - height: 16px; - position: absolute; - left: 50%; - top: 50%; - margin: -8px 0 0 -8px; -} - #element-picker::before { - background-image: url("chrome://devtools/skin/command-pick.png"); + background-image: url("chrome://devtools/skin/command-pick.svg"); } .pause-button::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 */ -} - .pause-button.paused::before { background-image: url("debugger-play.png"); } @media (min-resolution: 1.1dppx) { - #element-picker::before { - background-image: url("chrome://devtools/skin/command-pick@2x.png"); - background-size: 64px; - } - .pause-button::before { background-image: url("debugger-pause@2x.png"); } @@ -144,6 +119,13 @@ body { } } +#timeline-rate select { + -moz-appearance: none; + text-align: center; + color: inherit; + font-family: inherit; +} + /* Animation timeline component */ .animation-timeline { @@ -310,6 +292,12 @@ body { padding: 0 2px; } +.animation-timeline .fast-track .name { + /* Animations running on the compositor have the fast-track background image*/ + background-image: url("images/animation-fast-track.svg"); + background-repeat: no-repeat; +} + .animation-timeline .animation .delay { position: absolute; top: 0; @@ -362,19 +350,20 @@ body { padding-left: 4px; } -.animation-target .node-selector { +.animation-target .node-highlighter { background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; padding-left: 16px; margin-right: 5px; cursor: pointer; } -.animation-target .node-selector:hover { - background-position: -32px 0; +.animation-target .node-highlighter:hover { + filter: url(images/filters.svg#checked-icon-state); } -.animation-target .node-selector:active { - background-position: -16px 0; +.animation-target .node-highlighter:active, +.animation-target .node-highlighter.selected { + filter: url(images/filters.svg#checked-icon-state); } /* Animation title gutter, contains the name, duration, iteration */ @@ -397,7 +386,7 @@ body { .animation-title .meta-data .compositor-icon { display: none; - background-image: url("animation-fast-track.svg"); + background-image: url("images/animation-fast-track.svg"); background-repeat: no-repeat; padding-left: 12px; /* Make sure the icon is positioned above the timeline range input so that diff --git a/LCARStrek/devtools/canvasdebugger.css b/LCARStrek/devtools/canvasdebugger.css index a532f100..04185aa4 100644 --- a/LCARStrek/devtools/canvasdebugger.css +++ b/LCARStrek/devtools/canvasdebugger.css @@ -14,7 +14,7 @@ min-width: 30px; min-height: 28px; margin: 0; - list-style-image: url("profiler-stopwatch.svg"); + list-style-image: url("images/profiler-stopwatch.svg"); } #empty-notice > button .button-text { @@ -38,19 +38,7 @@ } #record-snapshot { - list-style-image: url("chrome://devtools/skin/profiler-stopwatch-tbutton.svg"); -} - -#record-snapshot:hover { - list-style-image: url("chrome://devtools/skin/profiler-stopwatch.svg"); -} - -#record-snapshot[checked] { - list-style-image: url("chrome://devtools/skin/profiler-stopwatch-checked-tbutton.svg"); -} - -#record-snapshot[checked]:hover { - list-style-image: url("chrome://devtools/skin/profiler-stopwatch-checked.svg"); + list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch-tbutton.svg"); } /* Snapshots items */ @@ -116,14 +104,8 @@ /* 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 { @@ -141,7 +123,6 @@ @media (min-resolution: 1.1dppx) { #resume { list-style-image: url(debugger-play@2x.png); - -moz-image-region: rect(0px,64px,32px,32px); } #step-over { @@ -157,14 +138,6 @@ } } -#debugging-controls > toolbarbutton { - transition: opacity 0.15s ease-in-out; -} - -#debugging-controls > toolbarbutton[disabled=true] { - opacity: 0.5; -} - #calls-slider { -moz-padding-end: 24px; } diff --git a/LCARStrek/devtools/command-console.png b/LCARStrek/devtools/command-console.png deleted file mode 100644 index db7103e1..00000000 Binary files a/LCARStrek/devtools/command-console.png and /dev/null differ diff --git a/LCARStrek/devtools/command-console@2x.png b/LCARStrek/devtools/command-console@2x.png deleted file mode 100644 index 6b155749..00000000 Binary files a/LCARStrek/devtools/command-console@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-eyedropper.png b/LCARStrek/devtools/command-eyedropper.png deleted file mode 100644 index 6b95ad1c..00000000 Binary files a/LCARStrek/devtools/command-eyedropper.png and /dev/null differ diff --git a/LCARStrek/devtools/command-eyedropper@2x.png b/LCARStrek/devtools/command-eyedropper@2x.png deleted file mode 100644 index 6cd4fdb9..00000000 Binary files a/LCARStrek/devtools/command-eyedropper@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-frames.png b/LCARStrek/devtools/command-frames.png deleted file mode 100755 index 03facefc..00000000 Binary files a/LCARStrek/devtools/command-frames.png and /dev/null differ diff --git a/LCARStrek/devtools/command-frames@2x.png b/LCARStrek/devtools/command-frames@2x.png deleted file mode 100755 index e09015a7..00000000 Binary files a/LCARStrek/devtools/command-frames@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-paintflashing.png b/LCARStrek/devtools/command-paintflashing.png deleted file mode 100644 index 5f444210..00000000 Binary files a/LCARStrek/devtools/command-paintflashing.png and /dev/null differ diff --git a/LCARStrek/devtools/command-paintflashing@2x.png b/LCARStrek/devtools/command-paintflashing@2x.png deleted file mode 100644 index 9eee5caa..00000000 Binary files a/LCARStrek/devtools/command-paintflashing@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-pick.png b/LCARStrek/devtools/command-pick.png deleted file mode 100644 index e799e7cd..00000000 Binary files a/LCARStrek/devtools/command-pick.png and /dev/null differ diff --git a/LCARStrek/devtools/command-pick@2x.png b/LCARStrek/devtools/command-pick@2x.png deleted file mode 100644 index 0afb2de8..00000000 Binary files a/LCARStrek/devtools/command-pick@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-responsivemode.png b/LCARStrek/devtools/command-responsivemode.png deleted file mode 100644 index 39b1ecd2..00000000 Binary files a/LCARStrek/devtools/command-responsivemode.png and /dev/null differ diff --git a/LCARStrek/devtools/command-responsivemode@2x.png b/LCARStrek/devtools/command-responsivemode@2x.png deleted file mode 100644 index 3821a699..00000000 Binary files a/LCARStrek/devtools/command-responsivemode@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-rulers.png b/LCARStrek/devtools/command-rulers.png deleted file mode 100644 index a6060627..00000000 Binary files a/LCARStrek/devtools/command-rulers.png and /dev/null differ diff --git a/LCARStrek/devtools/command-rulers@2x.png b/LCARStrek/devtools/command-rulers@2x.png deleted file mode 100644 index 35c3b066..00000000 Binary files a/LCARStrek/devtools/command-rulers@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-scratchpad.png b/LCARStrek/devtools/command-scratchpad.png deleted file mode 100644 index 1fa76f57..00000000 Binary files a/LCARStrek/devtools/command-scratchpad.png and /dev/null differ diff --git a/LCARStrek/devtools/command-scratchpad@2x.png b/LCARStrek/devtools/command-scratchpad@2x.png deleted file mode 100644 index f5df608c..00000000 Binary files a/LCARStrek/devtools/command-scratchpad@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-screenshot.png b/LCARStrek/devtools/command-screenshot.png deleted file mode 100644 index cdf4113d..00000000 Binary files a/LCARStrek/devtools/command-screenshot.png and /dev/null differ diff --git a/LCARStrek/devtools/command-screenshot@2x.png b/LCARStrek/devtools/command-screenshot@2x.png deleted file mode 100644 index 9779d636..00000000 Binary files a/LCARStrek/devtools/command-screenshot@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/command-tilt.png b/LCARStrek/devtools/command-tilt.png deleted file mode 100644 index 18540c48..00000000 Binary files a/LCARStrek/devtools/command-tilt.png and /dev/null differ diff --git a/LCARStrek/devtools/command-tilt@2x.png b/LCARStrek/devtools/command-tilt@2x.png deleted file mode 100644 index 79d2db2e..00000000 Binary files a/LCARStrek/devtools/command-tilt@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index 956270f7..95061a6a 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -3,70 +3,9 @@ * 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(variables.css); @import url(common.css); - -/* 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: #000000; - --theme-sidebar-background: #000000; - --theme-contrast-background: #402800; - --theme-contrast-border: #A09090; - --theme-contrast-background2: #795900; - - --theme-tab-toolbar-background: #402800; - --theme-toolbar-background: #000000; - --theme-hover-background: #FFCF00; - --theme-hover-color: #000000; - --theme-active-background: #FFCF00; - --theme-active-color: #000000; - --theme-selection-background: #008484; - --theme-selection-color: #000000; - --theme-selection-background2: #004242; - --theme-selection-color2: #FF9F00; - --theme-selection-background-semitransparent: rgba(0, 132, 132, .5); - --theme-splitter-color: #9C9CFF; - --theme-comment: #A09090; - - --theme-sidebar-background: #000000; - --theme-contrastsidebar-background: #A09090; - --theme-contrastsidebar-color: #000000; - --theme-contrastsidebar-bordercolor: #000000; - - --theme-body-color: #FF9F00; - --theme-body-color-alt: #A09090; - --theme-content-color1: #FF9F00; - --theme-content-color2: #A09090; - --theme-content-color3: #FF9F00; - --theme-content-color4: #9C9CFF; - --theme-content-disabled: #8050B0; - - --theme-text-blue: #3333FF; - --theme-highlight-green: #008484; - --theme-highlight-blue: #9C9CFF; - --theme-highlight-bluegrey: #A09090; - --theme-highlight-purple: #C09070; - --theme-highlight-darkpurple: #6000CF; - --theme-highlight-lightorange: #FFCF00; - --theme-highlight-orange: #FF9F00; - --theme-highlight-red: #FF0000; - --theme-highlight-pink: #E7ADE7; - - /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ - --theme-graphs-green: #008484; - --theme-graphs-blue: #9C9CFF; - --theme-graphs-bluegrey: #C09070; - --theme-graphs-purple: #C09070; - --theme-graphs-yellow: #FFCF00; - --theme-graphs-red: #FF0000; - --theme-graphs-grey: #A09090; - - /* Images */ - --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg); - --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg); -} +@import url(toolbars.css); body, html { padding: 0; @@ -450,827 +389,3 @@ div.CodeMirror span.eval-text { background-color: #000000; color: var(--theme-body-color); } - -/* === BEGIN toolbars.inc.css === */ - -/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ -.theme-light, -.theme-dark { - --searchbox-background-color: #000000; - --searchbox-border-color: #9C9CFF; - --searcbox-no-match-background-color: #400000; - --searcbox-no-match-border-color: #FF0000; -} - -/* Toolbars */ -.devtools-toolbar, -.devtools-sidebar-tabs tabs { -} - -.devtools-toolbar { -} - -.devtools-toolbar checkbox { - /* LCARStrek checkbox colors don't work well against toolbar background */ - background-color: var(--theme-toolbar-background); - padding: 2px; - line-height: -moz-block-height; -} -.devtools-toolbar checkbox .checkbox-check { -} -.devtools-toolbar checkbox .checkbox-label-box { -} -.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { -} - -/* Toolbar buttons */ -.devtools-menulist, -.devtools-toolbarbutton { -/* transition: background 0.05s ease-in-out; */ -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted var(--theme-selection-color); -} - -.devtools-toolbarbutton[standalone] { -} -.devtools-toolbarbutton[label][standalone] { -} - -.devtools-toolbarbutton:not([label]), -.devtools-toolbarbutton[text-as-image] { - min-width: 20px; -} - -#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 { - -moz-margin-start: 2px; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { -/* -moz-box-orient: horizontal; */ -} - -.devtools-toolbarbutton[type=menu-button] { -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { -} - -.devtools-menulist > .menulist-dropmarker { -} - -.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { -} - -.devtools-menulist, -.devtools-toolbarbutton { -} - -/* Text-only buttons */ -.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -#toolbox-buttons .devtools-toolbarbutton[text-as-image] { -/* background-color: rgba(0, 0, 0, .2); / Splitter */ -} - -/* Button States */ -.devtools-toolbarbutton:not([disabled]):hover, -#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { -/* background: rgba(0, 0, 0, .3); / Splitters */ -} - -.devtools-toolbarbutton:not([disabled]):hover:active, -#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { -/* background: rgba(0, 0, 0, .4); / Splitters */ -} - -/* Menu type buttons and checked states */ -.devtools-toolbarbutton[checked=true], -#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { -/* background: rgba(29, 79, 115, .7); / Select highlight blue / - color: var(--theme-selection-color); */ -} - -.devtools-menulist[open=true], -.devtools-toolbarbutton[open=true], -.devtools-toolbarbutton[open=true]:hover, -.devtools-toolbarbutton[open=true]:hover:active, -.devtools-toolbarbutton[checked=true], -.devtools-toolbarbutton[checked=true]:hover, -#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { -/* background: rgba(29, 79, 115, .8); / Select highlight blue / - color: var(--theme-selection-color); */ -} - -.devtools-toolbarbutton[checked=true]:hover { -} - -.devtools-option-toolbarbutton { - list-style-image: url("chrome://devtools/skin/tool-options-tbutton.svg"); -/* background: none; - border: none; */ -} - -.devtools-option-toolbarbutton:hover, -.devtools-option-toolbarbutton[open=true] { - list-style-image: url("chrome://devtools/skin/tool-options.svg"); -} - -/* Toolbar button groups */ -.devtools-toolbarbutton-group > .devtools-toolbarbutton { -} - -.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { -} - -.devtools-toolbarbutton-group + .devtools-toolbarbutton { -} - -.devtools-separator + .devtools-toolbarbutton { -} - -/* 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); - color: var(--theme-body-color); - margin: 0 1px; - padding: 0 6px; - min-width: 16px; - 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 */ -.devtools-button:not([disabled]):hover { - background: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.devtools-button:not([disabled]):hover:active { - background: var(--theme-active-background); - color: var(--theme-active-color); -} - -/* Menu type buttons and checked states */ -.devtools-button[checked] { - background: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.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; -} - -.devtools-button[disabled]::before, -.devtools-button:disabled::before { - opacity: 0.5; -} - -@media (min-resolution: 1.1dppx) { - .devtools-button::before { - background-size: 32px; - } -} - -:root { - --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); -} - -.devtools-button.devtools-clear-icon::before { - background-image: var(--clear-icon-url); -} - -.devtools-toolbarbutton.devtools-clear-icon { - list-style-image: var(--clear-icon-url); -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { -/* -moz-appearance: none; - margin: 0 3px; - border: 1px solid rgb(88, 94, 101); - border-radius: 2px; - background-color: rgba(24, 29, 32, 1); - padding: 4px 6px; - color: rgba(184, 200, 217, 1);*/ -} - -.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; - - background-image: url("magnifying-glass.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: flex; - 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; -} - -.devtools-searchinput-clear { - background-image: url("chrome://devtools/skin/search-clear.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://devtools/skin/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://devtools/skin/search-clear.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.1dppx) { - .devtools-searchinput { - background-image: url("magnifying-glass@2x.png"); - } -} - -/* Close button */ - -.devtools-closebutton { - min-width: 16px; - width: 16px; -} - -.devtools-closebutton > image { - width: 16px; - height: 16px; - -moz-appearance: none; - background-size: 32px 16px; - background-image: url("chrome://devtools/skin/close@2x.png"); - background-position: 0 center; - background-repeat: no-repeat; -} - -.devtools-closebutton:hover > image, -.devtools-closebutton:hover:active > image { - background-position: -16px center; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -#toolbox-close::before { - background-image: url("chrome://devtools/skin/close@2x.png"); -} - -/* In-tools sidebar */ - -.devtools-sidebar-tabs { -} - -.devtools-sidebar-tabs > tabpanels { - padding: 0; - border: 0; -} - -.devtools-sidebar-tabs tabs { - position: static; - overflow: hidden; -} - -.devtools-sidebar-alltabs { -/* 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 { - min-width: 78px; - text-align: center; - -moz-box-flex: 1; - position: static; - margin-top: 0; -} - -.devtools-sidebar-tabs tabs > tab:-moz-focusring { - position: static; -} - -.devtools-sidebar-tabs tabs > tab:first-of-type { - -moz-margin-start: 0; -} - -.devtools-sidebar-tabs tabs > tab:last-of-type { - -moz-border-end-width: 0; -} - -.devtools-sidebar-tabs tabs > tab { -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected] + tab { -} - -.devtools-sidebar-tabs tabs > tab:first-child { -} - -.devtools-sidebar-tabs tabs > tab:hover { -} - -.devtools-sidebar-tabs tabs > tab:hover:active { -} - -.devtools-sidebar-tabs tabs > tab[selected] + tab:hover { -} - -.devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected]:hover:active { -} - -/* 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 { - min-width: 16px; -/* padding: 1px 3px; */ -} - -#toolbox-dock-buttons > toolbarbutton > image { - width: 16px; - height: 16px; - background-size: 32px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} - -#toolbox-dock-buttons > toolbarbutton:hover > image { - background-position: -16px center; -} - -#toolbox-dock-bottom::before, -#toolbox-dock-bottom > image { - background-image: url("chrome://devtools/skin/dock-bottom@2x.png"); -} - -#toolbox-dock-side::before, -#toolbox-dock-side > image { - background-image: url("chrome://devtools/skin/dock-side@2x.png"); -} - -#toolbox-dock-window::before, -#toolbox-dock-window > image { - background-image: url("chrome://devtools/skin/undock@2x.png"); -} - -#toolbox-dock-bottom-minimize { - /* Bug 1177463 - The minimize button is currently hidden until we agree on - the UI for it, and until bug 1173849 is fixed too. */ - display: none; -} - -#toolbox-dock-bottom-minimize > image { - background-image: url("chrome://devtools/skin/dock-bottom-minimize@2x.png"); -} - -#toolbox-dock-bottom-minimize.minimized > image { - background-image: url("chrome://devtools/skin/dock-bottom-maximize@2x.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { -} - -.devtools-separator { - margin: 0 2px; - width: 2px; -} - -#toolbox-buttons:empty + .devtools-separator, -.devtools-separator[invisible] { - visibility: hidden; -} - -#toolbox-controls-separator { - margin: 0; - width: 1px; -} - -/* Command buttons */ - -.command-button { -/* padding: 1px 4px; */ - min-width: 16px; -} - -.command-button:hover { -} -.command-button:hover:active { -} - -#toolbox-close::before, -.toolbox-dock-button::before, -.command-button::before, -.command-button > image { - width: 16px; - height: 16px; - background-size: 32px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} - -#toolbox-close:hover::before, -#toolbox-close:hover:active::before, -.toolbox-dock-button:hover::before, -.toolbox-dock-button:hover:active::before, -.command-button:hover::before, -.command-button:hover:active::before, -.command-button[checked=true]::before, -.command-button[open=true]::before, -.command-button:hover > image, -.command-button:hover:active > image, -.command-button[checked=true] > image, -.command-button[open=true] > image { - background-position: -16px center; -} - -#command-button-paintflashing::before, -#command-button-paintflashing > image { - background-image: url("chrome://devtools/skin/command-paintflashing.png"); -} - -#command-button-screenshot::before, -#command-button-screenshot > image { - background-image: url("chrome://devtools/skin/command-screenshot.png"); -} - -#command-button-responsive::before, -#command-button-responsive > image { - background-image: url("chrome://devtools/skin/command-responsivemode.png"); -} - -#command-button-tilt::before, -#command-button-tilt > image { - background-image: url("chrome://devtools/skin/command-tilt.png"); -} - -#command-button-scratchpad::before, -#command-button-scratchpad > image { - background-image: url("chrome://devtools/skin/command-scratchpad.png"); -} - -#command-button-pick::before, -#command-button-pick > image { - background-image: url("chrome://devtools/skin/command-pick.png"); -} - -#command-button-frames::before, -#command-button-frames > image { - background-image: url("chrome://devtools/skin/command-frames.png"); -} - -#command-button-splitconsole::before, -#command-button-splitconsole > image { - background-image: url("chrome://devtools/skin/command-console.png"); -} - -#command-button-eyedropper::before, -#command-button-eyedropper > image { - background-image: url("chrome://devtools/skin/command-eyedropper.png"); -} - -#command-button-rulers::before, -#command-button-rulers > image { - background-image: url("chrome://devtools/skin/command-rulers.png"); -} - -#command-button-measure::before, -#command-button-measure > image { - background-image: url("chrome://devtools/skin/images/command-measure.png"); -} - -@media (min-resolution: 1.1dppx) { - #command-button-paintflashing > image { - background-image: url("chrome://devtools/skin/command-paintflashing@2x.png"); - } - - #command-button-screenshot > image { - background-image: url("chrome://devtools/skin/command-screenshot@2x.png"); - } - - #command-button-responsive > image { - background-image: url("chrome://devtools/skin/command-responsivemode@2x.png"); - } - - #command-button-tilt > image { - background-image: url("chrome://devtools/skin/command-tilt@2x.png"); - } - - #command-button-scratchpad > image { - background-image: url("chrome://devtools/skin/command-scratchpad@2x.png"); - } - - #command-button-pick > image { - background-image: url("chrome://devtools/skin/command-pick@2x.png"); - } - - #command-button-frames > image { - background-image: url("chrome://devtools/skin/command-frames@2x.png"); - } - - #command-button-splitconsole > image { - background-image: url("chrome://devtools/skin/command-console@2x.png"); - } - - #command-button-eyedropper > image { - background-image: url("chrome://devtools/skin/command-eyedropper@2x.png"); - } - - #command-button-rulers > image { - background-image: url("chrome://devtools/skin/command-rulers@2x.png"); - } - - #command-button-measure > image { - background-image: url("chrome://devtools/skin/images/command-measure@2x.png"); - } -} - -/* Tabs */ - -.devtools-tabbar { -} - -#toolbox-tabs { - padding-inline-start: 3px; - margin-inline-start: 2px; /* this is only needed for the old button design */ - margin-inline-end: 3px; /* this is for the new ::before-based button design */ - background-color: #000000; - color: #FFCF00; -} - -.toolbox-panel { - display: -moz-box; - -moz-box-flex: 1; - visibility: collapse; -} - -#toolbox-deck[selectedIndex] > .toolbox-panel, /* workaround for Firefox 47 and older */ -.toolbox-panel[selected] { - visibility: visible; -} - -.devtools-tab { - min-width: 32px; - max-width: 110px; - color: #000000; - margin: 0; - -moz-margin-end: 3px; - padding: 1px; - -moz-padding-start: 3px; - background-color: #C09070; - border-radius: 8px 8px 0 0; -} - -.devtools-tab > image { - -moz-margin-end: 0px; -/* -moz-margin-start: 4px; */ - max-height: 16px; - width: 16px; /* Prevents collapse during theme switching */ -} - -.devtools-tab:hover > image { -} - -.devtools-tab:active > image, -.devtools-tab[selected] > image { -} - -.devtools-tab:hover, -.devtools-tab:hover:active { - background-color: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.devtools-tab[selected] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.devtools-tab > spacer { - max-width: 0; - -moz-box-flex: 0; -} - -.devtools-tab > image { - -moz-margin-end: 0; - -moz-margin-start: 0; -} - -#toolbox-picker-container { - margin-inline-start: 1px; -} - -#toolbox-option-container { - background-color: #000000; - padding-inline-start: 3px; - margin-inline-end: 1px; -} - -#toolbox-tab-options { - min-width: 20px; -} - -#toolbox-tab-options > image { - -moz-margin-end: 3px; -} - -.devtools-tab:not([highlighted]) > .highlighted-icon, -.devtools-tab[selected] > .highlighted-icon, -.devtools-tab:not([selected])[highlighted] > .default-icon { - visibility: collapse; -} - -.devtools-tab:not([selected])[highlighted] { -} - -.devtools-tab:not([selected])[highlighted] { - color: #FFCF00; -} - -.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;*/ -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} - -.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); - } -} - -/* === END toolbars.inc.css === */ diff --git a/LCARStrek/devtools/debugger-collapse.png b/LCARStrek/devtools/debugger-collapse.png index 35f10cfc..d44117df 100644 Binary files a/LCARStrek/devtools/debugger-collapse.png and b/LCARStrek/devtools/debugger-collapse.png differ diff --git a/LCARStrek/devtools/debugger-collapse@2x.png b/LCARStrek/devtools/debugger-collapse@2x.png index 6797bef9..d61be75e 100644 Binary files a/LCARStrek/devtools/debugger-collapse@2x.png and b/LCARStrek/devtools/debugger-collapse@2x.png differ diff --git a/LCARStrek/devtools/debugger-expand.png b/LCARStrek/devtools/debugger-expand.png index 47e9dad7..4aee62e6 100644 Binary files a/LCARStrek/devtools/debugger-expand.png and b/LCARStrek/devtools/debugger-expand.png differ diff --git a/LCARStrek/devtools/debugger-expand@2x.png b/LCARStrek/devtools/debugger-expand@2x.png index a81b21e4..c70d8ed0 100644 Binary files a/LCARStrek/devtools/debugger-expand@2x.png and b/LCARStrek/devtools/debugger-expand@2x.png differ diff --git a/LCARStrek/devtools/debugger-pause.png b/LCARStrek/devtools/debugger-pause.png index 2581cf8c..740ae2fa 100644 Binary files a/LCARStrek/devtools/debugger-pause.png and b/LCARStrek/devtools/debugger-pause.png differ diff --git a/LCARStrek/devtools/debugger-pause@2x.png b/LCARStrek/devtools/debugger-pause@2x.png index 1dd43349..4d395bff 100644 Binary files a/LCARStrek/devtools/debugger-pause@2x.png and b/LCARStrek/devtools/debugger-pause@2x.png differ diff --git a/LCARStrek/devtools/debugger-play.png b/LCARStrek/devtools/debugger-play.png index ce2a8afc..868c8ed5 100644 Binary files a/LCARStrek/devtools/debugger-play.png and b/LCARStrek/devtools/debugger-play.png differ diff --git a/LCARStrek/devtools/debugger-play@2x.png b/LCARStrek/devtools/debugger-play@2x.png index 59bbcd5f..2632a8e1 100644 Binary files a/LCARStrek/devtools/debugger-play@2x.png and b/LCARStrek/devtools/debugger-play@2x.png differ diff --git a/LCARStrek/devtools/debugger.css b/LCARStrek/devtools/debugger.css index 64fe1902..c2a5af7a 100644 --- a/LCARStrek/devtools/debugger.css +++ b/LCARStrek/devtools/debugger.css @@ -35,6 +35,10 @@ window { min-width: 32px; } +#sources-toolbar .devtools-toolbarbutton:not([label]) { + -moz-image-region: rect(0,16px,16px,0); +} + #black-box { list-style-image: url("debugger-blackbox.png"); } @@ -59,48 +63,31 @@ window { list-style-image: url("debugger-toggleBreakpoints.png"); } -@media (min-resolution: 1.1dppx) { - #toggle-breakpoints { - list-style-image: url(debugger-toggleBreakpoints@2x.png); - } -} - -#toggle-promise-debugger { - /* TODO Bug 1186119: Add a toggle promise debugger image */ -} - -#sources-toolbar .devtools-toolbarbutton:not([label]) { - -moz-image-region: rect(0px, 16px, 16px, 0px); +#toggle-breakpoints[checked] { + -moz-image-region: rect(0,32px,16px,16px) !important; } -#sources-toolbar .devtools-toolbarbutton:not([label]):hover { - -moz-image-region: rect(16px, 16px, 32px, 0px); -} - -#sources-toolbar .devtools-toolbarbutton:not([label])[checked] { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover { - -moz-image-region: rect(16px, 32px, 32px, 16px); +#toggle-breakpoints[checked] > image { + /* This button has a special checked image, don't make it blue */ + filter: none; } @media (min-resolution: 1.1dppx) { #sources-toolbar .devtools-toolbarbutton:not([label]) { - -moz-image-region: rect(0px,32px,32px,0px); + -moz-image-region: rect(0,32px,32px,0); } - #sources-toolbar .devtools-toolbarbutton:not([label]):hover { - -moz-image-region: rect(32px,32px,64px,0px); + #toggle-breakpoints { + list-style-image: url(debugger-toggleBreakpoints@2x.png); } - #sources-toolbar .devtools-toolbarbutton:not([label])[checked] { - -moz-image-region: rect(0px,64px,32px,32px); + #toggle-breakpoints[checked] { + -moz-image-region: rect(0,64px,32px,32px) !important; } +} - #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover { - -moz-image-region: rect(32px,64px,64px,32px); - } +#toggle-promise-debugger { + /* TODO Bug 1186119: Add a toggle promise debugger image */ } #sources .black-boxed { @@ -177,8 +164,7 @@ window { -moz-image-region: rect(0px,16px,16px,0px); } -#trace:hover, -#trace[checked] { +#trace:hover { -moz-image-region: rect(0px,32px,16px,16px); } @@ -581,12 +567,6 @@ window { -moz-image-region: rect(0px, 32px, 16px, 16px); } -#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("chrome://devtools/skin/debugger-pause.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); @@ -615,15 +595,6 @@ window { } } -#debugger-controls toolbarbutton { -/* transition: opacity 0.15s ease-in-out; */ -} - -#debugger-controls toolbarbutton[disabled] { -/* opacity: 0.5; - transition: none; */ -} - #resume[break-on-next] { background: var(--theme-highlight-lightorange); } @@ -682,34 +653,21 @@ window { } #instruments-pane-toggle { -/* background: none; - box-shadow: none; - border: none; */ list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); - -moz-image-region: rect(0px,16px,16px,0px); } #instruments-pane-toggle[pane-collapsed] { list-style-image: url("chrome://devtools/skin/debugger-expand.png"); } -#instruments-pane-toggle:hover { - -moz-image-region: rect(0px,32px,16px,16px); -} - @media (min-resolution: 1.1dppx) { #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 */ diff --git a/LCARStrek/devtools/fast-forward.png b/LCARStrek/devtools/fast-forward.png index 80709a10..9ea74dd5 100644 Binary files a/LCARStrek/devtools/fast-forward.png and b/LCARStrek/devtools/fast-forward.png differ diff --git a/LCARStrek/devtools/fast-forward@2x.png b/LCARStrek/devtools/fast-forward@2x.png index b95c17a7..b9089840 100644 Binary files a/LCARStrek/devtools/fast-forward@2x.png and b/LCARStrek/devtools/fast-forward@2x.png differ diff --git a/LCARStrek/devtools/animation-fast-track.svg b/LCARStrek/devtools/images/animation-fast-track.svg similarity index 100% rename from LCARStrek/devtools/animation-fast-track.svg rename to LCARStrek/devtools/images/animation-fast-track.svg diff --git a/LCARStrek/devtools/images/close.svg b/LCARStrek/devtools/images/close.svg new file mode 100644 index 00000000..24535e91 --- /dev/null +++ b/LCARStrek/devtools/images/close.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/command-console.svg b/LCARStrek/devtools/images/command-console.svg new file mode 100644 index 00000000..b197dae9 --- /dev/null +++ b/LCARStrek/devtools/images/command-console.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/command-eyedropper.png b/LCARStrek/devtools/images/command-eyedropper.png deleted file mode 100644 index 6b95ad1c..00000000 Binary files a/LCARStrek/devtools/images/command-eyedropper.png and /dev/null differ diff --git a/LCARStrek/devtools/images/command-eyedropper.svg b/LCARStrek/devtools/images/command-eyedropper.svg new file mode 100644 index 00000000..8c990583 --- /dev/null +++ b/LCARStrek/devtools/images/command-eyedropper.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/command-eyedropper@2x.png b/LCARStrek/devtools/images/command-eyedropper@2x.png deleted file mode 100644 index 6cd4fdb9..00000000 Binary files a/LCARStrek/devtools/images/command-eyedropper@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/images/command-frames.svg b/LCARStrek/devtools/images/command-frames.svg new file mode 100644 index 00000000..e0e12b54 --- /dev/null +++ b/LCARStrek/devtools/images/command-frames.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/command-measure.png b/LCARStrek/devtools/images/command-measure.png deleted file mode 100644 index a90bb75e..00000000 Binary files a/LCARStrek/devtools/images/command-measure.png and /dev/null differ diff --git a/LCARStrek/devtools/images/command-measure.svg b/LCARStrek/devtools/images/command-measure.svg new file mode 100644 index 00000000..2366d576 --- /dev/null +++ b/LCARStrek/devtools/images/command-measure.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/command-measure@2x.png b/LCARStrek/devtools/images/command-measure@2x.png deleted file mode 100644 index 4e1eb9a2..00000000 Binary files a/LCARStrek/devtools/images/command-measure@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/images/command-noautohide.svg b/LCARStrek/devtools/images/command-noautohide.svg new file mode 100755 index 00000000..fb04f56e --- /dev/null +++ b/LCARStrek/devtools/images/command-noautohide.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/command-paintflashing.svg b/LCARStrek/devtools/images/command-paintflashing.svg new file mode 100644 index 00000000..2aa205c5 --- /dev/null +++ b/LCARStrek/devtools/images/command-paintflashing.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/command-pick.svg b/LCARStrek/devtools/images/command-pick.svg new file mode 100644 index 00000000..63191e0f --- /dev/null +++ b/LCARStrek/devtools/images/command-pick.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/LCARStrek/devtools/images/command-responsivemode.svg b/LCARStrek/devtools/images/command-responsivemode.svg new file mode 100644 index 00000000..d825b7ff --- /dev/null +++ b/LCARStrek/devtools/images/command-responsivemode.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/command-rulers.svg b/LCARStrek/devtools/images/command-rulers.svg new file mode 100644 index 00000000..0f620ffe --- /dev/null +++ b/LCARStrek/devtools/images/command-rulers.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/command-scratchpad.svg b/LCARStrek/devtools/images/command-scratchpad.svg new file mode 100644 index 00000000..6fa3ee65 --- /dev/null +++ b/LCARStrek/devtools/images/command-scratchpad.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/filters.svg b/LCARStrek/devtools/images/filters.svg index a06b3429..384a18b6 100644 --- a/LCARStrek/devtools/images/filters.svg +++ b/LCARStrek/devtools/images/filters.svg @@ -3,19 +3,12 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - - - - - - - - - - - - + + diff --git a/LCARStrek/devtools/images/import.svg b/LCARStrek/devtools/images/import.svg new file mode 100644 index 00000000..96855bec --- /dev/null +++ b/LCARStrek/devtools/images/import.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/LCARStrek/devtools/images/power.svg b/LCARStrek/devtools/images/power.svg new file mode 100644 index 00000000..1fc7fb2b --- /dev/null +++ b/LCARStrek/devtools/images/power.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/profiler-stopwatch-tbutton.svg b/LCARStrek/devtools/images/profiler-stopwatch-tbutton.svg similarity index 100% rename from LCARStrek/devtools/profiler-stopwatch-tbutton.svg rename to LCARStrek/devtools/images/profiler-stopwatch-tbutton.svg diff --git a/LCARStrek/devtools/profiler-stopwatch.svg b/LCARStrek/devtools/images/profiler-stopwatch.svg similarity index 100% rename from LCARStrek/devtools/profiler-stopwatch.svg rename to LCARStrek/devtools/images/profiler-stopwatch.svg diff --git a/LCARStrek/devtools/images/pseudo-class.svg b/LCARStrek/devtools/images/pseudo-class.svg index 5c41473d..88613aba 100644 --- a/LCARStrek/devtools/images/pseudo-class.svg +++ b/LCARStrek/devtools/images/pseudo-class.svg @@ -1,29 +1,7 @@ - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/LCARStrek/devtools/tool-webconsole.svg b/LCARStrek/devtools/images/timeline-filter.svg similarity index 77% rename from LCARStrek/devtools/tool-webconsole.svg rename to LCARStrek/devtools/images/timeline-filter.svg index 4b25e5ef..ca986465 100644 --- a/LCARStrek/devtools/tool-webconsole.svg +++ b/LCARStrek/devtools/images/timeline-filter.svg @@ -2,5 +2,5 @@ - 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/. --> - + diff --git a/LCARStrek/devtools/images/tool-canvas.svg b/LCARStrek/devtools/images/tool-canvas.svg index 13c4783f..4fd94d69 100644 --- a/LCARStrek/devtools/images/tool-canvas.svg +++ b/LCARStrek/devtools/images/tool-canvas.svg @@ -1,8 +1,9 @@ - - - - - \ No newline at end of file + + + + + + diff --git a/LCARStrek/devtools/images/tool-debugger-paused.svg b/LCARStrek/devtools/images/tool-debugger-paused.svg index 2ab4e444..7c7d85f9 100644 --- a/LCARStrek/devtools/images/tool-debugger-paused.svg +++ b/LCARStrek/devtools/images/tool-debugger-paused.svg @@ -1,6 +1,6 @@ - - + + diff --git a/LCARStrek/devtools/images/tool-debugger.svg b/LCARStrek/devtools/images/tool-debugger.svg index 5248a1d5..7c7d85f9 100644 --- a/LCARStrek/devtools/images/tool-debugger.svg +++ b/LCARStrek/devtools/images/tool-debugger.svg @@ -1,10 +1,6 @@ - - - - - - + + diff --git a/LCARStrek/devtools/images/tool-inspector.svg b/LCARStrek/devtools/images/tool-inspector.svg index 8588d229..d41de5aa 100644 --- a/LCARStrek/devtools/images/tool-inspector.svg +++ b/LCARStrek/devtools/images/tool-inspector.svg @@ -1,12 +1,7 @@ - - - - - - - - + + + diff --git a/LCARStrek/devtools/images/tool-network.svg b/LCARStrek/devtools/images/tool-network.svg index 2a036c69..ed9b927e 100644 --- a/LCARStrek/devtools/images/tool-network.svg +++ b/LCARStrek/devtools/images/tool-network.svg @@ -1,39 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + diff --git a/LCARStrek/devtools/images/tool-options-tbutton.svg b/LCARStrek/devtools/images/tool-options-tbutton.svg index b54c3cce..c2c1c37c 100644 --- a/LCARStrek/devtools/images/tool-options-tbutton.svg +++ b/LCARStrek/devtools/images/tool-options-tbutton.svg @@ -2,5 +2,5 @@ - 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/. --> - + diff --git a/LCARStrek/devtools/images/tool-profiler-active.svg b/LCARStrek/devtools/images/tool-profiler-active.svg index bf0c54aa..d411c289 100644 --- a/LCARStrek/devtools/images/tool-profiler-active.svg +++ b/LCARStrek/devtools/images/tool-profiler-active.svg @@ -1,17 +1,10 @@ - - - - - - - - - - - - - + + + + + + diff --git a/LCARStrek/devtools/images/tool-profiler.svg b/LCARStrek/devtools/images/tool-profiler.svg index d91760df..0b189197 100644 --- a/LCARStrek/devtools/images/tool-profiler.svg +++ b/LCARStrek/devtools/images/tool-profiler.svg @@ -1,17 +1,9 @@ - - - - - - - - - - - - - + + + + + diff --git a/LCARStrek/devtools/images/tool-shadereditor.svg b/LCARStrek/devtools/images/tool-shadereditor.svg index 8861bb3c..8e63794b 100644 --- a/LCARStrek/devtools/images/tool-shadereditor.svg +++ b/LCARStrek/devtools/images/tool-shadereditor.svg @@ -1,9 +1,12 @@ - - - - - - \ No newline at end of file + + + + + + + + + diff --git a/LCARStrek/devtools/images/tool-storage.svg b/LCARStrek/devtools/images/tool-storage.svg index aa0b8ad6..a62d2adb 100644 --- a/LCARStrek/devtools/images/tool-storage.svg +++ b/LCARStrek/devtools/images/tool-storage.svg @@ -1,10 +1,7 @@ - - - - - - + + + diff --git a/LCARStrek/devtools/images/tool-styleeditor.svg b/LCARStrek/devtools/images/tool-styleeditor.svg index 718c22f6..b4f26ab9 100644 --- a/LCARStrek/devtools/images/tool-styleeditor.svg +++ b/LCARStrek/devtools/images/tool-styleeditor.svg @@ -1,9 +1,6 @@ - - - - - + + diff --git a/LCARStrek/devtools/images/tool-webaudio.svg b/LCARStrek/devtools/images/tool-webaudio.svg index e07dc842..2e82cf74 100644 --- a/LCARStrek/devtools/images/tool-webaudio.svg +++ b/LCARStrek/devtools/images/tool-webaudio.svg @@ -1,6 +1,6 @@ - - + + diff --git a/LCARStrek/devtools/images/tool-webconsole.svg b/LCARStrek/devtools/images/tool-webconsole.svg index 4b25e5ef..69c13e0f 100644 --- a/LCARStrek/devtools/images/tool-webconsole.svg +++ b/LCARStrek/devtools/images/tool-webconsole.svg @@ -1,6 +1,7 @@ - - + + + diff --git a/LCARStrek/devtools/images/vview-delete.png b/LCARStrek/devtools/images/vview-delete.png index 42406977..6e857187 100644 Binary files a/LCARStrek/devtools/images/vview-delete.png and b/LCARStrek/devtools/images/vview-delete.png differ diff --git a/LCARStrek/devtools/images/vview-delete@2x.png b/LCARStrek/devtools/images/vview-delete@2x.png index 860a59de..66e0fdcf 100644 Binary files a/LCARStrek/devtools/images/vview-delete@2x.png and b/LCARStrek/devtools/images/vview-delete@2x.png differ diff --git a/LCARStrek/devtools/images/vview-edit.png b/LCARStrek/devtools/images/vview-edit.png index 3c31a043..446f7b00 100644 Binary files a/LCARStrek/devtools/images/vview-edit.png and b/LCARStrek/devtools/images/vview-edit.png differ diff --git a/LCARStrek/devtools/images/vview-edit@2x.png b/LCARStrek/devtools/images/vview-edit@2x.png index af998a3b..353d7ea3 100644 Binary files a/LCARStrek/devtools/images/vview-edit@2x.png and b/LCARStrek/devtools/images/vview-edit@2x.png differ diff --git a/LCARStrek/devtools/images/vview-lock.png b/LCARStrek/devtools/images/vview-lock.png index 61d69b96..b9df4314 100644 Binary files a/LCARStrek/devtools/images/vview-lock.png and b/LCARStrek/devtools/images/vview-lock.png differ diff --git a/LCARStrek/devtools/images/vview-lock@2x.png b/LCARStrek/devtools/images/vview-lock@2x.png index 4c65b088..f1571db2 100644 Binary files a/LCARStrek/devtools/images/vview-lock@2x.png and b/LCARStrek/devtools/images/vview-lock@2x.png differ diff --git a/LCARStrek/devtools/images/vview-open-inspector.png b/LCARStrek/devtools/images/vview-open-inspector.png index a22b21ca..91c49702 100644 Binary files a/LCARStrek/devtools/images/vview-open-inspector.png and b/LCARStrek/devtools/images/vview-open-inspector.png differ diff --git a/LCARStrek/devtools/images/vview-open-inspector@2x.png b/LCARStrek/devtools/images/vview-open-inspector@2x.png index e22857d6..b95b3090 100644 Binary files a/LCARStrek/devtools/images/vview-open-inspector@2x.png and b/LCARStrek/devtools/images/vview-open-inspector@2x.png differ diff --git a/LCARStrek/devtools/memory.css b/LCARStrek/devtools/memory.css index 25fd76c2..0351cb09 100644 --- a/LCARStrek/devtools/memory.css +++ b/LCARStrek/devtools/memory.css @@ -108,6 +108,16 @@ html, body, #app, #memory-tool { background-image: url(chrome://devtools/skin/images/diff.svg); } +#import-snapshot::before { + background-image: url(chrome://devtools/skin/images/import.svg); +} + +#record-allocation-stacks-label, +#pop-view-button-label { + border-inline-end: 1px solid var(--theme-splitter-color); + padding-inline-end: 5px; +} + /** * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides * .devtools-toolbarbutton's min-width of 78px, reset the min-width. @@ -191,11 +201,32 @@ html, body, #app, #memory-tool { font-size: 90%; } +.snapshot-list-item .snapshot-title { + display: flex; + justify-content: space-between; +} + .snapshot-list-item .save { text-decoration: underline; cursor: pointer; } +.snapshot-list-item .delete { + cursor: pointer; + position: relative; + min-height: 1em; + min-width: 1.3em; +} + +.theme-light .snapshot-list-item.selected .delete { +/* filter: invert(100%);*/ +} + +.snapshot-list-item .delete::before { + background-image: url("chrome://devtools/skin/images/close.svg"); + background-position: 0.2em 0; +} + .snapshot-list-item > .snapshot-title { margin-bottom: 14px; } @@ -401,6 +432,7 @@ html, body, #app, #memory-tool { color: var(--theme-selection-background); } +.heap-tree-item-individuals, .heap-tree-item-bytes, .heap-tree-item-count, .heap-tree-item-total-bytes, @@ -487,6 +519,33 @@ html, body, #app, #memory-tool { color: inherit; } +.heap-tree-item-individuals { + width: 38px; + min-width: 20px; + overflow: hidden; + margin: 0; +} + +.heap-tree-item-individuals > button { + height: 10px; + width: 32px; + + /* Override default styles for toolbar buttons to fix entire row height. */ + margin: 0 auto !important; + padding: 0; +} + +/** + * Tree map + */ + +.tree-map-container { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +} + /** * Heap tree errors. */ @@ -522,6 +581,10 @@ html, body, #app, #memory-tool { margin-right: .5em; } +.heap-tree-item-address { + font-family: monospace; +} + .no-allocation-stacks { border-color: var(--theme-splitter-color); border-style: solid; diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 380a6323..297a7cd6 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -29,7 +29,7 @@ window { min-width: 30px; min-height: 26px; margin: 0; - list-style-image: url("profiler-stopwatch.svg"); + list-style-image: url("images/profiler-stopwatch.svg"); } #requests-menu-perf-notice-button .button-text { @@ -405,36 +405,20 @@ box.requests-menu-status[code^="5"] { #details-pane-toggle { list-style-image: url("chrome://devtools/skin/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://devtools/skin/debugger-expand.png"); } -#details-pane-toggle:hover, -#details-pane-toggle:hover:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - @media (min-resolution: 1.1dppx) { #details-pane-toggle { list-style-image: url("chrome://devtools/skin/debugger-collapse@2x.png"); - -moz-image-region: rect(0px,32px,32px,0px); } #details-pane-toggle[pane-collapsed] { list-style-image: url("chrome://devtools/skin/debugger-expand@2x.png"); } - - #details-pane-toggle:active { - -moz-image-region: rect(0px,64px,32px,32px); - } } /* Network request details tabpanels */ @@ -647,7 +631,7 @@ box.requests-menu-status[code^="5"] { /* Performance analysis buttons */ #requests-menu-network-summary-button { - list-style-image: url("profiler-stopwatch.svg"); + list-style-image: url("images/profiler-stopwatch.svg"); -moz-padding-end: 0; cursor: pointer; } diff --git a/LCARStrek/devtools/newtab.png b/LCARStrek/devtools/newtab.png deleted file mode 100644 index a8745091..00000000 Binary files a/LCARStrek/devtools/newtab.png and /dev/null differ diff --git a/LCARStrek/devtools/newtab@2x.png b/LCARStrek/devtools/newtab@2x.png deleted file mode 100644 index 9d150f8d..00000000 Binary files a/LCARStrek/devtools/newtab@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css index a830f89c..12fc9dd5 100644 --- a/LCARStrek/devtools/performance.css +++ b/LCARStrek/devtools/performance.css @@ -59,16 +59,7 @@ } #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); + list-style-image: url(timeline-filter.svg); } #performance-filter-menupopup > menuitem:before { @@ -121,23 +112,19 @@ } #select-optimizations-view { - list-style-image: url(profiler-stopwatch.svg); + list-style-image: url(images/profiler-stopwatch.svg); } /* Recording buttons */ #main-record-button { - list-style-image: url(profiler-stopwatch-tbutton.svg); + list-style-image: url(images/profiler-stopwatch-tbutton.svg); } #empty-notice > .record-button, #main-record-button:hover, #main-record-button:hover:active { - list-style-image: url(profiler-stopwatch.svg); -} - -#main-record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); + list-style-image: url(images/profiler-stopwatch.svg); } #main-record-button .button-icon { diff --git a/LCARStrek/devtools/power.svg b/LCARStrek/devtools/power.svg deleted file mode 100644 index 056268e7..00000000 --- a/LCARStrek/devtools/power.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - diff --git a/LCARStrek/devtools/profiler-stopwatch-checked-tbutton.svg b/LCARStrek/devtools/profiler-stopwatch-checked-tbutton.svg deleted file mode 100644 index df607b3b..00000000 --- a/LCARStrek/devtools/profiler-stopwatch-checked-tbutton.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/LCARStrek/devtools/profiler-stopwatch-checked.svg b/LCARStrek/devtools/profiler-stopwatch-checked.svg deleted file mode 100644 index d91760df..00000000 --- a/LCARStrek/devtools/profiler-stopwatch-checked.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/LCARStrek/devtools/profiler-stopwatch.png b/LCARStrek/devtools/profiler-stopwatch.png deleted file mode 100644 index 5ae3767c..00000000 Binary files a/LCARStrek/devtools/profiler-stopwatch.png and /dev/null differ diff --git a/LCARStrek/devtools/pseudo-class.svg b/LCARStrek/devtools/pseudo-class.svg deleted file mode 100644 index 5c41473d..00000000 --- a/LCARStrek/devtools/pseudo-class.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/LCARStrek/devtools/reload.svg b/LCARStrek/devtools/reload.svg new file mode 100644 index 00000000..b0426278 --- /dev/null +++ b/LCARStrek/devtools/reload.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/rewind.png b/LCARStrek/devtools/rewind.png index d1a4b273..9b83d659 100644 Binary files a/LCARStrek/devtools/rewind.png and b/LCARStrek/devtools/rewind.png differ diff --git a/LCARStrek/devtools/rewind@2x.png b/LCARStrek/devtools/rewind@2x.png index bd38626f..0bc36d89 100644 Binary files a/LCARStrek/devtools/rewind@2x.png and b/LCARStrek/devtools/rewind@2x.png differ diff --git a/LCARStrek/devtools/ruleview.css b/LCARStrek/devtools/ruleview.css index 0f79bbed..ab69b62b 100644 --- a/LCARStrek/devtools/ruleview.css +++ b/LCARStrek/devtools/ruleview.css @@ -247,11 +247,11 @@ /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ } -.ruleview-selector-matched > .ruleview-selector-pseudo-class { +.ruleview-selector-matched > .ruleview-selector-images/psuedo-class { /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ } -.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { +.ruleview-selector-matched > .ruleview-selector-images/psuedo-class-lock { font-weight: bold; color: var(--theme-highlight-orange); } @@ -264,15 +264,15 @@ } .ruleview-selectorhighlighter:hover { - background-position: -32px 0; + filter: url(images/filters.svg#checked-icon-state); } .ruleview-selectorhighlighter:active, .ruleview-selectorhighlighter.highlighted { - background-position: -16px 0; + filter: url(images/filters.svg#checked-icon-state); } -#pseudo-class-panel:not([hidden]) { +#images/psuedo-class-panel:not([hidden]) { border-bottom: 1px solid var(--theme-splitter-color); } @@ -284,38 +284,16 @@ background-image: url("chrome://devtools/skin/images/add.svg#add-checked"); } -#pseudo-class-panel-toggle::before { - background-image: url("chrome://devtools/skin/pseudo-class.svg#pseudo-class"); - background-size: cover; -} -#pseudo-class-panel-toggle:hover::before, -#pseudo-class-panel-toggle[checked]::before { - background-image: url("chrome://devtools/skin/pseudo-class.svg#pseudo-class-checked"); - filter: none !important; +#images/psuedo-class-panel-toggle::before { + background-image: url("chrome://devtools/skin/images/psuedo-class.svg); } -/** - * These buttons are using opacity instead of background color to indicate - * the state - */ /* -#ruleview-add-rule-button, -#pseudo-class-panel-toggle, .ruleview-overridden-rule-filter { opacity: 0.8; } -#ruleview-add-rule-button:not([disabled]):hover, -#pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked], .ruleview-overridden-rule-filter:hover { opacity: 1; } - -#ruleview-add-rule-button, -#pseudo-class-panel-toggle, -#pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked]::before { - background-color: transparent !important; -} */ diff --git a/LCARStrek/devtools/timeline-filter.svg b/LCARStrek/devtools/timeline-filter.svg deleted file mode 100644 index b9bbbd7b..00000000 --- a/LCARStrek/devtools/timeline-filter.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - diff --git a/LCARStrek/devtools/tool-debugger-paused.svg b/LCARStrek/devtools/tool-debugger-paused.svg deleted file mode 100644 index 2ab4e444..00000000 --- a/LCARStrek/devtools/tool-debugger-paused.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/LCARStrek/devtools/tool-debugger.svg b/LCARStrek/devtools/tool-debugger.svg deleted file mode 100644 index 5248a1d5..00000000 --- a/LCARStrek/devtools/tool-debugger.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - diff --git a/LCARStrek/devtools/tool-inspector.svg b/LCARStrek/devtools/tool-inspector.svg deleted file mode 100644 index 8588d229..00000000 --- a/LCARStrek/devtools/tool-inspector.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - diff --git a/LCARStrek/devtools/tool-network.svg b/LCARStrek/devtools/tool-network.svg deleted file mode 100644 index 2a036c69..00000000 --- a/LCARStrek/devtools/tool-network.svg +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/LCARStrek/devtools/tool-options-tbutton.svg b/LCARStrek/devtools/tool-options-tbutton.svg deleted file mode 100644 index b54c3cce..00000000 --- a/LCARStrek/devtools/tool-options-tbutton.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/LCARStrek/devtools/tool-options.svg b/LCARStrek/devtools/tool-options.svg deleted file mode 100644 index c2c1c37c..00000000 --- a/LCARStrek/devtools/tool-options.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/LCARStrek/devtools/tool-profiler-active.svg b/LCARStrek/devtools/tool-profiler-active.svg deleted file mode 100644 index bf0c54aa..00000000 --- a/LCARStrek/devtools/tool-profiler-active.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/LCARStrek/devtools/tool-profiler.svg b/LCARStrek/devtools/tool-profiler.svg deleted file mode 100644 index d91760df..00000000 --- a/LCARStrek/devtools/tool-profiler.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/LCARStrek/devtools/tool-scratchpad.svg b/LCARStrek/devtools/tool-scratchpad.svg deleted file mode 100644 index 82ae8f82..00000000 --- a/LCARStrek/devtools/tool-scratchpad.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/LCARStrek/devtools/tool-shadereditor.svg b/LCARStrek/devtools/tool-shadereditor.svg deleted file mode 100644 index 8861bb3c..00000000 --- a/LCARStrek/devtools/tool-shadereditor.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/LCARStrek/devtools/tool-storage.svg b/LCARStrek/devtools/tool-storage.svg deleted file mode 100644 index aa0b8ad6..00000000 --- a/LCARStrek/devtools/tool-storage.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - diff --git a/LCARStrek/devtools/tool-styleeditor.svg b/LCARStrek/devtools/tool-styleeditor.svg deleted file mode 100644 index 718c22f6..00000000 --- a/LCARStrek/devtools/tool-styleeditor.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/LCARStrek/devtools/tool-webaudio.svg b/LCARStrek/devtools/tool-webaudio.svg deleted file mode 100644 index e07dc842..00000000 --- a/LCARStrek/devtools/tool-webaudio.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css new file mode 100644 index 00000000..db5a2c9c --- /dev/null +++ b/LCARStrek/devtools/toolbars.css @@ -0,0 +1,835 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ +.theme-light, +.theme-dark { + --searchbox-background-color: #000000; + --searchbox-border-color: #9C9CFF; + --searcbox-no-match-background-color: #400000; + --searcbox-no-match-border-color: #FF0000; + + /* Toolbox buttons */ + --command-paintflashing-image: url(images/command-paintflashing.svg); + --command-screenshot-image: url(images/command-screenshot.svg); + --command-responsive-image: url(images/command-responsivemode.svg); + --command-scratchpad-image: url(images/command-scratchpad.svg); + --command-pick-image: url(images/command-pick.svg); + --command-frames-image: url(images/command-frames.svg); + --command-splitconsole-image: url(images/command-console.svg); + --command-noautohide-image: url(images/command-noautohide.svg); + --command-eyedropper-image: url(images/command-eyedropper.svg); + --command-rulers-image: url(images/command-rulers.svg); + --command-measure-image: url(images/command-measure.svg); +} + +/* Toolbars */ +.devtools-toolbar, +.devtools-sidebar-tabs tabs { +} + +.devtools-toolbar { +} + +.devtools-toolbar checkbox { + /* LCARStrek checkbox colors don't work well against toolbar background */ + background-color: var(--theme-toolbar-background); + padding: 2px; + line-height: -moz-block-height; +} +.devtools-toolbar checkbox .checkbox-check { +} +.devtools-toolbar checkbox .checkbox-label-box { +} +.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { +} + +/* Toolbar buttons */ + +.devtools-menulist, +.devtools-toolbarbutton, +.devtools-button { +/* transition: background 0.05s ease-in-out; */ +} + +.devtools-menulist, +.devtools-toolbarbutton { +} + +.devtools-menulist:-moz-focusring, +.devtools-toolbarbutton:-moz-focusring { + outline: 1px dotted var(--theme-selection-color); +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, +.devtools-button::before { + width: 16px; + height: 16px; +/* transition: opacity 0.05s ease-in-out;*/ +} + +/* HTML buttons */ +.devtools-button { + margin: 0; + padding: 0; + min-width: 32px; + background: var(--theme-toolbar-background); + color: var(--theme-body-color); + /* The icon is absolutely positioned in the button using ::before */ + position: relative; +} + +.devtools-button:not([disabled]):hover { + background: var(--theme-hover-background); + color: var(--theme-hover-color); +} + +.devtools-button:not([disabled]):hover:active { + background: var(--theme-active-background); + color: var(--theme-active-color); +} + +/* Menu type buttons and checked states */ +.devtools-button[checked] { + background: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.devtools-button::before { + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-size: cover; + background-repeat: no-repeat; +/* transition: opacity 0.05s ease-in-out;*/ +} + +/* Standalone buttons */ +.devtools-button[standalone], +.devtools-button[data-standalone], +.devtools-toolbarbutton[standalone], +.devtools-toolbarbutton[data-standalone] { + border: none; +/* min-height: 32px; */ + background-color: var(--theme-button-background); +} + +.devtools-toolbarbutton[standalone] { +} +.devtools-toolbarbutton[label][standalone] { +} + +/* Icon button styles */ +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 20px; +} + +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { + -moz-padding-start: 5px; + -moz-padding-end: 5px; + min-width: inherit; +} + +#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 { + -moz-margin-start: 2px; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { +} + +/* Menu button styles (eg. web console filters) */ +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { +/* -moz-box-orient: horizontal; */ +} + +.devtools-toolbarbutton[type=menu-button] { +} + +.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +} + +.devtools-menulist > .menulist-dropmarker { +} + +.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { +} + +/* Icon-only buttons */ +.devtools-button:empty::before, +.devtools-toolbarbutton:not([label]):not([disabled]) > image { +/* opacity: 0.8;*/ +} + +.devtools-button:hover:empty::before, +.devtools-button[checked]:empty::before, +.devtools-button[open]:empty::before, +.devtools-toolbarbutton:not([label]):hover > image, +.devtools-toolbarbutton:not([label])[checked=true] > image, +.devtools-toolbarbutton:not([label])[open=true] > image { +/* opacity: 1;*/ +} + +.devtools-button:disabled, +.devtools-button[disabled], +.devtools-toolbarbutton[disabled] { +/* opacity: 0.5 !important;*/ +} + +.devtools-button[checked]:empty::before, +.devtools-button[open]:empty::before, +.devtools-toolbarbutton:not([label])[checked=true] > image, +.devtools-toolbarbutton:not([label])[open=true] > image { + filter: url(images/filters.svg#checked-icon-state); +} + +/* Text-only buttons */ +.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { +/* background-color: rgba(0, 0, 0, .2); / Splitter */ +} + +/* Text-only button states */ +.devtools-button:not(:empty):not([disabled]):hover, +#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover { +/* background: rgba(0, 0, 0, .3); / Splitters */ +} + +.devtools-button:not(:empty):not([disabled]):hover:active, +#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active { +/* background: rgba(0, 0, 0, .4); / Splitters */ +} + +.devtools-toolbarbutton:not([disabled])[label][checked=true], +.devtools-toolbarbutton:not([disabled])[label][open], +.devtools-button:not(:empty)[checked=true], +#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] { +/* background: rgba(29, 79, 115, .7); / Select highlight blue / + color: var(--theme-selection-color); */ +} + +.devtools-menulist[open=true], +.devtools-toolbarbutton[open=true], +.devtools-toolbarbutton[open=true]:hover, +.devtools-toolbarbutton[open=true]:hover:active, +.devtools-toolbarbutton[checked=true], +.devtools-toolbarbutton[checked=true]:hover, +#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { +/* background: rgba(29, 79, 115, .8); / Select highlight blue / + color: var(--theme-selection-color); */ +} + +.devtools-toolbarbutton[checked=true]:hover { +} + +.devtools-option-toolbarbutton { + list-style-image: url("chrome://devtools/skin/images/tool-options-tbutton.svg"); +} + +/* Toolbar button groups */ +.devtools-toolbarbutton-group > .devtools-toolbarbutton { +} + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { +} + +.devtools-separator + .devtools-toolbarbutton { +} + +:root { + --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); +} + +.devtools-button.devtools-clear-icon::before { + background-image: var(--clear-icon-url); +} + +.devtools-toolbarbutton.devtools-clear-icon { + list-style-image: var(--clear-icon-url); +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput { +/* -moz-appearance: none; + margin: 0 3px; + border: 1px solid rgb(88, 94, 101); + border-radius: 2px; + background-color: rgba(24, 29, 32, 1); + padding: 4px 6px; + color: rgba(184, 200, 217, 1);*/ +} + +:root[platform="mac"] .devtools-textinput, +:root[platform="mac"] .devtools-searchinput { +/* border-radius: 20px;*/ +} + + +.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; + + background-image: url("magnifying-glass.png"); +} + +.devtools-searchinput:-moz-locale-dir(rtl), +.devtools-searchinput:-moz-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: flex; + flex: 1; + position: relative; +} + +.devtools-rule-searchbox { + -moz-box-flex: 1; + width: 100%; + font: inherit; +} + +.devtools-rule-searchbox[filled] { + background-color: var(--searchbox-background-color); + border-color: var(--searchbox-border-color); + -moz-padding-end: 23px; +} + +.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; +} + +.devtools-searchinput-clear:-moz-dir(rtl) { + right: unset; + left: 7px; +} + +.devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/search-clear.svg"); +} + +.devtools-style-searchbox-no-match + .devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/search-clear-failed.svg") !important; +} + +.devtools-searchinput-clear:hover { + background-position: -16px 0; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { + list-style-image: url("chrome://devtools/skin/search-clear.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.1dppx) { + .devtools-searchinput { + background-image: url("magnifying-glass@2x.png"); + } +} + +/* Close button */ + +.devtools-closebutton { + min-width: 16px; + width: 16px; +} + +.devtools-closebutton > image { + width: 16px; + height: 16px; + -moz-appearance: none; + background-size: 32px 16px; + background-image: url("chrome://devtools/skin/close@2x.png"); + background-position: 0 center; + background-repeat: no-repeat; +} + +.devtools-closebutton:hover > image, +.devtools-closebutton:hover:active > image { + background-position: -16px center; +} + +.devtools-closebutton > .toolbarbutton-text { + display: none; +} + +#toolbox-close::before { + background-image: url("chrome://devtools/skin/close@2x.png"); +} + +/* In-tools sidebar */ + +.devtools-sidebar-tabs { +} + +.devtools-sidebar-tabs > tabpanels { + padding: 0; + border: 0; +} + +.devtools-sidebar-tabs tabs { + position: static; + overflow: hidden; +} + +.devtools-sidebar-alltabs { +/* 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 { + min-width: 78px; + text-align: center; + -moz-box-flex: 1; + position: static; + margin-top: 0; +} + +.devtools-sidebar-tabs tabs > tab:-moz-focusring { + position: static; +} + +.devtools-sidebar-tabs tabs > tab:first-of-type { + -moz-margin-start: 0; +} + +.devtools-sidebar-tabs tabs > tab:last-of-type { + -moz-border-end-width: 0; +} + +.devtools-sidebar-tabs tabs > tab { +} + +.devtools-sidebar-tabs tabs > tab[selected], +.devtools-sidebar-tabs tabs > tab[selected] + tab { +} + +.devtools-sidebar-tabs tabs > tab:first-child { +} + +.devtools-sidebar-tabs tabs > tab:hover { +} + +.devtools-sidebar-tabs tabs > tab:hover:active { +} + +.devtools-sidebar-tabs tabs > tab[selected] + tab:hover { +} + +.devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { +} + +.devtools-sidebar-tabs tabs > tab[selected], +.devtools-sidebar-tabs tabs > tab[selected]:hover:active { +} + +/* 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 { + min-width: 16px; +/* padding: 1px 3px; */ +} + +#toolbox-dock-buttons > toolbarbutton > image { + width: 16px; + height: 16px; + background-size: 32px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} + +#toolbox-dock-buttons > toolbarbutton:hover > image { + background-position: -16px center; +} + +#toolbox-dock-bottom::before, +#toolbox-dock-bottom > image { + background-image: url("chrome://devtools/skin/dock-bottom@2x.png"); +} + +#toolbox-dock-side::before, +#toolbox-dock-side > image { + background-image: url("chrome://devtools/skin/dock-side@2x.png"); +} + +#toolbox-dock-window::before, +#toolbox-dock-window > image { + background-image: url("chrome://devtools/skin/undock@2x.png"); +} + +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize > image { + background-image: url("chrome://devtools/skin/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized > image { + background-image: url("chrome://devtools/skin/dock-bottom-maximize@2x.png"); +} + +#toolbox-dock-window, +#toolbox-dock-bottom, +#toolbox-dock-side { +} + +#toolbox-dock-window:hover, +#toolbox-dock-bottom:hover, +#toolbox-dock-side:hover { +} + +.devtools-separator { + margin: 0 2px; + width: 2px; +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; + width: 1px; +} + +/* Command buttons */ + +.command-button { + -moz-appearance: none; + border: none; +/* padding: 0 8px; */ +/* margin: 0; */ + width: 16px; + position: relative; + -moz-user-focus: normal; +} + +.command-button:hover { +/* background-color: var(--toolbar-tab-hover); */ +} +.command-button:hover:active, .command-button[checked=true]:not(:hover) { +/* background-color: var(--toolbar-tab-hover-active) */ +} + +#command-button-frames { + width: 32px; +} + +#toolbox-close::before, +.toolbox-dock-button::before, +.command-button::before, +.command-button > image { + width: 16px; + height: 16px; + background-size: cover; + background-position: 0 center; + background-repeat: no-repeat; +} + +#toolbox-close:hover::before, +#toolbox-close:hover:active::before, +.toolbox-dock-button:hover::before, +.toolbox-dock-button:hover:active::before, +.command-button:hover::before, +.command-button:hover:active::before, +.command-button[checked=true]::before, +.command-button[open=true]::before, +.command-button:hover > image, +.command-button:hover:active > image, +.command-button[checked=true] > image, +.command-button[open=true] > image { + filter: url(images/filters.svg#checked-icon-state); +} + +#command-button-paintflashing > image, +#command-button-paintflashing::before { + background-image: var(--command-paintflashing-image); +} + +#command-button-screenshot > image, +#command-button-screenshot::before { + background-image: var(--command-screenshot-image); +} + +#command-button-responsive > image, +#command-button-responsive::before { + background-image: var(--command-responsive-image); +} + +#command-button-scratchpad > image, +#command-button-scratchpad::before { + background-image: var(--command-scratchpad-image); +} + +#command-button-pick > image, +#command-button-pick::before { + background-image: var(--command-pick-image); +} + +#command-button-splitconsole > image, +#command-button-splitconsole::before { + background-image: var(--command-splitconsole-image); +} + +#command-button-noautohide > image, +#command-button-noautohide::before { + background-image: var(--command-noautohide-image); +} + +#command-button-eyedropper > image, +#command-button-eyedropper::before { + background-image: var(--command-eyedropper-image); +} + +#command-button-rulers > image, +#command-button-rulers::before { + background-image: var(--command-rulers-image); +} + +#command-button-measure > image, +#command-button-measure::before { + background-image: var(--command-measure-image); +} + +#command-button-frames > image, +#command-button-frames::before { + background-image: var(--command-frames-image); +} + +/* Tabs */ + +.devtools-tabbar { +} + +#toolbox-tabs { + padding-inline-start: 3px; + margin-inline-start: 2px; /* this is only needed for the old button design */ + margin-inline-end: 3px; /* this is for the new ::before-based button design */ + background-color: #000000; + color: #FFCF00; +} + +.toolbox-panel { + display: -moz-box; + -moz-box-flex: 1; + visibility: collapse; +} + +#toolbox-deck[selectedIndex] > .toolbox-panel, /* workaround for Firefox 47 and older */ +.toolbox-panel[selected] { + visibility: visible; +} + +.devtools-tab { + min-width: 32px; + max-width: 110px; + color: #000000; + margin: 0; + -moz-margin-end: 3px; + padding: 1px; + -moz-padding-start: 3px; + background-color: #C09070; + border-radius: 8px 8px 0 0; +} + +.devtools-tab > image { + -moz-margin-end: 0px; +/* -moz-margin-start: 4px; */ + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +.devtools-tab:hover > image { +} + +.devtools-tab:active > image, +.devtools-tab[selected] > image { +} + +.devtools-tab:hover, +.devtools-tab:hover:active { + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); +} + +.devtools-tab[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.devtools-tab > spacer { + max-width: 0; + -moz-box-flex: 0; +} + +.devtools-tab > image { + -moz-margin-end: 0; + -moz-margin-start: 0; +} + +#toolbox-picker-container { + margin-inline-start: 1px; +} + +#toolbox-option-container { + background-color: #000000; + padding-inline-start: 3px; + margin-inline-end: 1px; +} + +#toolbox-tab-options { + min-width: 20px; +} + +#toolbox-tab-options > image { + -moz-margin-end: 3px; +} + +.devtools-tab:not([highlighted]) > .highlighted-icon, +.devtools-tab[selected] > .highlighted-icon, +.devtools-tab:not([selected])[highlighted] > .default-icon { + visibility: collapse; +} + +.devtools-tab:not([selected])[highlighted] { +} + +.devtools-tab:not([selected])[highlighted] { + color: #FFCF00; +} + +.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;*/ +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} + +.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/LCARStrek/devtools/tracer-icon.png b/LCARStrek/devtools/tracer-icon.png index e504877e..c8bfb400 100644 Binary files a/LCARStrek/devtools/tracer-icon.png and b/LCARStrek/devtools/tracer-icon.png differ diff --git a/LCARStrek/devtools/tracer-icon@2x.png b/LCARStrek/devtools/tracer-icon@2x.png index 6fec68de..06d7ae51 100644 Binary files a/LCARStrek/devtools/tracer-icon@2x.png and b/LCARStrek/devtools/tracer-icon@2x.png differ diff --git a/LCARStrek/devtools/variables.css b/LCARStrek/devtools/variables.css new file mode 100644 index 00000000..c7cac8f5 --- /dev/null +++ b/LCARStrek/devtools/variables.css @@ -0,0 +1,75 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Variable declarations for light and dark devtools themes. + * Colors are taken from: + * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. + * Changes should be kept in sync with commandline.css and commandline.inc.css. + */ + +/* IMPORTANT NOTE: + * This file is parsed in js (see client/shared/theme.js) + * so the formatting should be consistent (i.e. no '}' inside a rule). + */ + +:root { + --theme-body-background: #000000; + --theme-sidebar-background: #000000; + --theme-contrast-background: #402800; + --theme-contrast-border: #A09090; + --theme-contrast-background2: #795900; + + --theme-tab-toolbar-background: #402800; + --theme-toolbar-background: #000000; + --theme-button-background: #C09070; + --theme-hover-background: #FFCF00; + --theme-hover-color: #000000; + --theme-active-background: #FFCF00; + --theme-active-color: #000000; + --theme-selection-background: #008484; + --theme-selection-color: #000000; + --theme-selection-background2: #004242; + --theme-selection-color2: #FF9F00; + --theme-selection-background-semitransparent: rgba(0, 132, 132, .5); + --theme-splitter-color: #9C9CFF; + --theme-comment: #A09090; + + --theme-sidebar-background: #000000; + --theme-contrastsidebar-background: #A09090; + --theme-contrastsidebar-color: #000000; + --theme-contrastsidebar-bordercolor: #000000; + + --theme-body-color: #FF9F00; + --theme-body-color-alt: #A09090; + --theme-content-color1: #FF9F00; + --theme-content-color2: #A09090; + --theme-content-color3: #FF9F00; + --theme-content-color4: #9C9CFF; + --theme-content-disabled: #8050B0; + + --theme-text-blue: #3333FF; + --theme-highlight-green: #008484; + --theme-highlight-blue: #9C9CFF; + --theme-highlight-bluegrey: #A09090; + --theme-highlight-purple: #C09070; + --theme-highlight-darkpurple: #6000CF; + --theme-highlight-lightorange: #FFCF00; + --theme-highlight-orange: #FF9F00; + --theme-highlight-red: #FF0000; + --theme-highlight-pink: #E7ADE7; + + /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ + --theme-graphs-green: #008484; + --theme-graphs-blue: #9C9CFF; + --theme-graphs-bluegrey: #C09070; + --theme-graphs-purple: #C09070; + --theme-graphs-yellow: #FFCF00; + --theme-graphs-red: #FF0000; + --theme-graphs-grey: #A09090; + + /* Images */ + --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg); + --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg); +} diff --git a/LCARStrek/devtools/webaudioeditor.css b/LCARStrek/devtools/webaudioeditor.css index 1816c41a..68047cfb 100644 --- a/LCARStrek/devtools/webaudioeditor.css +++ b/LCARStrek/devtools/webaudioeditor.css @@ -193,29 +193,9 @@ g.selected text { */ #audio-node-toolbar .bypass { - list-style-image: url(power.svg#power); + list-style-image: url(images/power.svg); } -#audio-node-toolbar .bypass[disabled] { - list-style-image: url(power.svg#power-disabled); -} - -#audio-node-toolbar .bypass:not([disabled]):hover, -#audio-node-toolbar .bypass:hover:active, -#audio-node-toolbar .bypass[checked] { - list-style-image: url(power.svg#power-active); -} - -#audio-node-toolbar toolbarbutton[checked] { - background-color: var(--theme-selection-background); /* 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 diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css deleted file mode 100644 index c7d43527..00000000 --- a/LCARStrek/devtools/webconsole.css +++ /dev/null @@ -1,615 +0,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/. */ - -window { - padding: 0; -} - -/* - * This hardcoded width likely due to a toolkit Windows specific bug. - * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 - */ - -.hud-filter-box { - width: 200px; -} - -/* === BEGIN webconsole.inc.css === */ - -/* 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 > .prefix, -.message > .timestamp { - flex: none; - color: #8050B0; - margin: 3px 6px 0 0; -} - -.message > .indent { - flex: none; -} - -.message > .icon { - flex: none; - margin: 3px 6px 0 0; - padding: 0 4px; - height: 1em; - align-self: flex-start; -} - -.message > .icon::before { - content: ""; - background-image: url("chrome://devtools/skin/webconsole.svg"); - background-position: 12px 12px; - background-repeat: no-repeat; - background-size: 72px 60px; - width: 12px; - height: 12px; - display: inline-block; -} - -.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: #000000; - background-color: #FF0000; - 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: #3333FF; - 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; - white-space: nowrap; -} - -.message-location > .line-number { - flex: none; -} - -.hud-msg-node[selected="true"] > .webconsole-timestamp, -.hud-msg-node[selected="true"] > .webconsole-location { - color: inherit; -} - -.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 */ - -.hud-console-filter-toolbar toolbarbutton > .toolbarbutton-text { - padding: 2px 2px 3px; -} - -.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%; - -moz-margin-start: 2px; - -moz-margin-end: 2px; - border-width: 1px; - border-style: solid; -} - -.webconsole-filter-button > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; -} - -.webconsole-filter-button menuitem { - -moz-image-region: auto; -} - -.hud-filter-box { - margin-top: 0; - margin-bottom: 0; -} - -/* Network styles */ -.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#BF9B00, #7F6700); - border-color: #FFCF00; -} - -.message:hover { - background-color: var(--theme-contrast-background); -} - -.message[severity=error] { - background-color: #FF0000; -} - -.console-string { - color: var(--theme-highlight-orange); -} - -.message[severity=error] .console-string { - color: #000000; -} - -.theme-selected .console-string, -.theme-selected .cm-number, -.theme-selected .cm-variable, -.theme-selected .kind-ArrayLike { - color: #000000 !important; /* Selection Text Color */ -} - -.message[category=network] > .indent { - -moz-border-end: solid #FF0000 6px; -} - -.message[category=network][severity=error] > .icon::before { - background-position: -12px 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: #3333FF; - 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(#7575BF, #4E4E7F); - border-color: #9C9CFF; -} - -.message[category=cssparser] > .indent { - -moz-border-end: solid #9C9CFF 6px; -} - -.message[category=cssparser][severity=error] > .icon::before { - background-position: -12px -12px; -} - -.message[category=cssparser][severity=warn] > .icon::before { - background-position: -24px -12px; -} - -/* JS styles */ -.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#BF7700, #7F4F00); - border-color: #FF9F00; -} - -.message[category=exception] > .indent { - -moz-border-end: solid #FF9F00 6px; -} - -.message[category=exception][severity=error] > .icon::before { - background-position: -12px -24px; -} - -.message[category=exception][severity=warn] > .icon::before { - background-position: -24px -24px; -} - -/* Web Developer styles */ -.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#5F3B83, #3F2756); - border-color: #8050B0; -} - -.message[category=console] > .indent { - -moz-border-end: solid #8050B0 6px; -} - -.message[category=console][severity=error] > .icon::before, -.message[category=output][severity=error] > .icon::before, -.message[category=server][severity=error] > .icon::before { - background-position: -12px -36px; -} - -.message[category=console][severity=warn] > .icon::before, -.message[category=server][severity=warn] > .icon::before { - background-position: -24px -36px; -} - -.message[category=console][severity=info] > .icon::before, -.message[category=server][severity=info] > .icon::before { - background-position: -36px -36px; -} - -/* Server Logging Styles */ - -.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#006363, #004242); - border-color: #008484; -} - -.message[category=server] > .indent { - -moz-border-end: solid #8050B0 6px; -} - -/* Input and output styles */ -.message[category=input] > .indent, -.message[category=output] > .indent { - -moz-border-end: solid #A09090 6px; -} - -.message[category=input] > .icon::before { - background-position: -48px -36px; -} - -.message[category=output] > .icon::before { - background-position: -60px -36px; -} - -/* JSTerm Styles */ - -.jsterm-input-node, -.jsterm-complete-node { - -moz-padding-start: 16px; - margin: 3px 0 0 0; - background-color: transparent; -} - -.jsterm-input-node { - background-image: -moz-image-rect(url("chrome://devtools/skin/commandline-icon.png"), 0, 32, 16, 16); - background-repeat: no-repeat; - background-size: 16px 16px; -} - -@media (min-resolution: 1.1dppx) { - .jsterm-input-node { - background-image: -moz-image-rect(url('chrome://devtools/skin/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 #9C9CFF; - border-radius: 4px; -} - -#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 #FF0000 6px; -} - -.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { - background-color: #FF0000; - border-color: #FFCF00; -} - -.message[category=security][severity=error] > .icon::before { - background-position: -12px -48px; -} - -.message[category=security][severity=warn] > .icon::before { - background-position: -24px -48px; -} - -.navigation-marker { - color: #000000; - background-color: #A09090; - 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 #A09090; - border-radius: 3px; -} - -.consoletable { - margin: 5px 0 0 0; -} - -.message[severity=error] .stacktrace { - background-color: #000000; -} - -.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://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-left: 5px; - cursor: pointer; -} - -.elementNode:hover .open-inspector, -.open-inspector:hover { - background-position: -32px 0; -} - -.open-inspector:active { - background-position: -16px 0; -} - -/* Replace these values with CSS variables as available */ -.jsterm-input-container { - background-color: var(--theme-toolbar-background); - border-color: var(--theme-splitter-color); -} - -.jsterm-input-node { - color: var(--theme-highlight-pink); -} - -.jsterm-complete-node { - color: var(--theme-comment); -} - -.navigation-marker .url { - background: var(--theme-body-background); -} - -.inlined-variables-view iframe { - border-color: #A09090; -} - -.stacktrace { - border-color: #A09090; -} - -@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; - } - */ -} - -/* === END webconsole.inc.css === */ diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css index 39ac4797..0647496f 100644 --- a/LCARStrek/devtools/widgets.css +++ b/LCARStrek/devtools/widgets.css @@ -685,38 +685,45 @@ } /* Variables and properties editing */ - -.variables-view-delete { - background: url("chrome://devtools/skin/images/vview-delete.png"); - background-size: cover; +.variables-view-delete, +.variables-view-edit, +.variables-view-open-inspector { width: 16px; height: 16px; + background-size: cover; + cursor: pointer; } -@media (min-resolution: 1.1dppx) { - .variables-view-delete { - background-image: url("chrome://devtools/skin/images/vview-delete@2x.png"); - } +.variables-view-delete:hover, +.variables-view-edit:hover, +.variables-view-open-inspector:hover { + filter: url(images/filters.svg#checked-icon-state); } -.variables-view-delete:hover { - background-position: 32px; +.variables-view-delete:active, +.variables-view-edit:active, +.variables-view-open-inspector:active { + filter: url(images/filters.svg#checked-icon-state); } -.variables-view-delete:active { - background-position: 16px; +.variable-or-property:focus > .title > .variables-view-delete, +.variable-or-property:focus > .title > .variables-view-edit, +.variable-or-property:focus > .title > .variables-view-open-inspector { + filter: none; } -.variable-or-property:focus > .title > .variables-view-delete { -/* background-position: 0px; */ +.variables-view-delete { + background-image: url("chrome://devtools/skin/images/vview-delete.png"); +} + +@media (min-resolution: 1.1dppx) { + .variables-view-delete { + background-image: url("chrome://devtools/skin/images/vview-delete@2x.png"); + } } .variables-view-edit { - background: url("chrome://devtools/skin/images/vview-edit.png"); - background-size: cover; - width: 16px; - height: 16px; - cursor: pointer; + background-image: url("chrome://devtools/skin/images/vview-edit.png"); } @media (min-resolution: 1.1dppx) { @@ -725,36 +732,8 @@ } } -.variables-view-edit:hover { - background-position: 32px; -} - -.variables-view-edit:active { - background-position: 16px; -} - -.variable-or-property:focus > .title > .variables-view-edit { -/* background-position: 0px; */ -} - .variables-view-open-inspector { - background: url("chrome://devtools/skin/images/vview-open-inspector.png"); - background-size: cover; - width: 16px; - height: 16px; - cursor: pointer; -} - -.variables-view-open-inspector:hover { - background-position: 32px; -} - -.variables-view-open-inspector:active { - background-position: 16px; -} - -.variable-or-property:focus > .title > .variables-view-open-inspector { -/* background-position: 0px; */ + background-image: url("chrome://devtools/skin/images/vview-open-inspector.png"); } /* Variables and properties input boxes */ diff --git a/LCARStrek/webide/addons.css b/LCARStrek/webide/addons.css new file mode 100644 index 00000000..728b8849 --- /dev/null +++ b/LCARStrek/webide/addons.css @@ -0,0 +1,76 @@ +/* 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/. */ + +button { + line-height: 20px; + font-size: 1em; + height: 30px; + max-height: 30px; + min-width: 120px; + padding: 3px; + color: #000000; + border: none; + border-radius: 300px; + background-color: #C09070; + -moz-appearance: none; + -moz-border-top-colors: none !important; + -moz-border-right-colors: none !important; + -moz-border-bottom-colors: none !important; + -moz-border-left-colors: none !important; +} + +button:hover { + background-color: #FFCF00; + cursor: pointer; +} + +button:hover:active { + background-color: #FF9F00; +} + +progress { + height: 30px; + vertical-align: middle; + padding: 0; + width: 120px; +} + +li { + margin: 20px 0; +} + +.name { + display: inline-block; + min-width: 280px; +} + +.status { + display: inline-block; + min-width: 120px; +} + +.warning { + color: #F06; + margin: 0; + font-size: 0.9em; +} + +li[status="unknown"], +li > .uninstall-button, +li > .install-button, +li > progress { + display: none; +} + +li[status="installed"] > .uninstall-button, +li[status="uninstalled"] > .install-button, +li[status="preparing"] > progress, +li[status="downloading"] > progress, +li[status="installing"] > progress { + display: inline; +} + +li:not([status="uninstalled"]) > .warning { + display: none; +} diff --git a/LCARStrek/webide/config-view.css b/LCARStrek/webide/config-view.css new file mode 100644 index 00000000..dc1a0b85 --- /dev/null +++ b/LCARStrek/webide/config-view.css @@ -0,0 +1,82 @@ +/* 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 { + background: #000000; + color: #FF9F00; +} + +.action { + display: inline; +} + +.action[hidden] { + display: none; +} + +#device-fields { + font-family: sans-serif; + padding-left: 6px; + width: 100%; + table-layout: auto; + margin-top: 110px; +} + +#custom-value-name { + width: 50%; +} + +header { + background-color: #A09090; + color: #000000; + border-bottom: 1px solid #9C9CFF; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 90px; + padding: 10px 20px; +} + +#device-fields td { + background-color: #F9F9F9; + border-bottom: 1px solid #CCC; + border-right: 1px solid #FFF; + font-size: 0.75em; +} + +#device-fields td:first-child { + max-width: 250px; + min-width: 150px; +} + +#device-fields td.preference-name, #device-fields td.setting-name { + width: 50%; + min-width: 400px; + word-break: break-all; +} + +#device-fields button { + display: inline-block; + font-family: sans-serif; + font-size: 0.7rem; + white-space: nowrap; +} + +#device-fields tr.hide, #device-fields button.hide { + display: none; +} + +#device-fields .custom-input { + width: 130px; +} + +#search { + margin-bottom: 20px; + width: 100%; +} + +#search-bar { + width: 80%; +} diff --git a/LCARStrek/webide/deck.css b/LCARStrek/webide/deck.css new file mode 100644 index 00000000..f3dd542d --- /dev/null +++ b/LCARStrek/webide/deck.css @@ -0,0 +1,89 @@ +/* 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 { + font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-weight: normal; + margin: 0; + height: 100%; + color: #FF9F00; + background-color: #000000; +} + +body { + margin: 0; + padding: 20px; +} + +.text-input { + display: flex; +} + +.text-input input { + flex: 0.5; + margin-left: 5px; +} + +h1 { + font-size: 2em; + font-weight: lighter; + line-height: 1.2; + margin: 0; + margin-bottom: .5em; +} + +#controls { + float: right; + position: relative; + top: -10px; + right: -10px; +} + +#controls > a { + color: #336699; + font-size: small; + cursor: pointer; + border-bottom: 1px dotted; + margin-left: 10px; +} + +table { + font-family: monospace; + border-collapse: collapse; +} + +th, td { + padding: 5px; + border: 1px solid #9C9CFF; +} + +th { + min-width: 100px; +} + +th:first-of-type, td:first-of-type { + text-align: left; +} + +li { + list-style: none; + padding: 2px; +} + +li > label:hover { + background-color: rgba(255,204,0,0.02); +} + +li > label > span { + display: inline-block; +} + +input, select { + box-sizing: border-box; +} + +select { + padding-top: 2px; + padding-bottom: 2px; +} diff --git a/LCARStrek/devtools/app-manager/default-app-icon.png b/LCARStrek/webide/default-app-icon.png similarity index 100% rename from LCARStrek/devtools/app-manager/default-app-icon.png rename to LCARStrek/webide/default-app-icon.png diff --git a/LCARStrek/webide/details.css b/LCARStrek/webide/details.css new file mode 100644 index 00000000..236c2e9f --- /dev/null +++ b/LCARStrek/webide/details.css @@ -0,0 +1,139 @@ +/* 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 { + margin: 0; + background-color: #000000; + color: #FF9F00; + font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; +} + +.hidden { + display: none; +} + +h1, h3, p { + margin: 0; +} + +#toolbar { + background-color: #9C9CFF; + border-bottom: 3px solid #000000; +} + +#toolbar > button { + -moz-appearance: none; + background-color: #000000; + border-width: 0 1px 0 0; + border-color: #9C9CFF; + border-style: solid; + margin: 0; + padding: 0 12px; + font-family: inherit; + font-weight: bold; + height: 24px; +} + +#toolbar > button:hover { + background-color: #FFCF00; + cursor: pointer; +} + +#validation_status { + float: right; + text-transform: uppercase; + font-size: 10px; + line-height: 24px; + padding: 0 12px; + color: #000000; +} + + +header { + padding: 20px 0; +} + +header > div { + vertical-align: top; + display: flex; + flex-direction: column; +} + +#icon { + height: 48px; + width: 48px; + float: left; + margin: 0 20px; +} + +h1, #type { + line-height: 24px; + height: 24px; /* avoid collapsing if empty */ + display: block; +} + +h1 { + font-size: 20px; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#type { + font-size: 10px; + text-transform: uppercase; + color: #A09090; +} + +main { + padding-left: 88px; +} + +h3 { + color: #9C9CFF; + font-size: 10px; + font-weight: normal; +} + +main > p { + margin-bottom: 20px; +} + +.validation_messages { + margin-left: 74px; + list-style: none; + border-left: 4px solid transparent; + padding: 0 10px; +} + + +body.valid #validation_status { + background-color: #008484; +} + +body.warning #validation_status { + background-color: #FFCF00; +} + +body.error #validation_status { + background-color: #FF0000; +} + +#warningslist { + border-color: #FFCF00; +} + +#errorslist { + border-color: #FF0000; +} + +#validation_status > span { + display: none; +} + +body.valid #validation_status > .valid, +body.warning #validation_status > .warning, +body.error #validation_status > .error { + display: inline; +} diff --git a/LCARStrek/webide/icons.png b/LCARStrek/webide/icons.png new file mode 100644 index 00000000..3f01bde9 Binary files /dev/null and b/LCARStrek/webide/icons.png differ diff --git a/LCARStrek/webide/logs.css b/LCARStrek/webide/logs.css new file mode 100644 index 00000000..446b6e41 --- /dev/null +++ b/LCARStrek/webide/logs.css @@ -0,0 +1,18 @@ +html, body { + background: var(--theme-body-background); + color: var(--theme-body-color); +} + +h1 { + font-size: 1.2em; +} + +ul { + padding: 0; + font-size: 1em; +} + +li { + list-style: none; + margin: 0; +} diff --git a/LCARStrek/webide/monitor.css b/LCARStrek/webide/monitor.css new file mode 100644 index 00000000..fa5e2cb8 --- /dev/null +++ b/LCARStrek/webide/monitor.css @@ -0,0 +1,86 @@ +/* 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/. */ + +/* Graph */ +.graph { + height: 500px; + width: 100%; + padding-top: 20px; + padding-bottom: 20px; + margin-bottom: 30px; + background-color: #000000; +} +.graph > svg, .sidebar { + display: inline-block; + vertical-align: top; +} +.disabled { + opacity: 0.5; +} +.graph.disabled { + height: 30px; +} +.graph.disabled > svg { + visibility: hidden; +} +.curve path, .event-slot line { + fill: none; + stroke-width: 1.5px; +} +.axis line { + fill: none; + stroke: #000; + shape-rendering: crispEdges; +} +.axis path { + fill: none; + stroke: black; + stroke-width: 1px; + shape-rendering: crispEdges; +} +.tick text, .x.ruler text, .y.ruler text { + font-size: 0.9em; +} +.x.ruler text { + text-anchor: middle; +} +.y.ruler text { + text-anchor: end; +} + +/* Sidebar */ +.sidebar { + width: 150px; + overflow-x: hidden; +} +.sidebar label { + cursor: pointer; + display: block; +} +.sidebar span:not(.color) { + vertical-align: 13%; +} +.sidebar input { + visibility: hidden; +} +.sidebar input:hover { + visibility: visible; +} +.graph-title { + margin-top: 5px; + font-size: 1.2em; +} +.legend-color { + display: inline-block; + height: 10px; + width: 10px; + margin-left: 1px; + margin-right: 3px; +} +.legend-id { + font-size: .9em; +} +.graph.disabled > .sidebar > .legend { + display: none; +} diff --git a/LCARStrek/webide/newapp.css b/LCARStrek/webide/newapp.css new file mode 100644 index 00000000..f4d6939d --- /dev/null +++ b/LCARStrek/webide/newapp.css @@ -0,0 +1,54 @@ +/* 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/. */ + +dialog { + -moz-appearance: none; + background-color: #000000; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + color: #FF9F00; + overflow-y: scroll; +} + +.header-name { + font-size: 1.5rem; + font-weight: normal; + margin: 15px 0; +} + +richlistbox { + -moz-appearance: none; + overflow-y: auto; + border: 1px solid #9C9CFF; +} + +richlistitem { + padding: 6px 0; +} + +richlistitem:not([selected="true"]):hover { + background-color: rgba(255,204,0,0.04); +} + +richlistitem > vbox > label { + margin: 0; + font-size: 1.1em; +} + +richlistbox > description { + margin: 8px; +} + +richlistitem { + -moz-box-align: start; +} + +richlistitem > image { + height: 24px; + width: 24px; + margin: 0 6px; +} + +textbox { + font-size: 1.2rem; +} diff --git a/LCARStrek/webide/panel-listing.css b/LCARStrek/webide/panel-listing.css new file mode 100644 index 00000000..16c2a89f --- /dev/null +++ b/LCARStrek/webide/panel-listing.css @@ -0,0 +1,152 @@ +/* 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 { + font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-size: 11px; + font-weight: 400; + background-color: #000000; + color: #FF9F00; +} + +label, +.panel-item, +#project-panel-projects, +#runtime-panel-projects { + display: block; + float: left; + width: 100%; + text-align: left; +} + +.project-image, +.panel-item span { + display: inline-block; + float: left; + line-height: 20px; +} + +.project-image { + margin-right: 10px; + max-height: 20px; +} + +.panel-header { + color: #9C9CFF; + text-transform: uppercase; + line-height: 200%; + margin: 5px 5px 0 5px; + font-weight: 700; + width: 100%; +} + +.panel-header:first-child { + margin-top: 0; +} + +.panel-header[hidden], .panel-item[hidden] { + display: none; +} + +#runtime-panel-simulator, +.panel-item-complex { + clear: both; + position: relative; +} + +.panel-item span { + display: block; + float: left; + overflow: hidden; + text-overflow: ellipsis; + width: 75%; + white-space: nowrap; +} + +.panel-item { + -moz-appearance: none; + -moz-box-align: center; + padding: 3%; + display: block; + width: 94%; + cursor: pointer; + border-top: 1px solid transparent; + border-left: 0; + border-bottom: 1px solid #A09090; + border-right: 0; + background-color: transparent; +} + +button.panel-item { + background-position: 5px 5px; + background-repeat: no-repeat; + background-size: 14px 14px; + padding-left: 25px; + width: 100%; +} + +.panel-item:disabled { + background-color: #8050B0; + color: #000000; + opacity: 0.5; + cursor: default; +} + +.refresh-icon { + background-image: url("chrome://devtools/skin/images/reload.svg"); + height: 14px; + width: 14px; + border: 0; + opacity: 0.6; + display: inline-block; + margin: 3px; + float: right; +} + +.panel-item:not(:disabled):hover, +button.panel-item:not(:disabled):hover { + background-color: #FFCF00; + border-top: 1px solid #9C9CFF; +} + +.configure-button { + display: inline-block; + height: 30px; + width: 30px; + background-color: transparent; + background-image: -moz-image-rect(url("icons.png"), 104, 462, 129, 438); + background-position: center center; + background-repeat: no-repeat; + background-size: 14px 14px; + position: absolute; + top: -2px; + right: 0; + border: 0; +} + +.configure-button:hover { + cursor: pointer; +} + +.project-panel-item-openpackaged { background-image: -moz-image-rect(url("icons.png"), 260, 438, 286, 412); } +.runtime-panel-item-simulator { background-image: -moz-image-rect(url("icons.png"), 0, 438, 26, 412); } +.runtime-panel-item-other { background-image: -moz-image-rect(url("icons.png"), 26, 438, 52, 412); } +#runtime-permissions { background-image: -moz-image-rect(url("icons.png"), 105, 438, 131, 412); } +#runtime-screenshot { background-image: -moz-image-rect(url("icons.png"), 131, 438, 156, 412); } + +#runtime-preferences, +#runtime-settings { background-image: -moz-image-rect(url("icons.png"), 105, 464, 131, 438); } + +#runtime-panel-nousbdevice, +#runtime-details { background-image: -moz-image-rect(url("icons.png"), 156, 438, 182, 412); } + +.runtime-panel-item-usb, +#runtime-disconnect { background-image: -moz-image-rect(url("icons.png"), 52, 438, 78, 412); } + +.runtime-panel-item-wifi, +.project-panel-item-openhosted { background-image: -moz-image-rect(url("icons.png"), 208, 438, 234, 412); } + +.project-panel-item-newapp, +#runtime-panel-noadbhelper, +#runtime-panel-installsimulator { background-image: -moz-image-rect(url("icons.png"), 234, 438, 260, 412); } diff --git a/LCARStrek/webide/permissionstable.css b/LCARStrek/webide/permissionstable.css new file mode 100644 index 00000000..1bc98f23 --- /dev/null +++ b/LCARStrek/webide/permissionstable.css @@ -0,0 +1,24 @@ +/* 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 { + background: #000000; + color: #FF9F00; +} + +.permissionstable td { + text-align: center; +} + +.permallow { + color: #008484; +} + +.permprompt { + color: #9C9CFF; +} + +.permdeny { + color: #FF0000; +} diff --git a/LCARStrek/devtools/app-manager/rocket.svg b/LCARStrek/webide/rocket.svg similarity index 100% rename from LCARStrek/devtools/app-manager/rocket.svg rename to LCARStrek/webide/rocket.svg diff --git a/LCARStrek/webide/runtimedetails.css b/LCARStrek/webide/runtimedetails.css new file mode 100644 index 00000000..ae2f74c9 --- /dev/null +++ b/LCARStrek/webide/runtimedetails.css @@ -0,0 +1,25 @@ +/* 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 { + background: white; +} + +#devicePrivileges { + font-family: monospace; + padding-left: 6px; +} + +#devtools-check > a { + color: #336699; + cursor: pointer; +} + +.action { + display: inline; +} + +.action[hidden] { + display: none; +} diff --git a/LCARStrek/webide/simulator.css b/LCARStrek/webide/simulator.css new file mode 100644 index 00000000..036cfcdb --- /dev/null +++ b/LCARStrek/webide/simulator.css @@ -0,0 +1,41 @@ +/* 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/. */ + +select:not(.custom) > option[value="custom"] { + display: none; +} + +select, input[type="text"] { + width: 13rem; +} + +input[name="name"] { + height: 1.8rem; +} + +input[type="number"] { + width: 6rem; +} + +input[type="text"], input[type="number"] { + padding-left: 0.2rem; +} + +li > label:hover { + background-color: transparent; +} + +ul { + padding-left: 0; +} + +.label { + width: 6rem; + padding: 0.2rem; + text-align: right; +} + +.hidden { + display: none; +} diff --git a/LCARStrek/webide/throbber.svg b/LCARStrek/webide/throbber.svg new file mode 100644 index 00000000..f79a1e00 --- /dev/null +++ b/LCARStrek/webide/throbber.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/webide/webide.css b/LCARStrek/webide/webide.css new file mode 100644 index 00000000..7f267331 --- /dev/null +++ b/LCARStrek/webide/webide.css @@ -0,0 +1,147 @@ +/* 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/. */ + +/* + * + * Icons.png: + * + * actions icons: 100x100. Starts at 0x0. + * menu icons: 26x26. Starts at 312x0. + * anchors icons: 27x16. Starts at 364x0. + * + */ + +#main-toolbar { + padding: 0 12px; +} + +#action-buttons-container { + -moz-box-pack: center; + height: 50px; +} + +#panel-buttons-container { + height: 50px; + margin-top: -50px; + pointer-events: none; +} + +#panel-buttons-container > .panel-button { + pointer-events: auto; +} + +#action-busy-undetermined { + height: 24px; + width: 24px; +} + +window.busy .action-button, +window:not(.busy) #action-busy, +window.busy-undetermined #action-busy-determined, +window.busy-determined #action-busy-undetermined { + display: none; +} + +/* Panel buttons - runtime */ + +#runtime-panel-button > .panel-button-image { + list-style-image: url('icons.png'); + -moz-image-region: rect(78px,438px,104px,412px); + width: 13px; + height: 13px; +} + +#runtime-panel-button[active="true"] > .panel-button-image { + -moz-image-region: rect(78px,464px,104px,438px); +} + +/* Action buttons */ + +.action-button { + -moz-appearance: none; + border-width: 0; + margin: 0; + padding: 0; + list-style-image: url('icons.png'); +} + +.action-button[disabled="true"] { + opacity: 0.4; +} + +.action-button > .toolbarbutton-icon { + width: 40px; + height: 40px; +} + +.action-button > .toolbarbutton-text { + display: none; +} + +#action-button-play { -moz-image-region: rect(0,100px,100px,0) } +#action-button-stop { -moz-image-region: rect(0,200px,100px,100px) } +#action-button-debug { -moz-image-region: rect(0,300px,100px,200px) } + +#action-button-play:not([disabled="true"]):hover { -moz-image-region: rect(200px,100px,300px,0) } +#action-button-stop:not([disabled="true"]):hover { -moz-image-region: rect(200px,200px,300px,100px) } +#action-button-debug:not([disabled="true"]):not([active="true"]):hover { -moz-image-region: rect(200px,300px,300px,200px) } + +#action-button-play.reload { -moz-image-region: rect(0,400px,100px,303px) } +#action-button-play.reload:hover { -moz-image-region: rect(200px,400px,300px,303px) } + +#action-button-debug[active="true"] { -moz-image-region: rect(100px,300px,200px,200px) } + +/* Panels */ + +.panel-list { + display: none; + position: relative; + max-width: 190px; + overflow: hidden; +} + +#project-listing-panel { + max-width: 165px; +} + +.panel-list-wrapper { + height: 100%; + width: 100%; + min-width: 100px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.panel-list-wrapper > iframe { + height: inherit; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +[sidebar-displayed] { + display: block; +} + +/* Main view */ + +#deck { + background-color: #000000; + background-image: url('rocket.svg'); + background-repeat: no-repeat; + background-size: 35%, auto; + background-position: center center; + border-top: 1px solid #A09090; +} + +.devtools-horizontal-splitter { + position: relative; + border-bottom: 1px solid #9C9CFF; +} diff --git a/LCARStrek/webide/wifi-auth.css b/LCARStrek/webide/wifi-auth.css new file mode 100644 index 00000000..c25dbf93 --- /dev/null +++ b/LCARStrek/webide/wifi-auth.css @@ -0,0 +1,65 @@ +/* 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 { + background: #000000; + color: #FF9F00; +} + +body { + display: flex; + flex-direction: column; + height: 90%; +} + +div { + margin-bottom: 1em; +} + +#qr-code { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +#qr-code-wrapper { + flex: 1; + width: 100%; + margin: 2em 0; + text-align: center; +} + +#qr-code img { + height: 100%; +} + +.toggle-scanner { + color: #008484; + font-size: small; + cursor: pointer; + border-bottom: 1px dotted; +} + +#token { + display: none; +} + +body[token] > #token { + display: flex; + flex-direction: column; +} + +body[token] > #qr-code { + display: none; +} + +#token pre, +#token a { + align-self: center; +} + +#qr-size-note { + text-align: center +} diff --git a/origdiff b/origdiff index b4078f1a..e7c71201 100755 --- a/origdiff +++ b/origdiff @@ -46,7 +46,7 @@ MOZB_LOG=$RUN_DIR/theme-browserwin.$NAME_PRE-$NAME_POST.log HG_MOZD_DIR=/mnt/mozilla/hg/comm-beta/mozilla MOZD_HG_OPTIONS= -MOZD_DIR="devtools/client/themes/" +MOZD_DIR="devtools/client/themes/ devtools/client/webide/themes/" MOZD_TAG_PRE=$TAG_PRE_MOZ MOZD_TAG_POST=$TAG_POST_MOZ MOZD_NAME_EXTRA=" (devtools)"