From: Robert Kaiser Date: Sat, 17 Sep 2016 00:31:06 +0000 (+0200) Subject: second part of syncing LCARStrek with Firefox 45-48 devtools theme changes X-Git-Tag: LCARStrek-2.45~7 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=d0a8de80597f65fb17a8508078deae45f0ae80d4;p=themes.git second part of syncing LCARStrek with Firefox 45-48 devtools theme changes --- diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 8581ab03..8c3d6969 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -4121,7 +4121,7 @@ html|*#gcli-output-frame { width: 16px; height: 16px; margin: 0 2px; - background-image: url("chrome://devtools/skin/commandline-icon.png"); + background-image: url("chrome://devtools/skin/images/commandline-icon.png"); background-position: 0 center; background-size: 32px 16px; } @@ -4132,7 +4132,7 @@ html|*#gcli-output-frame { @media (min-resolution: 2dppx) { .gclitoolbar-input-node::before { - background-image: url("chrome://devtools/skin/commandline-icon@2x.png"); + background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png"); } } diff --git a/LCARStrek/devtools/animationinspector.css b/LCARStrek/devtools/animationinspector.css index cedee0e4..fc423afa 100644 --- a/LCARStrek/devtools/animationinspector.css +++ b/LCARStrek/devtools/animationinspector.css @@ -5,17 +5,51 @@ /* Animation-inspector specific theme variables */ .theme-dark, -.theme-light { +.theme-light, +.theme-firebug { --even-animation-timeline-background-color: rgba(160,144,144,0.03); + --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg); + --pause-image: url(chrome://devtools/skin/images/debugger-pause.png); + --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png); + --rewind-image: url(chrome://devtools/skin/images/rewind.png); + --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png); + --play-image: url(chrome://devtools/skin/images/debugger-play.png); + --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png); } :root { /* How high should toolbars be */ --toolbar-height: 20px; - /* How wide should the sidebar be */ - --timeline-sidebar-width: 150px; + /* How wide should the sidebar be (should be wide enough to contain long + property names like 'border-bottom-right-radius' without ellipsis) */ + --timeline-sidebar-width: 200px; /* How high should animations displayed in the timeline be */ --timeline-animation-height: 20px; + /* The size of a keyframe marker in the keyframes diagram */ + --keyframes-marker-size: 10px; + /* The color of the time graduation borders. This should match the the color + devtools/client/animationinspector/utils.js */ + --time-graduation-border-color: rgba(160, 144, 144, .5); +} + +.animation { + --timeline-border-color: var(--theme-body-color); + --timeline-background-color: var(--theme-splitter-color); +} + +.animation.cssanimation { + --timeline-border-color: var(--theme-highlight-lightorange); + --timeline-background-color: var(--theme-contrast-background); +} + +.animation.csstransition { + --timeline-border-color: var(--theme-highlight-bluegrey); + --timeline-background-color: var(--theme-highlight-blue); +} + +.animation.scriptanimation { + --timeline-border-color: var(--theme-highlight-green); + --timeline-background-color: var(--theme-graphs-green); } html { @@ -47,7 +81,8 @@ body { } #timeline-toolbar { - display: none; + display: none; + justify-content: flex-start; } [timeline] #global-toolbar { @@ -58,10 +93,6 @@ body { display: flex; } -#global-toolbar .label { - padding: 1px 4px; -} - /* The main animations container */ #players { @@ -91,39 +122,83 @@ body { /* Element picker, toggle-all buttons, timeline pause button, ... */ +#global-toolbar > *, +#timeline-toolbar > * { + min-height: var(--toolbar-height); + border-color: var(--theme-splitter-color); + border-width: 0 0 0 1px; + display: flex; + justify-content: center; + align-items: center; +} + +#global-toolbar .label, +#timeline-toolbar .label { + padding: 0 5px; + border-style: solid; +} + #global-toolbar .devtools-button, #timeline-toolbar .devtools-button { - border-width: 0 0 0 1px; - min-height: var(--toolbar-height); + margin: 0; + padding: 0; +} + +#timeline-toolbar .devtools-button, +#timeline-toolbar .label { + border-width: 0 1px 0 0; } #element-picker::before { - background-image: url("chrome://devtools/skin/command-pick.svg"); + background-image: var(--command-pick-image); } .pause-button::before { - background-image: url("debugger-pause.png"); + background-image: var(--pause-image); +} + +#rewind-timeline::before { + background-image: var(--rewind-image); } .pause-button.paused::before { - background-image: url("debugger-play.png"); + background-image: var(--play-image); } @media (min-resolution: 1.1dppx) { .pause-button::before { - background-image: url("debugger-pause@2x.png"); + background-image: var(--pause-image-2x); } .pause-button.paused::before { - background-image: url("debugger-play@2x.png"); + background-image: var(--play-image-2x); + } + + #rewind-timeline::before { + background-image: var(--rewind-image-2x); } } -#timeline-rate select { +#timeline-rate select.devtools-button { -moz-appearance: none; text-align: center; - color: inherit; font-family: inherit; + color: var(--theme-body-color); + font-size: 1em; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-repeat: no-repeat; + background-position: calc(100% - 4px) center; + padding-right: 1em; +} + +#timeline-rate { + position: relative; + width: 4.5em; } /* Animation timeline component */ @@ -133,26 +208,43 @@ body { overflow: hidden; position: relative; /* The timeline gets its background-image from a canvas element created in - /browser/devtools/animationinspector/utils.js drawGraphElementBackground + /devtools/client/animationinspector/utils.js drawGraphElementBackground thanks to document.mozSetImageElement("time-graduations", canvas) This is done so that the background can be built dynamically from script */ background-image: -moz-element(#time-graduations); background-repeat: repeat-y; - /* The animations are drawn 150px from the left edge so that animated nodes - can be displayed in a sidebar */ + /* Make the background be 100% of the timeline area so that it resizes with + it and subtract the width of the sidebar and the buffer at the right of the + timeline */ + background-size: calc(100% - var(--timeline-sidebar-width) - var(--keyframes-marker-size)) 100%; background-position: var(--timeline-sidebar-width) 0; display: flex; flex-direction: column; } +/* Useful for positioning animations or keyframes in the timeline */ +.animation-timeline .track-container { + position: absolute; + top: 0; + left: var(--timeline-sidebar-width); + /* Leave the width of a marker right of a track so the 100% markers can be + selected easily */ + right: var(--keyframes-marker-size); + height: var(--timeline-animation-height); +} + +.animation-timeline .scrubber-wrapper { + z-index: 2; + pointer-events: none; + height: 100%; +} + .animation-timeline .scrubber { position: absolute; height: 100%; - width: var(--timeline-sidebar-width); + width: 0; border-right: 1px solid #FF0000; box-sizing: border-box; - z-index: 1; - pointer-events: none; } .animation-timeline .scrubber::before { @@ -166,14 +258,21 @@ body { border-right: 5px solid transparent; } +/* The scrubber handle is a transparent element displayed on top of the scrubber + line that allows users to drag it */ +.animation-timeline .scrubber .scrubber-handle { + position: absolute; + height: 100%; + top: 0; + /* Make it thick enough for easy dragging */ + width: 6px; + right: -3px; + cursor: col-resize; + pointer-events: all; +} + .animation-timeline .time-header { - margin-left: var(--timeline-sidebar-width); - height: var(--toolbar-height); - overflow: hidden; - position: relative; - /* This is the same color as the time graduations in - browser/devtools/animationinspector/utils.js */ - border-bottom: 1px solid var(--theme-splitter-color); + min-height: var(--toolbar-height); cursor: col-resize; -moz-user-select: none; } @@ -185,29 +284,37 @@ body { .animation-timeline .animations { width: 100%; + height: 100%; overflow-y: auto; overflow-x: hidden; - margin: 0; + /* Leave some space for the header */ + margin-top: var(--timeline-animation-height); padding: 0; list-style-type: none; + border-top: 1px solid var(--time-graduation-border-color); } /* Animation block widgets */ .animation-timeline .animation { - margin: 4px 0; + margin: 2px 0; height: var(--timeline-animation-height); position: relative; } -.animation-timeline .animation:nth-child(2n) { +/* We want animations' background colors to alternate, but each animation has + a sibling (hidden by default) that contains the animated properties and + keyframes, so we need to alternate every 4 elements. */ +.animation-timeline .animation:nth-child(4n+1) { background-color: var(--even-animation-timeline-background-color); } .animation-timeline .animation .target { width: var(--timeline-sidebar-width); - overflow: hidden; height: 100%; + overflow: hidden; + display: flex; + align-items: center; } .animation-timeline .animation-target { @@ -215,54 +322,34 @@ body { } .animation-timeline .animation .time-block { - position: absolute; - top: 0; - left: var(--timeline-sidebar-width); - right: 0; - height: 100%; + cursor: pointer; } /* Animation iterations */ .animation-timeline .animation .iterations { - position: relative; + position: absolute; height: 100%; box-sizing: border-box; - --timelime-border-color: var(--theme-body-color); - --timeline-background-color: var(--theme-splitter-color); /* Iterations of the animation are displayed with a repeating linear-gradient which size is dynamically changed from JS. The gradient only draws 1px borders between each iteration. These borders must have the same color as the border of this element */ background-image: - linear-gradient(to right, - var(--timelime-border-color) 0, - var(--timelime-border-color) 1px, + linear-gradient(to left, + var(--timeline-border-color) 0, + var(--timeline-border-color) 1px, transparent 1px, transparent 2px); - background-repeat: repeat-x; - background-position: -1px 0; - border: 1px solid var(--timelime-border-color); + border: 1px solid var(--timeline-border-color); + /* Border-right is already handled by the gradient */ + border-width: 1px 0 1px 1px; /* The background color is set independently */ background-color: var(--timeline-background-color); } -.animation-timeline .animation .cssanimation { - --timelime-border-color: var(--theme-highlight-lightorange); - --timeline-background-color: var(--theme-contrast-background); -} - -.animation-timeline .animation .csstransition { - --timelime-border-color: var(--theme-highlight-bluegrey); - --timeline-background-color: var(--theme-highlight-blue); -} - -.animation-timeline .animation .iterations.infinite { - border-right-width: 0; -} - .animation-timeline .animation .iterations.infinite::before, .animation-timeline .animation .iterations.infinite::after { content: ""; @@ -282,41 +369,74 @@ body { } .animation-timeline .animation .name { + position: absolute; color: var(--theme-selection-color); height: 100%; - width: 100%; + display: flex; + align-items: center; + padding: 0 2px; + box-sizing: border-box; + --fast-track-icon-width: 12px; + z-index: 1; +} + +.animation-timeline .animation .name div { + /* Flex items don't support text-overflow, so a child div is used */ + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; - line-height: 150%; - padding: 0 2px; } -.animation-timeline .fast-track .name { +.animation-timeline .fast-track .name div { + width: calc(100% - var(--fast-track-icon-width)); +} + +.animation-timeline .fast-track .name::after { /* Animations running on the compositor have the fast-track background image*/ + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + height: 100%; + width: var(--fast-track-icon-width); + z-index: 1; + background-image: url("images/animation-fast-track.svg"); background-repeat: no-repeat; + background-position: center; } -.animation-timeline .animation .delay { +.animation-timeline .animation .delay, +.animation-timeline .animation .end-delay { position: absolute; - top: 0; - /* Make sure the delay covers up the animation border */ - transform: translate(-1px, -1px); + height: 100%; + border: 1px solid var(--timeline-border-color); box-sizing: border-box; - height: calc(100% + 2px); +} - border: 1px solid var(--timelime-border-color); +.animation-timeline .animation .delay { border-width: 1px 0 1px 1px; background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, var(--theme-selection-color) 1px, var(--theme-selection-color) 4px); - background-color: var(--timelime-border-color); + background-color: var(--timeline-border-color); } -.animation-timeline .animation .delay.negative { +.animation-timeline .animation .end-delay { + border-width: 1px 1px 1px 0; + background-image: repeating-linear-gradient( + -45deg, + transparent, + transparent 3px, + var(--timeline-border-color) 3px, + var(--timeline-border-color) 4px); +} + +.animation-timeline .animation .delay.negative, +.animation-timeline .animation .end-delay.negative { /* Negative delays are displayed on top of the animation, so they need a right border. Whereas normal delays are displayed just before the animation, so there's already the animation's left border that serves as @@ -324,26 +444,16 @@ body { border-width: 1px; } -.animation-timeline .animation .delay::before { - position: absolute; - content: ""; - left: 0; - width: 2px; - height: 8px; - top: 50%; - margin-top: -4px; - background: var(--timelime-border-color); -} - /* Animation target node gutter, contains a preview of the dom node */ .animation-target { background-color: var(--theme-toolbar-background); - padding: 1px 4px; + padding: 0 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + cursor: pointer; } .animation-target .attribute-name { @@ -366,139 +476,103 @@ body { filter: url(images/filters.svg#checked-icon-state); } -/* Animation title gutter, contains the name, duration, iteration */ - -.animation-title { - background-color: var(--theme-toolbar-background); - border-bottom: 1px solid var(--theme-splitter-color); - padding: 1px 4px; - word-wrap: break-word; - overflow: auto; -} +/* Inline keyframes info in the timeline */ -.animation-title .meta-data { - float: right; +.animation-timeline .animated-properties:not(.selected) { + display: none; } -.animation-title strong { - margin: 0 .5em; +.animation-timeline .animated-properties { + background-color: var(--theme-selection-background-semitransparent); } -.animation-title .meta-data .compositor-icon { - display: none; - 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 - its tooltip appears on hover */ - z-index: 1; - position: relative; +.animation-timeline .animated-properties ul { + margin: 0; + padding: 0; + list-style-type: none; } -/* Timeline wiget */ - -.timeline { +.animation-timeline .animated-properties .property { height: var(--timeline-animation-height); - width: 100%; - display: flex; - flex-direction: row; - border-bottom: 1px solid var(--theme-splitter-color); + position: relative; } -.timeline .playback-controls { - display: flex; - flex-direction: row; +.animation-timeline .animated-properties .property:nth-child(2n) { + background-color: var(--even-animation-timeline-background-color); } -/* Playback control buttons */ - -.timeline .playback-controls button { - flex-grow: 1; - border-width: 0 1px 0 0; +.animation-timeline .animated-properties .name { + width: var(--timeline-sidebar-width); + padding-right: var(--keyframes-marker-size); + box-sizing: border-box; + height: 100%; + color: var(--theme-body-color-alt); + white-space: nowrap; + display: flex; + justify-content: flex-end; + align-items: center; } -.timeline .toggle::before { - background-image: url(debugger-pause.png); +.animation-timeline .animated-properties .name div { + overflow: hidden; + text-overflow: ellipsis; } -.paused .timeline .toggle::before, -.finished .timeline .toggle::before { - background-image: url(debugger-play.png); +.animation-timeline .animated-properties .frames { + /* The frames list is absolutely positioned and the left and width properties + are dynamically set from javascript to match the animation's startTime and + duration */ + position: absolute; + top: 0; + height: 100%; + /* Using flexbox to vertically center the frames */ + display: flex; + align-items: center; } -.timeline .ff::before { - background-image: url(fast-forward.png); -} +/* Keyframes diagram, displayed below the timeline, inside the animation-details + element. */ -.timeline .rw::before { - background-image: url(rewind.png); +.keyframes { + /* Actual keyframe markers are positioned absolutely within this container and + their position is relative to its size (we know the offset of each frame + in percentage) */ + position: relative; + width: 100%; + height: 0; } -@media (min-resolution: 1.1dppx) { - .timeline .toggle::before { - background-image: url(debugger-pause@2x.png); - } - - .paused .timeline .toggle::before, - .finished .timeline .toggle::before { - background-image: url(debugger-play@2x.png); - } - - .timeline .ff::before { - background-image: url(fast-forward@2x.png); - } - - .timeline .rw::before { - background-image: url(rewind@2x.png); - } +.keyframes.cssanimation { + background-color: var(--theme-contrast-background); } -.timeline .rate { - -moz-appearance: none; - text-align: center; - color: var(--theme-body-color); - border-right: 1px solid var(--theme-splitter-color); +.keyframes.csstransition { + background-color: var(--theme-highlight-blue); } -/* Slider (input type range) container */ - -.timeline .sliders-container { - flex-grow: 1; - height: 100%; - position: relative; - border-width: 1px 0; +.keyframes.scriptanimation { + background-color: var(--theme-graphs-green); } -.timeline .sliders-container .current-time { +.keyframes .frame { position: absolute; - padding: 0; - margin: 0; - left: 0; - width: 100%; - height: 100%; -} - -.timeline .sliders-container .current-time::-moz-range-thumb { - height: 100%; - width: 4px; - border-radius: 0; - border: none; - background: var(--theme-highlight-blue); -} - -.timeline .sliders-container .current-time::-moz-range-track { - width: 100%; - height: 50px; - background: transparent; + top: 0; + width: 0; + height: 0; + background-color: inherit; + cursor: pointer; } -/* Current time label */ - -.timeline .time-display { - display: flex; - align-items: center; - justify-content: center; - width: 50px; - border-left: 1px solid var(--theme-splitter-color); - background: var(--theme-toolbar-background); +.keyframes .frame::before { + content: ""; + display: block; + transform: + translateX(calc(var(--keyframes-marker-size) * -.5)) + /* The extra pixel on the Y axis is so that markers are centered on the + horizontal line in the keyframes diagram. */ + translateY(calc(var(--keyframes-marker-size) * -.5 + 1px)); + width: var(--keyframes-marker-size); + height: var(--keyframes-marker-size); + border-radius: 100%; + background-color: inherit; } diff --git a/LCARStrek/devtools/canvasdebugger.css b/LCARStrek/devtools/canvasdebugger.css index 04185aa4..b57b929f 100644 --- a/LCARStrek/devtools/canvasdebugger.css +++ b/LCARStrek/devtools/canvasdebugger.css @@ -2,6 +2,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ +:root { + --gutter-width: 3em; + --gutter-padding-start: 22px; + --checkerboard-pattern: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), + linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); +} + /* Reload and waiting notices */ .notice-container { @@ -105,36 +112,36 @@ /* Debugging pane controls */ #resume { - list-style-image: url("debugger-play.png"); + list-style-image: url("images/debugger-play.png"); } #step-over { - list-style-image: url("debugger-step-over.png"); + list-style-image: url("images/debugger-step-over.png"); } #step-in { - list-style-image: url("debugger-step-in.png"); + list-style-image: url("images/debugger-step-in.png"); } #step-out { - list-style-image: url("debugger-step-out.png"); + list-style-image: url("images/debugger-step-out.png"); } @media (min-resolution: 1.1dppx) { #resume { - list-style-image: url(debugger-play@2x.png); + list-style-image: url(images/debugger-play@2x.png); } #step-over { - list-style-image: url(debugger-step-over@2x.png); + list-style-image: url(images/debugger-step-over@2x.png); } #step-in { - list-style-image: url(debugger-step-in@2x.png); + list-style-image: url(images/debugger-step-in@2x.png); } #step-out { - list-style-image: url(debugger-step-out@2x.png); + list-style-image: url(images/debugger-step-out@2x.png); } } @@ -183,25 +190,25 @@ } .call-item-gutter { - width: calc(3em + 22px); - -moz-padding-start: 22px; - -moz-padding-end: 4px; + width: calc(var(--gutter-width) + var(--gutter-padding-start)); + padding-inline-start: var(--gutter-padding-start); + padding-inline-end: 4px; padding-top: 2px; padding-bottom: 2px; - -moz-border-end: 1px solid; - -moz-margin-end: 6px; + border-inline-end: 1px solid var(--theme-splitter-color); + margin-inline-end: 6px; + background-color: var(--theme-sidebar-background); + color: var(--theme-content-color3); } .selected .call-item-gutter { - background-image: url("editor-debug-location.png"); - background-repeat: no-repeat; - background-position: 6px center; - background-size: 12px; + background-color: #008484; + color: #000000; } @media (min-resolution: 1.1dppx) { .selected .call-item-gutter { - background-image: url("editor-debug-location@2x.png"); + background-image: url("images/editor-debug-location@2x.png"); } } diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css index 0237525b..af4eb0d3 100644 --- a/LCARStrek/devtools/common.css +++ b/LCARStrek/devtools/common.css @@ -3,6 +3,8 @@ * 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("splitters.css"); + /* LCARS-specific rules that should be limited to toolbox but there's no other place to put them */ window { padding: 0; @@ -31,36 +33,6 @@ notification { transition: margin-bottom .1s; } -/* Splitters */ - -.devtools-horizontal-splitter { - min-height: 3px; - height: 3px; - position: relative; -} - -#devtools-side-splitter { - min-width: 0; - width: 3px; - border: none; - margin: 0 3px; - position: relative; - cursor: e-resize; -} - -.devtools-horizontal-splitter.disabled, -.devtools-side-splitter.disabled { - pointer-events: none; -} - -/* In-tools sidebar */ - -.devtools-toolbox-side-iframe { - min-width: 465px; -} - -/* === BEGIN common.inc.css === */ - /* Autocomplete Popup */ /* Dark and light theme */ @@ -282,26 +254,6 @@ notification { background: transparent; } -/* Eyedropper Widget */ - -.devtools-eyedropper-panel { - pointer-events: none; - -moz-appearance: none; - width: 156px; - height: 120px; - background-color: transparent; - border: none; - padding: 0; -} - -#color-value { - color: #FF9F00; -} - -#color-value.highlight { - color: #FFCF00; -} - /* Links to source code, like displaying `myfile.js:45` */ .devtools-source-link { @@ -333,5 +285,3 @@ notification { margin: 2px 0px; cursor: pointer; } - -/* === END common.inc.css === */ diff --git a/LCARStrek/devtools/computed.css b/LCARStrek/devtools/computed.css index 444112cf..9d668047 100644 --- a/LCARStrek/devtools/computed.css +++ b/LCARStrek/devtools/computed.css @@ -14,19 +14,47 @@ position: absolute; } +#computedview-container { + overflow: auto; + height: 100%; +} + +/* This extra wrapper only serves as a way to get the content of the view focusable. + So that when the user reaches it either via keyboard or mouse, we know that the view + is focused and therefore can handle shortcuts. + However, for accessibility reasons, tabindex is set to -1 to avoid having to tab + through it, and the outline is hidden. */ +#computedview-container-focusable { + height: 100%; + outline: none; +} + +#computedview-toolbar, #sidebar-panel-computedview > .devtools-toolbar { display: flex; } #browser-style-checkbox { /* Bug 1200073 - extra space before the browser styles checkbox so - they aren't squished together in a small window. */ + they aren't squished together in a small window. Put also + an extra space after. */ margin-inline-start: 5px; + margin-inline-end: 5px; +} + +#browser-style-checkbox-label { + margin-right: 5px; + + /* Vertically center the 'Browser styles' checkbox in the + Computed panel with its label. */ + display: flex; + align-items: center; } #propertyContainer { -moz-user-select: text; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; flex: auto; } @@ -40,7 +68,7 @@ } .property-view { - padding: 2px 0 2px 17px; + padding: 2px 17px; display: flex; flex-wrap: wrap; } @@ -50,7 +78,9 @@ } .property-value-container { - width: 168px; + display: flex; + flex: 1 1 168px; + overflow: hidden; } .property-name-container > *, @@ -63,7 +93,7 @@ overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - outline: 0; + outline: 0 !important; } .property-value, .other-property-value { @@ -82,9 +112,8 @@ overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; - background-position: 2px center; padding-left: 10px; - outline: 0; + outline: 0 !important; } .other-property-value { @@ -108,7 +137,7 @@ /* From skin */ .expander { visibility: hidden; - margin-left: -12px !important; + margin-inline-start: -12px !important; } .expandable { @@ -141,6 +170,10 @@ opacity: 0.5; } +#computedview-no-results { + height: 100%; +} + #noResults { font-size: 110%; margin: 5px; diff --git a/LCARStrek/devtools/computedview.css b/LCARStrek/devtools/computedview.css deleted file mode 100644 index 107f9e58..00000000 --- a/LCARStrek/devtools/computedview.css +++ /dev/null @@ -1,203 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* From content */ - -* { - box-sizing: border-box; -} - -:root { - height: 100%; -} - -body { - margin: 0; - display : flex; - flex-direction: column; - height: 100%; -} - -#propertyContainer { - -moz-user-select: text; - overflow: auto; - min-height: 0; - flex: 1; -} - -.row-striped { - background: var(--theme-body-background); -} - -.property-view-hidden, -.property-content-hidden { - display: none; -} - -.property-view { - clear: both; - padding: 2px 0 2px 17px; -} - -.property-view > * { - display: inline-block; - vertical-align: middle; -} - -.property-name { - /* -12px is so the expander triangle isn't pushed up above the property */ - width: calc(100% - 12px); - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - outline: 0; -} - -.property-value, .other-property-value { - background-image: url("images/arrow-e.png"); - background-repeat: no-repeat; - background-size: 5px 8px; -} - -@media (min-resolution: 1.1dppx) { - .property-value, .other-property-value { - background-image: url("images/arrow-e@2x.png"); - } -} - -.property-value { - width: 100%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - background-position: 2px center; - padding-left: 10px; - outline: 0; -} - -.other-property-value { - background-position: left center; - padding-left: 8px; -} - -@media (min-width: 400px) { - .property-name { - width: 200px; - } - .property-value { - /* -212px is accounting for the 200px property-name and the 12px triangle */ - width: calc(100% - 212px); - } -} - -.property-content { - padding-left: 17px; -} - -/* From skin */ -.expander { - visibility: hidden; - margin-left: -12px!important; -} - -.expandable { - visibility: visible; -} - -.match { - visibility: hidden; -} - -.matchedselectors > p { - clear: both; - margin: 0 2px 0 0; - padding: 2px; - overflow-x: hidden; - border-style: dotted; - border-color: #A09090; - border-width: 1px 1px 0 1px; -} - -.matchedselectors > p:last-of-type { - border-bottom-width: 1px; -} - -.matched { - text-decoration: line-through; -} - -.parentmatch { - opacity: 0.5; -} - -#noResults { - font-size: 110%; - margin: 5px; - text-align: center; -} - -.onlyuserstyles { - cursor: pointer; -} - -.legendKey { - margin: 0 5px; -} - -#root .devtools-toolbar { - width: 100%; - display: flex; -} - -.link { - padding: 0 3px; - cursor: pointer; - float: right; -} - -/* Take away these two :visited rules to get a core dumper */ -/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ - -.link, -.link:visited { - color: #3333FF; -} - -.link, -.helplink, -.link:visited, -.helplink:visited { - text-decoration: none; -} - -.link:hover { - text-decoration: underline; -} - -.computedview-colorswatch { - border-radius: 50%; - width: 0.9em; - height: 0.9em; - vertical-align: middle; - -moz-margin-end: 5px; - display: inline-block; - position: relative; -} - -.computedview-colorswatch::before { - content: ''; - background-color: #9C9CFF; - background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090), - linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090); - background-size: 12px 12px; - background-position: 0 0, 6px 6px; - position: absolute; - border-radius: 50%; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index 95061a6a..f016464e 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -170,7 +170,7 @@ body, html { .devtools-toolbar, .devtools-sidebar-tabs tabs, .devtools-sidebar-alltabs, -.CodeMirror-dialog { /* General toolbar styling */ +.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */ /* color: var(--theme-body-color-alt); background-color: var(--theme-toolbar-background);*/ } @@ -196,14 +196,13 @@ body, html { * Best effort to match the existing theme, some of the colors * are duplicated here to prevent weirdness in the main theme. */ -.CodeMirror, .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */ font-family: inherit; font-size: inherit; background: transparent; } -.CodeMirror pre, +.CodeMirror.cm-s-mozilla pre, .cm-s-mozilla .cm-variable-2, .cm-s-mozilla .cm-variable-3, .cm-s-mozilla .cm-operator, @@ -327,24 +326,44 @@ div.CodeMirror span.eval-text { /* Overring panel arrow images to fit with our light and dark themes */ /* -.theme-tooltip-panel .panel-arrow[side="top"] { - list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png"); - margin-bottom: -4px; +.theme-tooltip-panel .panel-arrow { + --arrow-margin: -4px; +} + +:root[platform="win"] .theme-tooltip-panel .panel-arrow { + --arrow-margin: -7px; } +.theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png"); - margin-top: -4px; + / !important is needed to override the popup.css rules in toolkit/themes / + width: 39px !important; + height: 16px !important; } -.theme-tooltip-panel .panel-arrow[side="left"] { +.theme-tooltip-panel .panel-arrow[side="left"], +.theme-tooltip-panel .panel-arrow[side="right"] { list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png"); - margin-right: -4px; + / !important is needed to override the popup.css rules in toolkit/themes / + width: 16px !important; + height: 39px !important; +} + +.theme-tooltip-panel .panel-arrow[side="top"] { + margin-bottom: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + margin-top: var(--arrow-margin); +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + margin-right: var(--arrow-margin); } .theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png"); - margin-left: -4px; + margin-left: var(--arrow-margin); } @media (min-resolution: 1.1dppx) { diff --git a/LCARStrek/devtools/debugger-toggleBreakpoints.png b/LCARStrek/devtools/debugger-toggleBreakpoints.png deleted file mode 100644 index d6747091..00000000 Binary files a/LCARStrek/devtools/debugger-toggleBreakpoints.png and /dev/null differ diff --git a/LCARStrek/devtools/debugger-toggleBreakpoints@2x.png b/LCARStrek/devtools/debugger-toggleBreakpoints@2x.png deleted file mode 100644 index a90d5f6c..00000000 Binary files a/LCARStrek/devtools/debugger-toggleBreakpoints@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/debugger.css b/LCARStrek/devtools/debugger.css index c2a5af7a..71220ad6 100644 --- a/LCARStrek/devtools/debugger.css +++ b/LCARStrek/devtools/debugger.css @@ -39,51 +39,39 @@ window { -moz-image-region: rect(0,16px,16px,0); } +@media (min-resolution: 1.1dppx) { + #sources-toolbar .devtools-toolbarbutton:not([label]) { + -moz-image-region: rect(0,32px,32px,0); + } +} + #black-box { - list-style-image: url("debugger-blackbox.png"); + list-style-image: url("images/debugger-blackbox.png"); } @media (min-resolution: 1.1dppx) { #black-box { - list-style-image: url(debugger-blackbox@2x.png); + list-style-image: url(images/debugger-blackbox@2x.png); } } #pretty-print { - list-style-image: url(debugger-prettyprint.png); + list-style-image: url(images/debugger-prettyprint.png); } @media (min-resolution: 1.1dppx) { #pretty-print { - list-style-image: url(debugger-prettyprint@2x.png); + list-style-image: url(images/debugger-prettyprint@2x.png); } } #toggle-breakpoints { - list-style-image: url("debugger-toggleBreakpoints.png"); -} - -#toggle-breakpoints[checked] { + list-style-image: url(images/debugger-toggleBreakpoints.svg); -moz-image-region: rect(0,32px,16px,16px) !important; } -#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(0,32px,32px,0); - } - - #toggle-breakpoints { - list-style-image: url(debugger-toggleBreakpoints@2x.png); - } - - #toggle-breakpoints[checked] { - -moz-image-region: rect(0,64px,32px,32px) !important; - } +#toggle-breakpoints[checked] { + -moz-image-region: rect(0,16px,16px,0) !important; } #toggle-promise-debugger { @@ -117,7 +105,7 @@ window { #black-boxed-message-button > .button-box > .button-icon { width: 16px; height: 16px; - background-image: url("debugger-blackbox.png"); + background-image: url("images/debugger-blackbox.png"); background-position: -16px -16px; background-size: 32px 32px; background-repeat: no-repeat; @@ -126,7 +114,7 @@ window { @media (min-resolution: 1.1dppx) { #black-boxed-message-button > .button-box > .button-icon { - background-image: url("debugger-blackbox@2x.png"); + background-image: url("images/debugger-blackbox@2x.png"); } } @@ -349,7 +337,7 @@ window { } .dbg-expression-arrow { - background-image: url("commandline-icon.png"); + background-image: url("images/commandline-icon.png"); background-position: -16px 0; background-repeat: no-repeat; background-size: 32px 16px; @@ -360,7 +348,7 @@ window { @media (min-resolution: 1.1dppx) { .dbg-expression-arrow { - background-image: url(commandline-icon@2x.png); + background-image: url("images/commandline-icon@2x.png"); } } @@ -554,12 +542,12 @@ window { /* Toolbar controls */ #toggle-panes { - list-style-image: url("chrome://devtools/skin/debugger-expand.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-expand.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } #toggle-panes:not([panesHidden]) { - list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png"); } #toggle-panes:hover, @@ -568,7 +556,7 @@ window { } #resume { - list-style-image: url("chrome://devtools/skin/debugger-pause.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-pause.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } @@ -577,12 +565,12 @@ window { } #resume[checked=true] { - list-style-image: url("chrome://devtools/skin/debugger-play.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-play.png"); } @media (min-resolution: 1.1dppx) { #resume { - list-style-image: url(debugger-pause@2x.png); + list-style-image: url(images/debugger-pause@2x.png); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -591,7 +579,7 @@ window { } #resume[checked=true] { - list-style-image: url(debugger-play@2x.png); + list-style-image: url(images/debugger-play@2x.png); } } @@ -600,7 +588,7 @@ window { } #step-over { - list-style-image: url("chrome://devtools/skin/debugger-step-over.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-step-over.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } #step-over:hover { @@ -608,7 +596,7 @@ window { } #step-in { - list-style-image: url("chrome://devtools/skin/debugger-step-in.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-step-in.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } #step-in:hover { @@ -616,7 +604,7 @@ window { } #step-out { - list-style-image: url("chrome://devtools/skin/debugger-step-out.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-step-out.png"); -moz-image-region: rect(0px, 16px, 16px, 0px); } #step-out:hover { @@ -625,7 +613,7 @@ window { @media (min-resolution: 1.1dppx) { #step-over { - list-style-image: url(debugger-step-over@2x.png); + list-style-image: url(images/debugger-step-over@2x.png); -moz-image-region: rect(0px, 32px, 32px, 0); } @@ -634,7 +622,7 @@ window { } #step-in { - list-style-image: url(debugger-step-in@2x.png); + list-style-image: url(images/debugger-step-in@2x.png); -moz-image-region: rect(0px, 32px, 32px, 0); } @@ -643,7 +631,7 @@ window { } #step-out { - list-style-image: url(debugger-step-out@2x.png); + list-style-image: url(images/debugger-step-out@2x.png); -moz-image-region: rect(0px, 32px, 32px, 0); } @@ -653,20 +641,20 @@ window { } #instruments-pane-toggle { - list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png"); } #instruments-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://devtools/skin/debugger-expand.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-expand.png"); } @media (min-resolution: 1.1dppx) { #instruments-pane-toggle { - list-style-image: url(debugger-collapse@2x.png); + list-style-image: url(images/debugger-collapse@2x.png); } #instruments-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand@2x.png); + list-style-image: url(images/debugger-expand@2x.png); } } diff --git a/LCARStrek/devtools/devtools-browser.css b/LCARStrek/devtools/devtools-browser.css new file mode 100644 index 00000000..fd9dcaed --- /dev/null +++ b/LCARStrek/devtools/devtools-browser.css @@ -0,0 +1,34 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("splitters.css"); + +/* Bottom-docked toolbox minimize transition */ +.devtools-toolbox-bottom-iframe { + transition: margin-bottom .1s; +} + +.devtools-toolbox-side-iframe { + min-width: 465px; +} + +/* Eyedropper Widget */ +/* added to mainPopupSet */ + +.devtools-eyedropper-panel { + pointer-events: none; + -moz-appearance: none; + width: 156px; + height: 120px; + background-color: transparent; + border: none; +} + +#color-value { + color: #FF9F00; +} + +#color-value.highlight { + color: #FFCF00; +} diff --git a/LCARStrek/devtools/editor-breakpoint.png b/LCARStrek/devtools/editor-breakpoint.png deleted file mode 100644 index c94886e1..00000000 Binary files a/LCARStrek/devtools/editor-breakpoint.png and /dev/null differ diff --git a/LCARStrek/devtools/editor-breakpoint@2x.png b/LCARStrek/devtools/editor-breakpoint@2x.png deleted file mode 100644 index 38a6f91f..00000000 Binary files a/LCARStrek/devtools/editor-breakpoint@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/editor-debug-location.png b/LCARStrek/devtools/editor-debug-location.png deleted file mode 100644 index 6b219a21..00000000 Binary files a/LCARStrek/devtools/editor-debug-location.png and /dev/null differ diff --git a/LCARStrek/devtools/editor-debug-location@2x.png b/LCARStrek/devtools/editor-debug-location@2x.png deleted file mode 100644 index 55b116f6..00000000 Binary files a/LCARStrek/devtools/editor-debug-location@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/editor-error.png b/LCARStrek/devtools/editor-error.png deleted file mode 100644 index 786fc7d0..00000000 Binary files a/LCARStrek/devtools/editor-error.png and /dev/null differ diff --git a/LCARStrek/devtools/floating-scrollbars.css b/LCARStrek/devtools/floating-scrollbars-dark-theme.css similarity index 67% rename from LCARStrek/devtools/floating-scrollbars.css rename to LCARStrek/devtools/floating-scrollbars-dark-theme.css index 09ec5cf0..42d13c0d 100644 --- a/LCARStrek/devtools/floating-scrollbars.css +++ b/LCARStrek/devtools/floating-scrollbars-dark-theme.css @@ -1,6 +1,6 @@ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -scrollbar { +xul|scrollbar { position: relative; background-color: transparent; background-image: none; @@ -10,38 +10,39 @@ scrollbar { /* Scrollbar code will reset the margin to the correct side depending on where layout actually puts the scrollbar */ -scrollbar[orient="vertical"] { +xul|scrollbar[orient="vertical"] { margin-left: -10px; min-width: 3px; max-width: 3px; } -scrollbar[orient="horizontal"] { +xul|scrollbar[orient="horizontal"] { margin-top: -10px; min-height: 3px; max-height: 3px; } -scrollbar slider { +xul|scrollbar xul|slider { /* background-color: transparent; */ border-radius: 3px; } -scrollbar:not(:hover) slider { +xul|scrollbar:not(:hover) xul|slider { background-color: rgba(64, 64, 72, 0.3); } -scrollbar thumb { +xul|scrollbar xul|thumb { border-width: 0px !important; /* background-color: rgba(0,0,0,0.2) !important; */ background-image: none; border-radius: 3px !important; } -scrollbar:not(:hover) thumb { +xul|scrollbar:not(:hover) xul|thumb { background-color: rgba(160, 144, 144, 0.3) !important; } -scrollbar scrollbarbutton, scrollbar gripper { +xul|scrollbar xul|scrollbarbutton, +xul|scrollbar xul|gripper { display: none !important; /* need !important to override forced display in LCARStrek */ } diff --git a/LCARStrek/devtools/floating-scrollbars-light.css b/LCARStrek/devtools/floating-scrollbars-light.css deleted file mode 100644 index fd104cf6..00000000 --- a/LCARStrek/devtools/floating-scrollbars-light.css +++ /dev/null @@ -1,10 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -@import url("chrome://devtools/skin/floating-scrollbars.css"); - -scrollbar thumb { - /*background-color: rgba(170,170,170,0.2) !important;*/ -} diff --git a/LCARStrek/devtools/floating-scrollbars-responsive-design.css b/LCARStrek/devtools/floating-scrollbars-responsive-design.css new file mode 100644 index 00000000..280c515f --- /dev/null +++ b/LCARStrek/devtools/floating-scrollbars-responsive-design.css @@ -0,0 +1,52 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +xul|scrollbar { + position: relative; + background-color: transparent; + background-image: none; + z-index: 2147483647; + padding: 2px; +} + +:root[platform="mac"] xul|scrollbar { + border: none; +} + +/* Scrollbar code will reset the margin to the correct side depending on + where layout actually puts the scrollbar */ +xul|scrollbar[orient="vertical"] { + margin-left: -10px; + min-width: 3px; + max-width: 3px; +} + +xul|scrollbar[orient="horizontal"] { + margin-top: -10px; + min-height: 3px; + max-height: 3px; +} + +xul|scrollbar xul|slider { +/* background-color: transparent; */ + border-radius: 3px; +} + +xul|scrollbar:not(:hover) xul|slider { + background-color: rgba(64, 64, 72, 0.3); +} + +xul|scrollbar xul|thumb { + border-width: 0px !important; +/* background-color: rgba(0,0,0,0.2) !important; */ + background-image: none; + border-radius: 3px !important; +} + +xul|scrollbar:not(:hover) xul|thumb { + background-color: rgba(160, 144, 144, 0.3) !important; +} + +xul|scrollbar xul|scrollbarbutton, +xul|scrollbar xul|gripper { + display: none !important; /* need !important to override forced display in LCARStrek */ +} diff --git a/LCARStrek/devtools/font-inspector.css b/LCARStrek/devtools/font-inspector.css deleted file mode 100644 index c64b981f..00000000 --- a/LCARStrek/devtools/font-inspector.css +++ /dev/null @@ -1,87 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - display: flex; - flex-direction: column; - height: 100%; - margin: 0; - padding-bottom: 20px; -} - -#all-fonts { - padding: 0; - margin: 0; -} - -#showall { - border-radius: 300px; - border: none; - background-color: #C09070; - color: #000000; - margin: 3px; - cursor: pointer; - position: fixed; - bottom: 0; - right: 0; -} - -#showall:hover, -#showall:hover:active { - background-color: #FFCF00; - color: #000000; -} - -.font { - padding: 10px 10px; -} - -.theme-dark .font { - border-bottom: 1px solid #9C9CFF; -} - -.theme-light .font { - border-bottom: 1px solid #9C9CFF; -} - -.font:last-of-type { - border-bottom: 0; -} - -.theme-light .font:nth-child(even) { - background-color: rgba(255,159,0,.2); -} - -.font-preview { - margin-left: -4px; - height: 60px; - display: block; -} - -.font-info { - display: block; -} - -.font-name { - display: inline; -} - -.font-css-code { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - padding: 5px; -} - -.theme-light .font-css-code, -.theme-light .font-url { - border: 1px solid #A09090; - color: #9C9CFF; -} - -.theme-dark .font-css-code, -.theme-dark .font-url { - border: 1px solid #A09090; - color: #9C9CFF; -} diff --git a/LCARStrek/devtools/fonts.css b/LCARStrek/devtools/fonts.css index 1b20a595..932c5e63 100644 --- a/LCARStrek/devtools/fonts.css +++ b/LCARStrek/devtools/fonts.css @@ -33,7 +33,6 @@ margin: 0; } -#showall, #font-showall { border-radius: 300px; border: none; @@ -77,7 +76,6 @@ overflow-x: auto; } -#preview-text-input, #font-preview-text-input { font: inherit; margin-top: 1px; diff --git a/LCARStrek/devtools/images/breakpoint.svg b/LCARStrek/devtools/images/breakpoint.svg new file mode 100644 index 00000000..7802376c --- /dev/null +++ b/LCARStrek/devtools/images/breakpoint.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + diff --git a/LCARStrek/devtools/commandline-icon.png b/LCARStrek/devtools/images/commandline-icon.png similarity index 100% rename from LCARStrek/devtools/commandline-icon.png rename to LCARStrek/devtools/images/commandline-icon.png diff --git a/LCARStrek/devtools/commandline-icon@2x.png b/LCARStrek/devtools/images/commandline-icon@2x.png similarity index 100% rename from LCARStrek/devtools/commandline-icon@2x.png rename to LCARStrek/devtools/images/commandline-icon@2x.png diff --git a/LCARStrek/devtools/debugger-blackbox.png b/LCARStrek/devtools/images/debugger-blackbox.png similarity index 100% rename from LCARStrek/devtools/debugger-blackbox.png rename to LCARStrek/devtools/images/debugger-blackbox.png diff --git a/LCARStrek/devtools/debugger-blackbox@2x.png b/LCARStrek/devtools/images/debugger-blackbox@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-blackbox@2x.png rename to LCARStrek/devtools/images/debugger-blackbox@2x.png diff --git a/LCARStrek/devtools/debugger-collapse.png b/LCARStrek/devtools/images/debugger-collapse.png similarity index 100% rename from LCARStrek/devtools/debugger-collapse.png rename to LCARStrek/devtools/images/debugger-collapse.png diff --git a/LCARStrek/devtools/debugger-collapse@2x.png b/LCARStrek/devtools/images/debugger-collapse@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-collapse@2x.png rename to LCARStrek/devtools/images/debugger-collapse@2x.png diff --git a/LCARStrek/devtools/debugger-expand.png b/LCARStrek/devtools/images/debugger-expand.png similarity index 100% rename from LCARStrek/devtools/debugger-expand.png rename to LCARStrek/devtools/images/debugger-expand.png diff --git a/LCARStrek/devtools/debugger-expand@2x.png b/LCARStrek/devtools/images/debugger-expand@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-expand@2x.png rename to LCARStrek/devtools/images/debugger-expand@2x.png diff --git a/LCARStrek/devtools/debugger-pause.png b/LCARStrek/devtools/images/debugger-pause.png similarity index 100% rename from LCARStrek/devtools/debugger-pause.png rename to LCARStrek/devtools/images/debugger-pause.png diff --git a/LCARStrek/devtools/debugger-pause@2x.png b/LCARStrek/devtools/images/debugger-pause@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-pause@2x.png rename to LCARStrek/devtools/images/debugger-pause@2x.png diff --git a/LCARStrek/devtools/debugger-play.png b/LCARStrek/devtools/images/debugger-play.png similarity index 100% rename from LCARStrek/devtools/debugger-play.png rename to LCARStrek/devtools/images/debugger-play.png diff --git a/LCARStrek/devtools/debugger-play@2x.png b/LCARStrek/devtools/images/debugger-play@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-play@2x.png rename to LCARStrek/devtools/images/debugger-play@2x.png diff --git a/LCARStrek/devtools/debugger-prettyprint.png b/LCARStrek/devtools/images/debugger-prettyprint.png similarity index 100% rename from LCARStrek/devtools/debugger-prettyprint.png rename to LCARStrek/devtools/images/debugger-prettyprint.png diff --git a/LCARStrek/devtools/debugger-prettyprint@2x.png b/LCARStrek/devtools/images/debugger-prettyprint@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-prettyprint@2x.png rename to LCARStrek/devtools/images/debugger-prettyprint@2x.png diff --git a/LCARStrek/devtools/debugger-step-in.png b/LCARStrek/devtools/images/debugger-step-in.png similarity index 100% rename from LCARStrek/devtools/debugger-step-in.png rename to LCARStrek/devtools/images/debugger-step-in.png diff --git a/LCARStrek/devtools/debugger-step-in@2x.png b/LCARStrek/devtools/images/debugger-step-in@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-step-in@2x.png rename to LCARStrek/devtools/images/debugger-step-in@2x.png diff --git a/LCARStrek/devtools/debugger-step-out.png b/LCARStrek/devtools/images/debugger-step-out.png similarity index 100% rename from LCARStrek/devtools/debugger-step-out.png rename to LCARStrek/devtools/images/debugger-step-out.png diff --git a/LCARStrek/devtools/debugger-step-out@2x.png b/LCARStrek/devtools/images/debugger-step-out@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-step-out@2x.png rename to LCARStrek/devtools/images/debugger-step-out@2x.png diff --git a/LCARStrek/devtools/debugger-step-over.png b/LCARStrek/devtools/images/debugger-step-over.png similarity index 100% rename from LCARStrek/devtools/debugger-step-over.png rename to LCARStrek/devtools/images/debugger-step-over.png diff --git a/LCARStrek/devtools/debugger-step-over@2x.png b/LCARStrek/devtools/images/debugger-step-over@2x.png similarity index 100% rename from LCARStrek/devtools/debugger-step-over@2x.png rename to LCARStrek/devtools/images/debugger-step-over@2x.png diff --git a/LCARStrek/devtools/images/debugger-toggleBreakpoints.svg b/LCARStrek/devtools/images/debugger-toggleBreakpoints.svg new file mode 100644 index 00000000..c9386e57 --- /dev/null +++ b/LCARStrek/devtools/images/debugger-toggleBreakpoints.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/debugging-addons.svg b/LCARStrek/devtools/images/debugging-addons.svg new file mode 100644 index 00000000..50df610d --- /dev/null +++ b/LCARStrek/devtools/images/debugging-addons.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/debugging-devices.svg b/LCARStrek/devtools/images/debugging-devices.svg new file mode 100644 index 00000000..8b12b65f --- /dev/null +++ b/LCARStrek/devtools/images/debugging-devices.svg @@ -0,0 +1,7 @@ + + + + diff --git a/LCARStrek/devtools/images/debugging-workers.svg b/LCARStrek/devtools/images/debugging-workers.svg new file mode 100644 index 00000000..7b0fdadf --- /dev/null +++ b/LCARStrek/devtools/images/debugging-workers.svg @@ -0,0 +1,11 @@ + + + + diff --git a/LCARStrek/devtools/images/editor-breakpoint.png b/LCARStrek/devtools/images/editor-breakpoint.png deleted file mode 100644 index c94886e1..00000000 Binary files a/LCARStrek/devtools/images/editor-breakpoint.png and /dev/null differ diff --git a/LCARStrek/devtools/images/editor-breakpoint@2x.png b/LCARStrek/devtools/images/editor-breakpoint@2x.png deleted file mode 100644 index 38a6f91f..00000000 Binary files a/LCARStrek/devtools/images/editor-breakpoint@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/images/editor-debug-location.png b/LCARStrek/devtools/images/editor-debug-location.png deleted file mode 100644 index 6b219a21..00000000 Binary files a/LCARStrek/devtools/images/editor-debug-location.png and /dev/null differ diff --git a/LCARStrek/devtools/images/editor-debug-location@2x.png b/LCARStrek/devtools/images/editor-debug-location@2x.png deleted file mode 100644 index 55b116f6..00000000 Binary files a/LCARStrek/devtools/images/editor-debug-location@2x.png and /dev/null differ diff --git a/LCARStrek/devtools/images/emojis/emoji-command-pick.svg b/LCARStrek/devtools/images/emojis/emoji-command-pick.svg new file mode 100755 index 00000000..4be43676 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-command-pick.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-canvas.svg b/LCARStrek/devtools/images/emojis/emoji-tool-canvas.svg new file mode 100644 index 00000000..97d8a91a --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-canvas.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-debugger.svg b/LCARStrek/devtools/images/emojis/emoji-tool-debugger.svg new file mode 100644 index 00000000..07b9ebbb --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-debugger.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-dom.svg b/LCARStrek/devtools/images/emojis/emoji-tool-dom.svg new file mode 100644 index 00000000..1d3e40fa --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-dom.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-inspector.svg b/LCARStrek/devtools/images/emojis/emoji-tool-inspector.svg new file mode 100644 index 00000000..093fb91b --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-inspector.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-memory.svg b/LCARStrek/devtools/images/emojis/emoji-tool-memory.svg new file mode 100644 index 00000000..6387d564 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-memory.svg @@ -0,0 +1,9 @@ + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-network.svg b/LCARStrek/devtools/images/emojis/emoji-tool-network.svg new file mode 100644 index 00000000..249ac7b6 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-network.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-profiler.svg b/LCARStrek/devtools/images/emojis/emoji-tool-profiler.svg new file mode 100644 index 00000000..bf4b660c --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-profiler.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-scratchpad.svg b/LCARStrek/devtools/images/emojis/emoji-tool-scratchpad.svg new file mode 100644 index 00000000..08128eb5 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-scratchpad.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-shadereditor.svg b/LCARStrek/devtools/images/emojis/emoji-tool-shadereditor.svg new file mode 100644 index 00000000..1356caad --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-shadereditor.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-storage.svg b/LCARStrek/devtools/images/emojis/emoji-tool-storage.svg new file mode 100644 index 00000000..d9be2610 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-storage.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-styleeditor.svg b/LCARStrek/devtools/images/emojis/emoji-tool-styleeditor.svg new file mode 100644 index 00000000..ef715331 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-styleeditor.svg @@ -0,0 +1,11 @@ + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-webaudio.svg b/LCARStrek/devtools/images/emojis/emoji-tool-webaudio.svg new file mode 100644 index 00000000..b57c0f88 --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-webaudio.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/images/emojis/emoji-tool-webconsole.svg b/LCARStrek/devtools/images/emojis/emoji-tool-webconsole.svg new file mode 100644 index 00000000..78843dfd --- /dev/null +++ b/LCARStrek/devtools/images/emojis/emoji-tool-webconsole.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/LCARStrek/devtools/magnifying-glass@2x.png b/LCARStrek/devtools/images/magnifying-glass-light@2x.png similarity index 100% rename from LCARStrek/devtools/magnifying-glass@2x.png rename to LCARStrek/devtools/images/magnifying-glass-light@2x.png diff --git a/LCARStrek/devtools/images/magnifying-glass@2x.png b/LCARStrek/devtools/images/magnifying-glass@2x.png new file mode 100644 index 00000000..40597744 Binary files /dev/null and b/LCARStrek/devtools/images/magnifying-glass@2x.png differ diff --git a/LCARStrek/devtools/performance-icons.svg b/LCARStrek/devtools/images/performance-icons.svg similarity index 61% rename from LCARStrek/devtools/performance-icons.svg rename to LCARStrek/devtools/images/performance-icons.svg index be0adb0e..5ba9ce0a 100644 --- a/LCARStrek/devtools/performance-icons.svg +++ b/LCARStrek/devtools/images/performance-icons.svg @@ -1,69 +1,45 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/devtools/rewind.png b/LCARStrek/devtools/images/rewind.png similarity index 100% rename from LCARStrek/devtools/rewind.png rename to LCARStrek/devtools/images/rewind.png diff --git a/LCARStrek/devtools/rewind@2x.png b/LCARStrek/devtools/images/rewind@2x.png similarity index 100% rename from LCARStrek/devtools/rewind@2x.png rename to LCARStrek/devtools/images/rewind@2x.png diff --git a/LCARStrek/devtools/images/security-state-broken.svg b/LCARStrek/devtools/images/security-state-broken.svg new file mode 100644 index 00000000..7febcedf --- /dev/null +++ b/LCARStrek/devtools/images/security-state-broken.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/LCARStrek/devtools/images/security-state-insecure.svg b/LCARStrek/devtools/images/security-state-insecure.svg new file mode 100644 index 00000000..fa3d5797 --- /dev/null +++ b/LCARStrek/devtools/images/security-state-insecure.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/devtools/images/security-state-local.svg b/LCARStrek/devtools/images/security-state-local.svg new file mode 100644 index 00000000..4e6c8e0c --- /dev/null +++ b/LCARStrek/devtools/images/security-state-local.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/LCARStrek/devtools/images/security-state-secure.svg b/LCARStrek/devtools/images/security-state-secure.svg new file mode 100644 index 00000000..aad4d3c0 --- /dev/null +++ b/LCARStrek/devtools/images/security-state-secure.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/devtools/images/security-state-weak.svg b/LCARStrek/devtools/images/security-state-weak.svg new file mode 100644 index 00000000..92f05850 --- /dev/null +++ b/LCARStrek/devtools/images/security-state-weak.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/devtools/images/sort-arrows.svg b/LCARStrek/devtools/images/sort-arrows.svg new file mode 100644 index 00000000..07e05a00 --- /dev/null +++ b/LCARStrek/devtools/images/sort-arrows.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/LCARStrek/devtools/layout.css b/LCARStrek/devtools/layout.css index a91259d7..d9bcd5fe 100644 --- a/LCARStrek/devtools/layout.css +++ b/LCARStrek/devtools/layout.css @@ -2,16 +2,11 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ -.theme-sidebar { - box-sizing: border-box; -} - #sidebar-panel-layoutview { display: block; overflow: auto; } -body.theme-sidebar, #layout-container { /* The view will grow bigger as the window gets resized, until 400px */ max-width: 400px; @@ -23,7 +18,6 @@ body.theme-sidebar, /* Header: contains the position and size of the element */ -#header, #layout-header { box-sizing: border-box; width: 100%; @@ -32,28 +26,23 @@ body.theme-sidebar, vertical-align: top; } -#header:-moz-dir(rtl), #layout-header:-moz-dir(rtl) { -moz-box-direction: reverse; } -#header > span, #layout-header > span { display: -moz-box; } -#element-size, #layout-element-size { -moz-box-flex: 1; } -#element-size:-moz-dir(rtl), #layout-element-size:-moz-dir(rtl) { -moz-box-pack: end; } @media (max-height: 250px) { - #header, #layout-header { padding-top: 0; padding-bottom: 0; @@ -64,7 +53,6 @@ body.theme-sidebar, /* Main: contains the box-model regions */ -#main, #layout-main { position: absolute; box-sizing: border-box; @@ -77,8 +65,6 @@ body.theme-sidebar, width: calc(100% - 2 * 14px); } -.margin, -.size, .layout-margin, .layout-size { /* color: var(--theme-highlight-blue); */ @@ -86,14 +72,10 @@ body.theme-sidebar, /* Regions are 3 nested elements with wide borders and outlines */ -#content, #layout-content { height: 25px; } -#margins, -#borders, -#padding, #layout-margins, #layout-borders, #layout-padding { @@ -103,7 +85,6 @@ body.theme-sidebar, outline: dotted 1px var(--theme-splitter-color); } -#margins, #layout-margins { /* This opacity applies to all of the regions, since they are nested */ opacity: .8; @@ -112,14 +93,10 @@ body.theme-sidebar, /* Respond to window size change by changing the size of the regions */ @media (max-height: 250px) { - #content, #layout-content { height: 18px; } - #margins, - #borders, - #padding, #layout-margins, #layout-borders, #layout-padding { @@ -129,22 +106,18 @@ body.theme-sidebar, /* Regions colors */ -#margins, #layout-margins { border-color: #FFCF00; } -#borders, #layout-borders { border-color: #A09090; } -#padding, #layout-padding { border-color: #8050B0; } -#content, #layout-content { background-color: #008484; } @@ -171,7 +144,6 @@ body.theme-sidebar, */ /* Editable region sizes are contained in absolutely positioned

*/ -#main > p, #layout-main > p { position: absolute; pointer-events: none; @@ -179,8 +151,6 @@ body.theme-sidebar, text-align: center; } -#main > p > span, -#main > p > input, #layout-main > p > span, #layout-main > p > input { vertical-align: middle; @@ -189,51 +159,36 @@ body.theme-sidebar, /* Coordinates for the region sizes */ -.top, -.bottom, .layout-top, .layout-bottom { width: calc(100% - 2px); text-align: center; } -.padding.top, .layout-padding.layout-top { top: 55px; } -.padding.bottom, .layout-padding.layout-bottom { bottom: 57px; } -.border.top, .layout-border.layout-top { top: 30px; } -.border.bottom, .layout-border.layout-bottom { bottom: 31px; } -.margin.top, .layout-margin.layout-top { top: 5px; } -.margin.bottom, .layout-margin.layout-bottom { bottom: 6px; } -.size, -.margin.left, -.margin.right, -.border.left, -.border.right, -.padding.left, -.padding.right, .layout-size, .layout-margin.layout-left, .layout-margin.layout-right, @@ -245,17 +200,10 @@ body.theme-sidebar, line-height: 132px; } -.size, .layout-size { width: calc(100% - 2px); } -.margin.right, -.margin.left, -.border.left, -.border.right, -.padding.right, -.padding.left, .layout-margin.layout-right, .layout-margin.layout-left, .layout-border.layout-left, @@ -265,42 +213,34 @@ body.theme-sidebar, width: 25px; } -.padding.left, .layout-padding.layout-left { left: 52px; } -.padding.right, .layout-padding.layout-right { right: 51px; } -.border.left, .layout-border.layout-left { left: 26px; } -.border.right, .layout-border.layout-right { right: 26px; } -.margin.right, .layout-margin.layout-right { right: 0; } -.margin.left, .layout-margin.layout-left { left: 0; } -.rotate.left:not(.editing), .layout-rotate.layout-left:not(.layout-editing) { transform: rotate(-90deg); } -.rotate.right:not(.editing), .layout-rotate.layout-right:not(.layout-editing) { transform: rotate(90deg); } @@ -309,43 +249,30 @@ body.theme-sidebar, the regions smaller then */ @media (max-height: 250px) { - .padding.top, .layout-padding.layout-top { top: 37px; } - .padding.bottom, .layout-padding.layout-bottom { bottom: 38px; } - .border.top, .layout-border.layout-top { top: 19px; } - .border.bottom, .layout-border.layout-bottom { bottom: 20px; } - .margin.top, .layout-margin.layout-top { top: 1px; } - .margin.bottom, .layout-margin.layout-bottom { bottom: 2px; } - .size, - .margin.left, - .margin.right, - .border.left, - .border.right, - .padding.left, - .padding.right, .layout-size, .layout-margin.layout-left, .layout-margin.layout-right, @@ -356,12 +283,6 @@ body.theme-sidebar, line-height: 80px; } - .margin.right, - .margin.left, - .border.left, - .border.right, - .padding.right, - .padding.left, .layout-margin.layout-right, .layout-margin.layout-left, .layout-border.layout-left, @@ -371,22 +292,18 @@ body.theme-sidebar, width: 21px; } - .padding.left, .layout-padding.layout-left { left: 35px; } - .padding.right, .layout-padding.layout-right { right: 35px; } - .border.left, .layout-border.layout-left { left: 16px; } - .border.right, .layout-border.layout-right { right: 17px; } @@ -394,20 +311,17 @@ body.theme-sidebar, /* Legend, displayed inside regions */ -.legend, .layout-legend { position: absolute; margin: 5px 6px; z-index: 1; } -.legend[data-box="margin"], .layout-legend[data-box="margin"] { color: #000000; /*var(--theme-highlight-blue);*/ } @media (max-height: 250px) { - .legend, .layout-legend { margin: 2px 6px; } @@ -415,13 +329,11 @@ body.theme-sidebar, /* Editable fields */ -.editable, .layout-editable { border: 1px dashed transparent; -moz-user-select: text; } -.editable:hover, .layout-editable:hover { border-bottom-color: #E7ADE7; } @@ -433,16 +345,12 @@ body.theme-sidebar, /* Make sure the content size doesn't appear as editable like the other sizes */ -.size > span, .layout-size > span { cursor: default; } /* Hide all values when the view is inactive */ -body.inactive > #header > #element-position, -body.inactive > #header > #element-size, -body.inactive > #main > p, #layout-container.inactive > #layout-header > #layout-element-position, #layout-container.inactive > #layout-header > #layout-element-size, #layout-container.inactive > #layout-main > p { diff --git a/LCARStrek/devtools/layoutview.css b/LCARStrek/devtools/layoutview.css deleted file mode 100644 index 9bea927f..00000000 --- a/LCARStrek/devtools/layoutview.css +++ /dev/null @@ -1,339 +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/ */ - -.theme-sidebar { - box-sizing: border-box; -} - -body { - /* The view will grow bigger as the window gets resized, until 400px */ - max-width: 400px; - margin: 0px auto; - padding: 0; - /* "Contain" the absolutely positioned #main element */ - position: relative; -} - -/* Header: contains the position and size of the element */ - -#header { - box-sizing: border-box; - width: 100%; - padding: 4px 14px; - display: -moz-box; - vertical-align: top; -} - -#header:-moz-dir(rtl) { - -moz-box-direction: reverse; -} - -#header > span { - display: -moz-box; -} - -#element-size { - -moz-box-flex: 1; -} - -#element-size:-moz-dir(rtl) { - -moz-box-pack: end; -} - -@media (max-height: 228px) { - #header { - padding-top: 0; - padding-bottom: 0; - margin-top: 10px; - margin-bottom: 8px; - } -} - -/* Main: contains the box-model regions */ - -#main { - position: absolute; - box-sizing: border-box; - /* The regions are semi-transparent, so the white background is partly - visible */ - background-color: #FF9F00; - color: var(--theme-selection-color); - /* Make sure there is some space between the window's edges and the regions */ - margin: 0 14px 10px 14px; - width: calc(100% - 2 * 14px); -} - -.margin, -.size { -/* color: var(--theme-highlight-blue); */ -} - -/* Regions are 3 nested elements with wide borders and outlines */ - -#content { - height: 25px; -} - -#margins, -#borders, -#padding { - border-color: var(-theme-splitter-color); - border-width: 25px; - border-style: solid; - outline: dotted 1px var(-theme-splitter-color); -} - -#margins { - /* This opacity applies to all of the regions, since they are nested */ - opacity: .8; -} - -/* Respond to window size change by changing the size of the regions */ - -@media (max-height: 228px) { - #content { - height: 18px; - } - - #margins, - #borders, - #padding { - border-width: 18px; - } -} - -/* Regions colors */ - -#margins { - border-color: #FFCF00; -} - -#borders { - border-color: #A09090; -} - -#padding { - border-color: #8050B0; -} - -#content { - background-color: #008484; -} - -/* Editable region sizes are contained in absolutely positioned

*/ - -#main > p { - position: absolute; - pointer-events: none; -} - -#main > p { - margin: 0; - text-align: center; -} - -#main > p > span { - vertical-align: middle; - pointer-events: auto; -} - -/* Coordinates for the region sizes */ - -.top, -.bottom { - width: calc(100% - 2px); - text-align: center; -} - -.padding.top { - top: 55px; -} - -.padding.bottom { - bottom: 57px; -} - -.border.top { - top: 30px; -} - -.border.bottom { - bottom: 31px; -} - -.margin.top { - top: 5px; -} - -.margin.bottom { - bottom: 6px; -} - -.size, -.margin.left, -.margin.right, -.border.left, -.border.right, -.padding.left, -.padding.right { - top: 22px; - line-height: 132px; -} - -.size { - width: calc(100% - 2px); -} - -.margin.right, -.margin.left, -.border.left, -.border.right, -.padding.right, -.padding.left { - width: 25px; -} - -.padding.left { - left: 52px; -} - -.padding.right { - right: 51px; -} - -.border.left { - left: 26px; -} - -.border.right { - right: 26px; -} - -.margin.right { - right: 0; -} - -.margin.left { - left: 0; -} - -.rotate.left:not(.editing) { - transform: rotate(-90deg); -} - -.rotate.right:not(.editing) { - transform: rotate(90deg); -} - -/* Coordinates should be different when the window is small, because we make - the regions smaller then */ - -@media (max-height: 228px) { - .padding.top { - top: 37px; - } - - .padding.bottom { - bottom: 38px; - } - - .border.top { - top: 19px; - } - - .border.bottom { - bottom: 20px; - } - - .margin.top { - top: 1px; - } - - .margin.bottom { - bottom: 2px; - } - - .size, - .margin.left, - .margin.right, - .border.left, - .border.right, - .padding.left, - .padding.right { - line-height: 80px; - } - - .margin.right, - .margin.left, - .border.left, - .border.right, - .padding.right, - .padding.left { - width: 21px; - } - - .padding.left { - left: 35px; - } - - .padding.right { - right: 35px; - } - - .border.left { - left: 16px; - } - - .border.right { - right: 17px; - } -} - -/* Legend, displayed inside regions */ - -.legend { - position: absolute; - margin: 5px 6px; - z-index: 1; -} - -.legend[data-box="margin"] { - color: #000000; -} - -@media (max-height: 228px) { - .legend { - margin: 2px 6px; - } -} - -/* Editable fields */ - -.editable { - border: 1px dashed transparent; - -moz-user-select: text; -} - -.editable:hover { - border-bottom-color: #E7ADE7; -} - -.styleinspector-propertyeditor { - border: 1px solid #008484; - padding: 0; -} - -/* Make sure the content size doesn't appear as editable like the other sizes */ - -.size > span { - cursor: default; -} - -/* Hide all values when the view is inactive */ - -body.inactive > #header > #element-position, -body.inactive > #header > #element-size, -body.inactive > #main > p { - visibility: hidden; -} diff --git a/LCARStrek/devtools/magnifying-glass.png b/LCARStrek/devtools/magnifying-glass.png deleted file mode 100644 index 8d50b9df..00000000 Binary files a/LCARStrek/devtools/magnifying-glass.png and /dev/null differ diff --git a/LCARStrek/devtools/markup-view.css b/LCARStrek/devtools/markup-view.css deleted file mode 100644 index 74942ba4..00000000 --- a/LCARStrek/devtools/markup-view.css +++ /dev/null @@ -1,108 +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/. */ - -* { - padding: 0; - margin: 0; -} - -.more-nodes { - padding-left: 16px; -} - -.styleinspector-propertyeditor { - border: 1px solid #9C9CFF; -} - -/* Draw a circle next to nodes that have a pseudo class lock. - Center vertically with the 1.4em line height on .tag-line */ -.child.pseudoclass-locked::before { - content: ""; - background: var(--theme-highlight-lightorange); - border-radius: 50%; - width: .8em; - height: .8em; - margin-top: .3em; - left: 1px; - position: absolute; -} - -/* Selected nodes in the tree should have light selected text. - theme-selected doesn't work in this case since the text is a - sibling of the class, not a child. */ -.theme-selected ~ .editor, -.theme-selected ~ .editor .theme-fg-color1, -.theme-selected ~ .editor .theme-fg-color2, -.theme-selected ~ .editor .theme-fg-color3, -.theme-selected ~ .editor .theme-fg-color4, -.theme-selected ~ .editor .theme-fg-color5, -.theme-selected ~ .editor .theme-fg-color6, -.theme-selected ~ .editor .theme-fg-color7 { - color: var(--theme-selection-color); -} - -/* In case a node isn't displayed in the page, we fade the syntax highlighting */ -.not-displayed .open, -.not-displayed .close { - opacity: .7; -} - -.tag-line { - padding-left: 2px; -} - -/* Preview */ - -#previewbar { - position: fixed; - top: 0; - right: 0; - width: 90px; - background: black; - border-left: 1px solid; - border-bottom: 1px solid; - overflow: hidden; - - background: var(--theme-toolbar-background); - border-color: var(--theme-splitter-color); -} - -#preview { - position: absolute; - top: 0; - right: 5px; - width: 80px; - height: 100%; - background-image: -moz-element(#root); - background-repeat: no-repeat; -} - -#previewbar.hide, -#previewbar.disabled { - display: none; -} - -#viewbox { - position: absolute; - top: 0; - right: 5px; - width: 80px; - border: 1px dashed #9C9CFF; - background: #000000; - outline: 1px solid transparent; -} - -/* Events */ -.markupview-events { - font-size: 8px; - font-weight: bold; - line-height: 10px; - border-radius: 3px; - padding: 0px 2px; - -moz-margin-start: 5px; - -moz-user-select: none; - - background-color: var(--theme-body-color-alt); - color: var(--theme-body-background); -} diff --git a/LCARStrek/devtools/markup.css b/LCARStrek/devtools/markup.css index 17eab354..07438462 100644 --- a/LCARStrek/devtools/markup.css +++ b/LCARStrek/devtools/markup.css @@ -33,6 +33,10 @@ body { background: none; } +html.dragging { + overflow-x: hidden; +} + body.dragging .tag-line { cursor: grabbing; } diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 297a7cd6..566a7230 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -51,20 +51,10 @@ window { display: none; } -.requests-menu-header:first-child { - -moz-padding-start: 4px; - -moz-margin-start: 4px; -} - .requests-menu-subitem { padding: 4px; } -.requests-menu-header:not(:last-child), -.requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid var(--table-splitter-color); -} - .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { } @@ -72,44 +62,72 @@ window { .requests-menu-header-button, #requests-menu-status-button { background-color: transparent; + border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; + border-style: solid; + border-width: 0; + border-inline-start-width: 1px; border-radius: 0; - min-width: 20px; + min-width: 1px; + min-height: 24px; margin: 0; + padding-bottom: 2px; + padding-inline-start: 13px; + padding-top: 2px; + text-align: center; font-weight: inherit !important; - transition: background-color 0.1s ease-in-out; } -.requests-menu-header-button > .button-box, -#requests-menu-status-button > .button-box { - border-radius: 0; - -moz-padding-start: 0; - -moz-padding-end: 0; - border: 0; +.requests-menu-header:first-child .requests-menu-header-button { + border-width: 0; } .requests-menu-header-button:hover { - background-color: #FFCF00; + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); } .requests-menu-header-button:hover:active { - background-color: #FF9F00; + background-color: var(--theme-active-background); + color: var(--theme-active-color); +} + +.requests-menu-header-button > .button-box > .button-icon, +#requests-menu-waterfall-image { + display: -moz-box; + height: 4px; + margin-inline-end: 6px; + -moz-box-ordinal-group: 2; + width: 7px; +} + +.requests-menu-header-button[sorted] > .button-box > .button-icon, +.requests-menu-header-button[sorted] #requests-menu-waterfall-image { + list-style-image: url('chrome://devtools/skin/images/sort-arrows.svg'); +} + +.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon, +.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image { + -moz-image-region: rect(4px, 19px, 7px, 14px); } -.requests-menu-header-button:not(:active)[sorted] { - background-color: #008484; +.requests-menu-header-button[sorted=descending] > .button-box > .button-icon, +.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image { + -moz-image-region: rect(5px, 8px, 8px, 3px); } -.requests-menu-header-button:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; +.requests-menu-header-button > .button-box > .button-text, +#requests-menu-waterfall-label-wrapper { + -moz-box-flex: 1; +} + +.requests-menu-header-button[sorted]:not(:hover) { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } -.requests-menu-header-button:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, rgba(0,0,0,.7), rgba(0,0,0,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: bottom; +.requests-menu-header-button[sorted], +.requests-menu-header[active] + .requests-menu-header .requests-menu-header-button { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; } #requests-menu-status-button { @@ -122,24 +140,21 @@ window { /* Network requests table: specific column dimensions */ -.requests-menu-status-and-method { - width: 12em; -} - .requests-menu-status { - width: 10px; - height: 10px; - margin: 0px 2px; + max-width: 6em; + text-align: center; + width: 10vw; } -.requests-menu-method { +.requests-menu-method, +.requests-menu-method-box { + max-width: 7em; text-align: center; - font-weight: 600; + width: 10vw; } .requests-menu-icon-and-file { - width: 20vw; - min-width: 4em; + width: 22vw; } .requests-menu-icon { @@ -171,44 +186,49 @@ window { } .security-state-insecure { - list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg"); } .security-state-secure { - list-style-image: url("chrome://browser/skin/identity-secure.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg"); } .security-state-weak { - list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg"); } .security-state-broken { - list-style-image: url("chrome://browser/skin/controlcenter/warning-gray.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg"); } .security-state-local { - list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); -} - -.requests-menu-type { - text-align: center; - width: 4em; + list-style-image: url("chrome://devtools/skin/images/security-state-local.svg"); } +.requests-menu-type, .requests-menu-size { + max-width: 6em; text-align: center; - width: 8em; + width: 8vw; } .requests-menu-transferred { + max-width: 8em; text-align: center; - width: 8em; + width: 4vw; } /* Network requests table: status codes */ -box.requests-menu-status { +.requests-menu-status-code { + -moz-margin-start: 3px !important; + width: 3em; + -moz-margin-end: -3em !important; +} + +.requests-menu-status-icon { background-color: #A09090; + height: 10px; width: 10px; -moz-margin-start: 5px; -moz-margin-end: 5px; @@ -217,32 +237,25 @@ box.requests-menu-status { transition: background-color 0.5s ease-in-out; } -label.requests-menu-status-code { - -moz-margin-start: 3px !important; - width: 3em; - -moz-margin-end: -3em !important; -} - -box.requests-menu-status:not([code]) { - background-color: var(--theme-highlight-red); - border-radius: 0; /* squares */ +.requests-menu-status-icon:not([code]) { + background-color: var(--theme-content-color2); } -box.requests-menu-status[code="cached"] { +.requests-menu-status-icon[code="cached"] { border: 2px solid var(--theme-content-color2); background-color: transparent; } -box.requests-menu-status[code^="1"] { - background-color: var(---theme-highlight-blue); +.requests-menu-status-icon[code^="1"] { + background-color: var(--theme-highlight-blue); } -box.requests-menu-status[code^="2"] { +.requests-menu-status-icon[code^="2"] { background-color: var(--theme-highlight-green); } /* 3xx are triangles */ -box.requests-menu-status[code^="3"] { +.requests-menu-status-icon[code^="3"] { background-color: transparent; width: 0; height: 0; @@ -253,12 +266,12 @@ box.requests-menu-status[code^="3"] { } /* 4xx and 5xx are squares - error codes */ -box.requests-menu-status[code^="4"] { +.requests-menu-status-icon[code^="4"] { background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } -box.requests-menu-status[code^="5"] { +.requests-menu-status-icon[code^="5"] { background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); @@ -266,23 +279,32 @@ box.requests-menu-status[code^="5"] { /* Network requests table: waterfall header */ -#requests-menu-waterfall-label { - -moz-padding-start: 8px; - -moz-padding-end: 8px; +.requests-menu-waterfall { + padding-inline-start: 0; +} + +#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) { + padding-inline-start: 13px; } .requests-menu-timings-division { width: 100px; padding-top: 1px; - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000000; + padding-inline-start: 4px; + border-inline-start: 1px dotted #000000; font-size: 90%; pointer-events: none; + box-sizing: border-box; + text-align: start; +} + +.requests-menu-timings-division:first-child { + width: 98px; /* Substract 2px for borders */ } .requests-menu-timings-division:not(:first-child) { - -moz-border-start: 1px dotted; - -moz-margin-start: -100px !important; /* Don't affect layout. */ + border-inline-start: 1px dotted; + margin-inline-start: -100px !important; /* Don't affect layout. */ } .requests-menu-timings-division:-moz-locale-dir(ltr) { @@ -293,17 +315,12 @@ box.requests-menu-status[code^="5"] { transform-origin: right center; } -.requests-menu-timings-division[division-scale=millisecond] { - -moz-border-start-color: var(--theme-body-color) !important; -} - -.requests-menu-timings-division[division-scale=second] { - -moz-border-start-color: var(--theme-body-color) !important; - font-weight: 600; +.requests-menu-timings-division { + border-inline-start-color: var(--theme-body-color) !important; } +.requests-menu-timings-division[division-scale=second], .requests-menu-timings-division[division-scale=minute] { - -moz-border-start-color: var(--theme-body-color) !important; font-weight: 600; } @@ -404,20 +421,20 @@ box.requests-menu-status[code^="5"] { /* Network request details */ #details-pane-toggle { - list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png"); } #details-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://devtools/skin/debugger-expand.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-expand.png"); } @media (min-resolution: 1.1dppx) { #details-pane-toggle { - list-style-image: url("chrome://devtools/skin/debugger-collapse@2x.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-collapse@2x.png"); } #details-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://devtools/skin/debugger-expand@2x.png"); + list-style-image: url("chrome://devtools/skin/images/debugger-expand@2x.png"); } } @@ -739,6 +756,24 @@ box.requests-menu-status[code^="5"] { width: 7em; } +/* Platform overrides (copied in from the old platform specific files) */ +:root[platform="win"] .requests-menu-header-button > .button-box { + padding: 0; +} + +:root[platform="win"] .requests-menu-timings-division { + padding-top: 1px; + font-size: 90%; +} + +:root[platform="linux"] #headers-summary-resend { + padding: 4px; +} + +:root[platform="linux"] #toggle-raw-headers { + padding: 4px; +} + /* Responsive sidebar */ @media (max-width: 700px) { #requests-menu-toolbar { @@ -746,7 +781,8 @@ box.requests-menu-status[code^="5"] { } .requests-menu-header-button { - min-height: 24px; + min-height: 22px; + padding-left: 8px; } #details-pane { @@ -754,25 +790,36 @@ box.requests-menu-status[code^="5"] { /* To prevent all the margin hacks to hide the sidebar. */ } - .requests-menu-status-and-method { - width: 16vw; + .requests-menu-status { + max-width: none; + width: 12vw; + } + + .requests-menu-status-code { + width: auto; + } + + .requests-menu-method, + .requests-menu-method-box { + max-width: none; + width: 14vw; + } + + .requests-menu-icon-and-file { + width: 22vw; } - .requests-menu-icon-and-file, .requests-menu-security-and-domain { - width: 30vw; + width: 18vw; } .requests-menu-type { - width: 8vw; + width: 10vw; } + .requests-menu-transferred, .requests-menu-size { - width: 16vw; - border-width: 0 !important; - box-shadow: none !important; - /* The "Timeline" header is not visible anymore, and thus the - right border and box-shadow of "Size" column should be hidden. */ + width: 12vw; } } diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css index 12fc9dd5..8ac95bc6 100644 --- a/LCARStrek/devtools/performance.css +++ b/LCARStrek/devtools/performance.css @@ -11,6 +11,7 @@ --focus-cell-border-color: #9C9CFF; --row-alt-background-color: #403400; --row-hover-background-color: #544400; + --filter-image: url(chrome://devtools/skin/images/timeline-filter.svg); } /** @@ -35,31 +36,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:not([disabled]):hover, -#filter-button:not([disabled]):hover:active, -#filter-button[open] { - list-style-image: url(timeline-filter.svg#filter-open); -} - -#performance-filter-menupopup > menuitem:before { - content: ""; - display: block; - width: 8px; - height: 8px; - margin: 0 8px; - border-radius: 1px; -} - -#filter-button { - list-style-image: url(timeline-filter.svg); + list-style-image: var(--filter-image); } #performance-filter-menupopup > menuitem:before { @@ -74,41 +51,17 @@ /* Details panel buttons */ #select-waterfall-view { - list-style-image: url(performance-icons.svg#details-waterfall); -} - -#select-waterfall-view:hover, -#select-waterfall-view:hover:active, -#select-waterfall-view[checked] { - list-style-image: url(performance-icons.svg#details-waterfall-active); + list-style-image: url(images/performance-icons.svg#details-waterfall); } #select-js-calltree-view, #select-memory-calltree-view { - list-style-image: url(performance-icons.svg#details-call-tree); -} - -#select-js-calltree-view:hover, -#select-js-calltree-view:hover:active, -#select-js-calltree-view[checked], -#select-memory-calltree-view:hover, -#select-memory-calltree-view:hover:active, -#select-memory-calltree-view[checked] { - list-style-image: url(performance-icons.svg#details-call-tree-active); + list-style-image: url(images/performance-icons.svg#details-call-tree); } #select-js-flamegraph-view, #select-memory-flamegraph-view { - list-style-image: url(performance-icons.svg#details-flamegraph); -} - -#select-js-flamegraph-view:hover, -#select-js-flamegraph-view:hover:active, -#select-js-flamegraph-view[checked], -#select-memory-flamegraph-view:hover, -#select-memory-flamegraph-view:hover:active, -#select-memory-flamegraph-view[checked] { - list-style-image: url(performance-icons.svg#details-flamegraph-active); + list-style-image: url(images/performance-icons.svg#details-flamegraph); } #select-optimizations-view { @@ -118,12 +71,6 @@ /* Recording buttons */ #main-record-button { - 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(images/profiler-stopwatch.svg); } @@ -152,6 +99,14 @@ /* Sidebar & recording items */ +#recordings-pane { + border-inline-end: 1px solid var(--theme-splitter-color); +} + +#recordings-list { + max-width: 300px; +} + .recording-item { padding: 4px; } @@ -180,16 +135,24 @@ color: inherit !important; } - /* Recording notices */ .notice-container { font-size: 120%; - background-color: var(--theme-toolbar-background); + background-color: var(--theme-body-background); color: var(--theme-body-color); padding-bottom: 20vh; } +.tool-disabled-message { + text-align: center; +} + +.console-profile-recording-notice, +.console-profile-stop-notice { + overflow: hidden; +} + .console-profile-command { font-family: monospace; margin: 3px 2px; @@ -200,11 +163,7 @@ display: none; } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: initial; - opacity: 0.5; - -} +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message, #performance-view[e10s="unsupported"] .realtime-disabled-message { display: initial; opacity: 0.5; @@ -251,6 +210,7 @@ .call-tree-cell[type="duration"], .call-tree-header[type="self-duration"], .call-tree-cell[type="self-duration"] { + min-width: 6vw; width: 6vw; } @@ -258,11 +218,13 @@ .call-tree-cell[type="percentage"], .call-tree-header[type="self-percentage"], .call-tree-cell[type="self-percentage"] { + min-width: 5vw; width: 5vw; } .call-tree-header[type="samples"], .call-tree-cell[type="samples"] { + min-width: 4.5vw; width: 4.5vw; } @@ -282,18 +244,15 @@ .call-tree-cell[type="size-percentage"], .call-tree-header[type="self-size-percentage"], .call-tree-cell[type="self-size-percentage"] { + min-width: 6vw; width: 6vw; } -.call-tree-header[type="function"], -.call-tree-cell[type="function"] { - -moz-box-flex: 1; -} - .call-tree-header, .call-tree-cell { -moz-box-align: center; overflow: hidden; + text-overflow: ellipsis; padding: 1px 4px; color: var(--theme-body-color); -moz-border-end-color: var(--cell-border-color); @@ -317,6 +276,18 @@ background-color: var(--theme-tab-toolbar-background); } +.call-tree-item .call-tree-cell, +.call-tree-item .call-tree-cell[type=function] description { + -moz-user-select: text; + /* so that optimizations view doesn't break the lines in call tree */ + white-space: nowrap; +} + +.call-tree-item .call-tree-cell::-moz-selection, +.call-tree-item .call-tree-cell[type=function] description::-moz-selection { + background-color: var(--theme-highlight-orange); +} + .call-tree-item:last-child { border-bottom: 1px solid var(--cell-border-color); } @@ -390,7 +361,7 @@ */ .waterfall-header-ticks { - overflow: hidden; + overflow: hidden; } .waterfall-header-name { @@ -411,7 +382,7 @@ .waterfall-background-ticks { /* Background created on a in js. */ - /* @see browser/devtools/timeline/widgets/waterfall.js */ + /* @see devtools/client/timeline/widgets/waterfall.js */ background-image: -moz-element(#waterfall-background); background-repeat: repeat-y; background-position: -1px center; @@ -519,6 +490,17 @@ -moz-margin-end: -14px; } +/** + * OTMT markers + */ + +.waterfall-tree-item[otmt=true] .waterfall-marker-bullet, +.waterfall-tree-item[otmt=true] .waterfall-marker-bar { + background-color: transparent; + border-width: 1px; + border-style: solid; +} + /** * Marker details view */ @@ -541,7 +523,7 @@ border-radius: 1px; } -.marker-details-labelname { +.marker-details-name-label { -moz-padding-end: 4px; } @@ -563,347 +545,55 @@ * Marker colors */ +menuitem.marker-color-graphs-full-red:before, +.marker-color-graphs-full-red { + background-color: var(--theme-graphs-full-red); + border-color: var(--theme-graphs-full-red); +} +menuitem.marker-color-graphs-full-blue:before, +.marker-color-graphs-full-blue { + background-color: var(--theme-graphs-full-blue); + border-color: var(--theme-graphs-full-blue); +} menuitem.marker-color-graphs-green:before, .marker-color-graphs-green { background-color: var(--theme-graphs-green); + border-color: var(--theme-graphs-green); } - menuitem.marker-color-graphs-blue:before, .marker-color-graphs-blue { background-color: var(--theme-graphs-blue); + border-color: var(--theme-graphs-blue); } - menuitem.marker-color-graphs-bluegrey:before, .marker-color-graphs-bluegrey { background-color: var(--theme-graphs-bluegrey); + border-color: var(--theme-graphs-bluegrey); } - menuitem.marker-color-graphs-purple:before, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); + border-color: var(--theme-graphs-purple); } - menuitem.marker-color-graphs-yellow:before, .marker-color-graphs-yellow { background-color: var(--theme-graphs-yellow); + border-color: var(--theme-graphs-yellow); +} +menuitem.marker-color-graphs-orange:before, +.marker-color-graphs-orange { + background-color: var(--theme-graphs-orange); + border-color: var(--theme-graphs-orange); } - menuitem.marker-color-graphs-red:before, .marker-color-graphs-red { background-color: var(--theme-graphs-red); + border-color: var(--theme-graphs-red); } - menuitem.marker-color-graphs-grey:before, .marker-color-graphs-grey{ background-color: var(--theme-graphs-grey); -} - -/* Profile call tree */ - -.call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); - overflow: auto; -} - -.call-tree-cells-container[categories-hidden] .call-tree-category { - display: none; -} - -.call-tree-header[type="duration"], -.call-tree-cell[type="duration"], -.call-tree-header[type="self-duration"], -.call-tree-cell[type="self-duration"] { - width: 9em; -} - -.call-tree-header[type="percentage"], -.call-tree-cell[type="percentage"], -.call-tree-header[type="self-percentage"], -.call-tree-cell[type="self-percentage"] { - width: 6em; -} - -.call-tree-header[type="samples"], -.call-tree-cell[type="samples"] { - width: 5em; -} - -.call-tree-header[type="function"], -.call-tree-cell[type="function"] { - -moz-box-flex: 1; -} - -.call-tree-header, -.call-tree-cell { - -moz-box-align: center; - overflow: hidden; - padding: 1px 4px; -} - -.call-tree-header:not(:last-child), -.call-tree-cell:not(:last-child) { - -moz-border-end: 1px solid; -} - -.call-tree-header, -.call-tree-cell { - -moz-border-end-color: var(--theme-splitter-color); - color: var(--theme-body-color); -} - -.call-tree-header:not(:last-child) { - text-align: center; -} - -.call-tree-cell:not(:last-child) { - text-align: end; -} - -.call-tree-header { - background-color: var(--theme-toolbar-background); -} - -.call-tree-item:last-child:not(:focus) { - border-bottom: 1px solid var(--theme-splitter-color); -} - -.call-tree-item:nth-child(2n) { - background-color: var(--theme-contrast-background); -} - -.call-tree-item:hover { - background-color: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.call-tree-item:focus { - background-color: var(--theme-selection-background); -} - -.call-tree-item:focus label { - color: var(--theme-selection-color); -} - -.call-tree-item:focus .call-tree-cell { - -moz-border-end-color: var(--theme-splitter-color); -} - -.call-tree-item:not([origin="content"]) .call-tree-name, -.call-tree-item:not([origin="content"]) .call-tree-url, -call-tree-item:not([origin="content"]) .call-tree-line { - /* Style chrome and non-JS nodes differently. */ - opacity: 0.6; -} - -.call-tree-name { - -moz-margin-end: 4px !important; -} - -.call-tree-url { - cursor: pointer; -} - -.call-tree-url:hover { - text-decoration: underline; -} - -.call-tree-url { - color: var(--theme-text-blue); -} - -.call-tree-line { - color: var(--theme-contrast-border); -} - -.call-tree-host { - -moz-margin-start: 8px !important; - font-size: 90%; -} - -.call-tree-host { - color: ver(--theme-body-color); -} - -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; -} - -.call-tree-zoom { - background-image: url(magnifying-glass.png); -} - -@media (min-resolution: 1.1dppx) { - .call-tree-zoom { - background-image: url(magnifying-glass@2x.png); - } -} - -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; -} - -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; -} - -/** - * JIT View - */ - -#jit-optimizations-view { - width: 350px; - overflow-x: hidden; - overflow-y: auto; - min-width: 200px; -} - -#optimizations-graph { - height: 30px; -} - -#jit-optimizations-view.empty #optimizations-graph { - display: none !important; -} - -/* override default styles for tree widget */ -#jit-optimizations-view .tree-widget-empty-text { - font-size: inherit; - padding: 0px; - margin: 8px; -} - -#jit-optimizations-view:not(.empty) .tree-widget-empty-text { - display: none; -} - -#jit-optimizations-toolbar { - height: 18px; - min-height: 0px; /* override .devtools-toolbar min-height */ -} - -.jit-optimizations-title { - margin: 0px 4px; - font-weight: 600; -} - -#jit-optimizations-raw-view { - font-size: 90%; -} - -/* override default .tree-widget-item line-height */ -#jit-optimizations-raw-view .tree-widget-item { - line-height: 20px !important; - display: block; - overflow: hidden; -} - -#jit-optimizations-raw-view .tree-widget-item[level="1"] { - font-weight: 600; -} - -#jit-optimizations-view .opt-outcome::before { - content: "→"; - margin: 4px 0px; - color: var(--theme-body-color); -} -#jit-optimizations-view .theme-selected .opt-outcome::before { - color: var(--theme-selection-color); -} - -#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] { - color: var(--theme-highlight-green); -} -#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] { - color: var(--theme-highlight-red); -} -#jit-optimizations-view .tree-widget-container { - -moz-margin-end: 0px; -} -#jit-optimizations-view .tree-widget-container > li, -#jit-optimizations-view .tree-widget-children > li { - overflow: hidden; -} - -.opt-line::before { - content: ":"; - color: var(--theme-highlight-orange); -} -.theme-selected .opt-line::before { - color: var(--theme-selection-color); -} -.opt-line.header-line::before { - color: var(--theme-body-color); -} -#jit-optimizations-view.empty .opt-line.header-line::before { - display: none; -} - -.opt-url { - -moz-margin-start: 4px !important; -} -.opt-url:hover { - text-decoration: underline; -} -.opt-url.debugger-link { - cursor: pointer; -} - -.opt-icon::before { - content: ""; - background-image: url(chrome://devtools/skin/webconsole.svg); - background-repeat: no-repeat; - background-size: 72px 60px; - /* show grey "i" bubble by default */ - background-position: -36px -36px; - width: 12px; - height: 12px; - display: inline-block; - - max-height: 12px; -} - -#jit-optimizations-view .opt-icon::before { - margin: 5px 6px 0 0; -} -description.opt-icon { - margin: 0px 0px 0px 0px; -} -description.opt-icon::before { - margin: 1px 4px 0px 0px; -} - -.opt-icon[severity=warning]::before { - background-position: -24px -24px; -} - -ul.frames-list { - list-style-type: none; - padding: 0px; - margin: 0px; -} - -ul.frames-list li { - cursor: pointer; -} - -ul.frames-list li.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); + border-color: var(--theme-graphs-grey); } /** @@ -918,7 +608,7 @@ ul.frames-list li.selected { */ menuitem.experimental-option::before { content: ""; - background-image: url(chrome://devtools/skin/webconsole.svg); + background-image: url(chrome://devtools/skin/images/webconsole.svg); background-repeat: no-repeat; background-size: 72px 60px; width: 12px; @@ -934,3 +624,11 @@ menuitem.experimental-option::before { #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { display: none; } + +/* for call tree */ +description.opt-icon { + margin: 0px 0px 0px 0px; +} +description.opt-icon::before { + margin: 1px 4px 0px 0px; +} diff --git a/LCARStrek/devtools/ruleview.css b/LCARStrek/devtools/ruleview.css deleted file mode 100644 index ab69b62b..00000000 --- a/LCARStrek/devtools/ruleview.css +++ /dev/null @@ -1,299 +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/. */ - -/* CSS Variables specific to this panel that aren't defined by the themes */ - -.theme-light { - --rule-highlight-background-color: #402800; - --rule-filter-icon: url("magnifying-glass.png"); -} - -.ruleview { - height: 100%; -} - -.ruleview-rule-source { - text-align: end; - float: right; - -moz-user-select: none; - margin-bottom: 2px; -} - -.ruleview-rule-source > label { - cursor: pointer; - margin: 0; -} - -.ruleview-rule-source[unselectable], -.ruleview-rule-source[unselectable] > label { - cursor: default; -} - -.ruleview-rule-source:not([unselectable]):hover { - text-decoration: underline; -} - -.ruleview-header { - border-top-width: 1px; - border-bottom-width: 1px; - border-top-style: solid; - border-bottom-style: solid; - padding: 1px 4px; - margin-top: 4px; - -moz-user-select: none; - word-wrap: break-word; -} - -.ruleview-rule, -#noResults { - padding: 2px 4px; -} - -/** - * Display rules that don't match the current selected element and uneditable - * user agent styles differently - */ -.ruleview-rule[unmatched=true], -.ruleview-rule[uneditable=true] { - background: var(--theme-toolbar-background); -} - -.ruleview-rule[uneditable=true] :focus { - outline: none; -} - -.ruleview-rule[uneditable=true] .theme-link { - color: var(--theme-text-blue); -} - -.ruleview-rule[uneditable=true] .ruleview-enableproperty { - visibility: hidden; -} - -.ruleview-rule[uneditable=true] .ruleview-colorswatch, -.ruleview-rule[uneditable=true] .ruleview-bezierswatch { - cursor: default; -} - -.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > -.ruleview-propertyvalue { - border-bottom-color: transparent; -} - -#noResults { - font: message-box; - color: #8050B0; -} - -.ruleview-rule + .ruleview-rule { - border-top-width: 1px; - border-top-style: dotted; -} - -.ruleview-warning { - background: url("images/alerticon-warning.png"); - -moz-margin-start: 5px; - display: inline-block; - width: 13px; - height: 12px; -} - -@media (min-resolution: 1.1dppx) { - .ruleview-warning { - background-image: url("images/alerticon-warning@2x.png"); - } -} - -.ruleview-overridden-rule-filter { - background-image: var(--rule-filter-icon); - background-size: 11px 11px; - -moz-margin-start: 5px; - display: inline-block; - width: 11px; - height: 11px; -} - -.ruleview-ruleopen { - -moz-padding-end: 5px; -} - -.ruleview-ruleclose { - cursor: text; - padding-right: 20px; -} - -.ruleview-propertylist { - list-style: none; - padding: 0; - margin: 0; -} - -.ruleview-rule:not(:hover) .ruleview-enableproperty { - visibility: hidden; -} - -.ruleview-expander { - display: inline-block; -} - -.ruleview-newproperty { - /* (enable checkbox width: 12px) + (expander width: 15px) */ - -moz-margin-start: 27px; -} - -.ruleview-namecontainer, -.ruleview-propertyvaluecontainer, -.ruleview-propertyname, -.ruleview-propertyvalue { - text-decoration: inherit; -} - -.ruleview-computedlist { - list-style: none; - padding: 0; -} - -.ruleview-computed { - -moz-margin-start: 35px; -} - -.ruleview-swatch { - cursor: pointer; - border-radius: 50%; - width: 0.9em; - height: 0.9em; - vertical-align: middle; - -moz-margin-end: 5px; - display: inline-block; - position: relative; -} - -.ruleview-colorswatch::before { - content: ''; - background-color: #9C9CFF; - background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090), - linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090); - background-size: 12px 12px; - background-position: 0 0, 6px 6px; - position: absolute; - border-radius: 50%; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} - -.ruleview-bezierswatch { - background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png"); - background-size: 1em; -} - -@media (min-resolution: 1.1dppx) { - .ruleview-bezierswatch { - background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png"); - background-size: 1em; - } -} - -.ruleview-overridden { - text-decoration: line-through; -} - -.styleinspector-propertyeditor { - border: 1px solid #A09090; - padding: 0; -} - -.ruleview-property { - border-left: 3px solid transparent; - clear: right; -} - -.ruleview-propertycontainer > * { - vertical-align: middle; -} - -.ruleview-property[dirty] { - border-left-color: var(--theme-highlight-green); -} - -.ruleview-highlight { - background-color: var(--rule-highlight-background-color); -} - -.ruleview-namecontainer > .ruleview-propertyname, -.ruleview-propertyvaluecontainer > .ruleview-propertyvalue { - border-bottom: 1px dashed transparent; -} - -.ruleview-namecontainer:hover > .ruleview-propertyname, -.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { - border-bottom-color: #008484; -} - -.ruleview-selectorcontainer { - word-wrap: break-word; - cursor: text; -} - -.ruleview-selector-separator, .ruleview-selector-unmatched { - color: #8050B0; -} - -.ruleview-selector-matched > .ruleview-selector-attribute { - /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ -} - -.ruleview-selector-matched > .ruleview-selector-images/psuedo-class { - /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ -} - -.ruleview-selector-matched > .ruleview-selector-images/psuedo-class-lock { - font-weight: bold; - color: var(--theme-highlight-orange); -} - -.ruleview-selectorhighlighter { - background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-left: 5px; - cursor: pointer; -} - -.ruleview-selectorhighlighter:hover { - filter: url(images/filters.svg#checked-icon-state); -} - -.ruleview-selectorhighlighter:active, -.ruleview-selectorhighlighter.highlighted { - filter: url(images/filters.svg#checked-icon-state); -} - -#images/psuedo-class-panel:not([hidden]) { - border-bottom: 1px solid var(--theme-splitter-color); -} - -#ruleview-add-rule-button::before { - background-image: url("chrome://devtools/skin/images/add.svg#add"); - background-size: cover; -} -#ruleview-add-rule-button:hover::before { - background-image: url("chrome://devtools/skin/images/add.svg#add-checked"); -} - -#images/psuedo-class-panel-toggle::before { - background-image: url("chrome://devtools/skin/images/psuedo-class.svg); -} - -/* -.ruleview-overridden-rule-filter { - opacity: 0.8; -} - -.ruleview-overridden-rule-filter:hover { - opacity: 1; -} -*/ diff --git a/LCARStrek/devtools/splitters.css b/LCARStrek/devtools/splitters.css new file mode 100644 index 00000000..98b64c33 --- /dev/null +++ b/LCARStrek/devtools/splitters.css @@ -0,0 +1,77 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* This file is loaded by both browser.xul and toolbox.xul. Therefore, rules + defined here can not rely on toolbox.xul variables. */ + +/* Splitters */ + +:root { + /* Define the widths of the draggable areas on each side of a splitter. top + and bottom widths are used for horizontal splitters, inline-start and + inline-end for side splitters.*/ + + --devtools-splitter-top-width: 2px; + --devtools-splitter-bottom-width: 2px; + + /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/ + --devtools-splitter-inline-start-width: 1px; + --devtools-splitter-inline-end-width: 4px; +} + +:root[devtoolstheme="light"], +:root[devtoolstheme="dark"], +:root[devtoolstheme="firebug"] { + /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */ + --devtools-splitter-color: #9C9CFF; +} + +.devtools-horizontal-splitter, +.devtools-side-splitter { + -moz-appearance: none; + background-image: none; + border: 0; + border-style: solid; + border-color: transparent; + background-color: var(--devtools-splitter-color); + background-clip: content-box; + position: relative; + + box-sizing: border-box; + + /* Positive z-index positions the splitter on top of its siblings and makes + it clickable on both sides. */ + z-index: 1; +} + +.devtools-horizontal-splitter { + min-height: calc(var(--devtools-splitter-top-width) + + var(--devtools-splitter-bottom-width) + 1px); + + border-top-width: var(--devtools-splitter-top-width); + border-bottom-width: var(--devtools-splitter-bottom-width); + + margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); + margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); + + cursor: n-resize; +} + +.devtools-side-splitter { + min-width: calc(var(--devtools-splitter-inline-start-width) + + var(--devtools-splitter-inline-end-width) + 1px); + + border-inline-start-width: var(--devtools-splitter-inline-start-width); + border-inline-end-width: var(--devtools-splitter-inline-end-width); + + margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px); + margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width)); + + cursor: e-resize; +} + +.devtools-horizontal-splitter.disabled, +.devtools-side-splitter.disabled { + pointer-events: none; +} diff --git a/LCARStrek/devtools/splitview.css b/LCARStrek/devtools/splitview.css index 21716eb5..cd2956f3 100644 --- a/LCARStrek/devtools/splitview.css +++ b/LCARStrek/devtools/splitview.css @@ -3,6 +3,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +.theme-dark, +.theme-light { + --smw-margin: #9C9CFF; + --smw-item-top-border: #A09090; + --smw-item-bottom-border: #008484; +} + .splitview-nav-container { background-color: var(--theme-toolbar-background); color: var(--theme-body-color); @@ -24,7 +31,12 @@ padding: 0; margin: 0; margin: 0; - border-right: #9C9CFF; + border-inline-end: var(--smw-margin); +/* box-shadow: inset -1px 0 0 var(--smw-margin);*/ +} + +.splitview-nav:-moz-locale-dir(rtl) { +/* box-shadow: inset 1px 0 0 var(--smw-margin);*/ } .splitview-nav > li { @@ -38,7 +50,12 @@ /* color: white; background-clip: padding-box;*/ - border-bottom: 1px solid #008484; + border-top: 1px solid var(--smw-item-top-border); + border-bottom: 1px solid var(--smw-item-bottom-border); +} + +.splitview-nav > li:last-of-type { +/* box-shadow: inset 0 -1px 0 var(--smw-item-top-border);*/ } .placeholder { @@ -50,7 +67,7 @@ background-repeat: no-repeat; background-position: center right; background-size: auto; - border-bottom: 1px solid #008484; + border-bottom: 1px solid var(--smw-item-bottom-border); background-image: url("itemArrow-ltr.svg"); } @@ -77,12 +94,9 @@ -moz-padding-start: 3px; } -.splitview-main > toolbar:-moz-locale-dir(ltr) { - border-right: 1px solid #008484; -} - -.splitview-main > toolbar:-moz-locale-dir(rtl) { - border-left: 1px solid #008484; +.splitview-main > toolbar, +.loading .splitview-nav-container { + border-inline-end: 1px solid var(--smw-margin); } .splitview-main > .devtools-toolbarbutton { diff --git a/LCARStrek/devtools/styleeditor.css b/LCARStrek/devtools/styleeditor.css index fefa74d0..e2b13f94 100644 --- a/LCARStrek/devtools/styleeditor.css +++ b/LCARStrek/devtools/styleeditor.css @@ -78,12 +78,18 @@ window:not([windowtype]) { cursor: pointer; } +.media-responsive-mode-toggle { + color: var(--theme-highlight-blue); + text-decoration: underline; +} + .media-rule-line { -moz-padding-start: 4px; } .media-condition-unmatched { color: #8050B0; +/* opacity: 0.4;*/ } .stylesheet-enabled { diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css index db5a2c9c..14cdb64f 100644 --- a/LCARStrek/devtools/toolbars.css +++ b/LCARStrek/devtools/toolbars.css @@ -195,6 +195,8 @@ .devtools-button[checked]:empty::before, .devtools-button[open]:empty::before, +.devtools-toolbarbutton:not([label]):hover > image, +.devtools-toolbarbutton:not([label]):hover:active > image, .devtools-toolbarbutton:not([label])[checked=true] > image, .devtools-toolbarbutton:not([label])[open=true] > image { filter: url(images/filters.svg#checked-icon-state); @@ -300,7 +302,7 @@ background-repeat: no-repeat; font-size: inherit; - background-image: url("magnifying-glass.png"); + background-image: url("images/magnifying-glass.png"); } .devtools-searchinput:-moz-locale-dir(rtl), @@ -381,7 +383,7 @@ @media (min-resolution: 1.1dppx) { .devtools-searchinput { - background-image: url("magnifying-glass@2x.png"); + background-image: url("images/magnifying-glass@2x.png"); } } diff --git a/LCARStrek/devtools/webaudioeditor.css b/LCARStrek/devtools/webaudioeditor.css index 68047cfb..2e513413 100644 --- a/LCARStrek/devtools/webaudioeditor.css +++ b/LCARStrek/devtools/webaudioeditor.css @@ -138,7 +138,7 @@ g.selected text { background: none; box-shadow: none; border: none; - list-style-image: url("debugger-collapse.png"); + list-style-image: url("images/debugger-collapse.png"); -moz-image-region: rect(0px,16px,16px,0px); } @@ -148,7 +148,7 @@ g.selected text { } #inspector-pane-toggle[pane-collapsed] { - list-style-image: url("debugger-expand.png"); + list-style-image: url("images/debugger-expand.png"); } #inspector-pane-toggle:active { @@ -171,12 +171,12 @@ g.selected text { @media (min-resolution: 1.1dppx) { #inspector-pane-toggle { - list-style-image: url("debugger-collapse@2x.png"); + list-style-image: url("images/debugger-collapse@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); } #inspector-pane-toggle[pane-collapsed] { - list-style-image: url("debugger-expand@2x.png"); + list-style-image: url("images/debugger-expand@2x.png"); } #inspector-pane-toggle:active { @@ -220,12 +220,12 @@ g.selected text { background: none; box-shadow: none; border: none; - list-style-image: url("debugger-collapse.png"); + list-style-image: url("images/debugger-collapse.png"); -moz-image-region: rect(0px,16px,16px,0px); } #inspector-pane-toggle[pane-collapsed] { - list-style-image: url("debugger-expand.png"); + list-style-image: url("images/debugger-expand.png"); } #inspector-pane-toggle:active { diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css new file mode 100644 index 00000000..f085cc4c --- /dev/null +++ b/LCARStrek/devtools/webconsole.css @@ -0,0 +1,585 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Webconsole specific theme variables */ + +.theme-dark, +.theme-light, +.theme-firebug { + --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16); + --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32); +} + +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; +} + +/* 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: var(--theme-comment); + margin: 3px 6px 0 0; +} + +.message > .indent { + flex: none; +} + +.message > .icon { + flex: none; + margin: 3px 6px 0 0; + padding: 0 4px; + height: 1em; + align-self: flex-start; +} + +.message > .icon::before { + content: ""; + background-image: url("chrome://devtools/skin/images/webconsole.svg"); + background-position: 12px 12px; + background-repeat: no-repeat; + background-size: 72px 60px; + width: 12px; + height: 12px; + display: inline-block; +} + +.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 > .frame-link .frame-link-source { + width: 10em; +} + +.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; +} + +#output-wrapper { + direction: ltr; + overflow: auto; + -moz-user-select: text; +} + +/* The width on #output-container is set to a hardcoded px in webconsole.js + since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */ + +#output-container.hideTimestamps > .message { + -moz-padding-start: 0; + -moz-margin-start: 7px; + width: calc(100% - 7px); +} + +#output-container.hideTimestamps > .message > .timestamp { + display: none; +} + +#output-container.hideTimestamps > .message > .indent { + background-color: var(--theme-body-background); +} + +.filtered-by-type, +.filtered-by-string { + display: none; +} + +.hidden-message { + display: block; + visibility: hidden; + height: 0; + overflow: hidden; +} + +/* WebConsole colored drops */ + +.webconsole-filter-button { + -moz-user-focus: normal; +} + +.webconsole-filter-button > .toolbarbutton-menubutton-button:before { + content: ""; + display: inline-block; + height: 8px; + width: 8px; + border-radius: 50%; + margin-left: 5px; + border-width: 1px; + border-style: solid; +} + +/* Network styles */ +.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#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 var(--theme-body-color-alt) 6px; +} + +.message[category=network][severity=error] > .icon::before { + background-position: -12px 0; +} + +.message[category=network] > .message-body { + display: flex; + flex-wrap: wrap; +} + +.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: var(--theme-highlight-red); +} + +.message .learn-more-link { + color: var(--theme-highlight-blue); + 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; + margin-inline-start: 3px; + margin-inline-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-container { + background-color: var(--theme-tab-toolbar-background); + border-top: 1px solid var(--theme-splitter-color); +} + +.jsterm-input-node, +.jsterm-complete-node { + border: none; + padding: 0 0 0 16px; + -moz-appearance: none; + background-color: transparent; +} + +.jsterm-complete-node { + color: var(--theme-comment); +} + +.jsterm-input-node { + /* Always allow scrolling on input - it auto expands in js by setting height, + but don't want it to get bigger than the window. 24px = toolbar height. */ + max-height: calc(90vh - 24px); + background-image: var(--command-line-image); + background-repeat: no-repeat; + background-size: 16px 16px; + color: var(--theme-content-color1); +} + +@media (min-resolution: 1.1dppx) { + .jsterm-input-node { + background-image: var(--command-line-image-2x); + } +} + +:-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 var(--theme-splitter-color); + border-radius: 3px; +} + +#webconsole-sidebar > tabs { + height: 0; + border: none; +} + +.devtools-side-splitter ~ #webconsole-sidebar[hidden] { + display: none; +} + +/* Security styles */ + +.message[category=security] > .indent { + -moz-border-end: solid #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; + background: var(--theme-body-background); +} + +.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 var(--theme-splitter-color); + 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: 3px 0 0 0; + flex-shrink: 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; +} + +a.learn-more-link.webconsole-learn-more-link { + font-style: normal; +} + +/* Open DOMNode in inspector button */ +.open-inspector { + background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.elementNode:hover .open-inspector, +.open-inspector:hover { + filter: url(images/filters.svg#checked-icon-state); +} + +.open-inspector:active { + filter: url(images/filters.svg#checked-icon-state); +} + +@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; + } + */ +} + +/* + * This hardcoded width likely due to a toolkit Windows specific bug. + * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 + */ + +:root[platform="win"] .hud-filter-box { + width: 200px; +} diff --git a/LCARStrek/devtools/webconsole.svg b/LCARStrek/devtools/webconsole.svg deleted file mode 100644 index d40e1641..00000000 --- a/LCARStrek/devtools/webconsole.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css index 0647496f..beee41d1 100644 --- a/LCARStrek/devtools/widgets.css +++ b/LCARStrek/devtools/widgets.css @@ -9,6 +9,9 @@ .theme-light { --table-splitter-color: #A09090; --table-zebra-background: rgba(255,159,0,0.1); + --smw-margin: #9C9CFF; + --smw-item-top-border: #A09090; + --smw-item-bottom-border: #008484; } /* Generic pane helpers */ @@ -237,6 +240,10 @@ padding-bottom: 0; } +:root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box { + border-width: 0; +} + .breadcrumbs-widget-item:not([checked]) { background-image: -moz-element(#breadcrumb-separator-normal); background-repeat: no-repeat; @@ -354,11 +361,6 @@ /* SideMenuWidget container */ -.side-menu-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - .side-menu-widget-container:-moz-locale-dir(ltr), .side-menu-widget-empty-text:-moz-locale-dir(ltr) { } @@ -388,17 +390,22 @@ /* SideMenuWidget items */ .side-menu-widget-item { - border-top: 1px solid #9C9CFF; + border-top: 1px solid var(--smw-item-top-border); +/* border-bottom: 1px solid var(--smw-item-bottom-border);*/ +} + +.side-menu-widget-item:last-of-type { +/* box-shadow: inset 0 -1px 0 var(--smw-item-top-border);*/ + border-bottom: 1px solid var(--smw-item-top-border); +} + +.side-menu-widget-item { /* To compensate for the top and bottom borders */ margin-top: -1px; margin-bottom: -1px; background-clip: padding-box; } -.side-menu-widget-item:last-of-type { - border-bottom: 1px solid #9C9CFF; -} - .side-menu-widget-item.selected { background-color: var(--theme-selection-background); color: var(--theme-selection-color); @@ -1084,48 +1091,48 @@ table-widget-body, .table-widget-column-header, .table-widget-cell { - -moz-border-end: 1px solid var(--table-splitter-color) !important; + border-inline-end: 1px solid var(--table-splitter-color) !important; } /* Table widget column header colors are taken from netmonitor.inc.css to match - the look of both the tables. This needs to be updated along with netmonitor - header colors in bug 951714 */ + the look of both the tables. */ .table-widget-column-header { - background: rgba(0,0,0,0); position: sticky; top: 0; width: 100%; + margin: 0; padding: 5px 0 0 !important; color: inherit; text-align: center; font-weight: inherit !important; - transition: background-color 0.1s ease-in-out; + border-bottom-width: 0 !important; + border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; + background-repeat: no-repeat; } -.table-widget-column-header:hover { - background: var(--theme-hover-background); +table-widget-column-header:not([sorted]):hover { +/* background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));*/ } -.table-widget-column-header:hover:active { - background: var(--theme-active-background); +.table-widget-column-header[sorted] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; +/* box-shadow: -0.5px 0 0 0.5px var(--theme-splitter-color);*/ + background-position: right 6px center; } -.table-widget-column-header:not(:active)[sorted] { - background: var(--theme-selection-background); +.table-widget-column-header[sorted]:-moz-locale-dir(rtl) { + background-position: 6px center; } -.table-widget-column-header:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; +.table-widget-column-header[sorted=ascending] { + background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending"); } -.table-widget-column-header:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(0,0%,0%,.7), hsla(0,0%,0%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: bottom; +.table-widget-column-header[sorted=descending] { + background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending"); } /* Cells */ @@ -1133,13 +1140,13 @@ table-widget-body, .table-widget-cell { width: 100%; padding: 3px 4px; - background-clip: padding-box; min-width: 100px; -moz-user-focus: normal; + color: var(--theme-body-color); +} - margin-bottom: -1px !important; - border-bottom: 1px solid transparent; - color: var(--theme-body-color); +.table-widget-column-header + .table-widget-cell { + border-top: 1px solid var(--theme-splitter-color); } .table-widget-cell:last-child { @@ -1151,7 +1158,7 @@ table-widget-body, background: var(--table-zebra-background); } -.table-widget-cell.flash-out { +:root:not(.no-animate) .table-widget-cell.flash-out { animation: flash-out 0.5s ease-in; }