From 1e9e1791d430ae539727c01da67e7dbbf3adfa18 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Thu, 22 Sep 2016 03:14:37 +0200 Subject: [PATCH] make both Nightly devtools and 48/49 devtools work well --- LCARStrek/devtools/animationinspector.css | 169 ++++--- LCARStrek/devtools/boxmodel.css | 258 ++++++++++ LCARStrek/devtools/canvasdebugger.css | 4 + LCARStrek/devtools/components-frame.css | 2 +- LCARStrek/devtools/dark-theme.css | 3 + .../floating-scrollbars-dark-theme.css | 2 + .../floating-scrollbars-responsive-design.css | 2 + LCARStrek/devtools/fonts.css | 3 +- LCARStrek/devtools/images/dropmarker.svg | 6 + LCARStrek/devtools/images/filter.svg | 16 + LCARStrek/devtools/images/filters.svg | 9 +- LCARStrek/devtools/images/itemToggle.svg | 7 + .../images/magnifying-glass-light.png | Bin 177 -> 0 bytes .../images/magnifying-glass-light@2x.png | Bin 217 -> 0 bytes .../devtools/images/magnifying-glass.png | Bin 177 -> 0 bytes .../devtools/images/magnifying-glass@2x.png | Bin 217 -> 0 bytes LCARStrek/devtools/images/pause.svg | 6 + LCARStrek/devtools/images/play.svg | 6 + LCARStrek/devtools/images/rewind.svg | 6 + .../devtools/images/tool-options-tbutton.svg | 2 +- LCARStrek/devtools/inspector.css | 133 +++++ LCARStrek/devtools/memory.css | 125 ++++- LCARStrek/devtools/netmonitor.css | 30 +- LCARStrek/devtools/performance.css | 24 +- LCARStrek/devtools/rules.css | 14 +- LCARStrek/devtools/styleeditor.css | 176 ++++++- LCARStrek/devtools/toolbars.css | 118 +++-- LCARStrek/devtools/tooltips.css | 456 ++++++++++++++++++ LCARStrek/devtools/variables.css | 1 + LCARStrek/global/in-content/check.svg | 2 + LCARStrek/global/in-content/common.css | 14 +- LCARStrek/global/popup.css | 4 +- 32 files changed, 1456 insertions(+), 142 deletions(-) create mode 100644 LCARStrek/devtools/boxmodel.css create mode 100644 LCARStrek/devtools/images/dropmarker.svg create mode 100644 LCARStrek/devtools/images/filter.svg create mode 100644 LCARStrek/devtools/images/itemToggle.svg delete mode 100644 LCARStrek/devtools/images/magnifying-glass-light.png delete mode 100644 LCARStrek/devtools/images/magnifying-glass-light@2x.png delete mode 100644 LCARStrek/devtools/images/magnifying-glass.png delete mode 100644 LCARStrek/devtools/images/magnifying-glass@2x.png create mode 100644 LCARStrek/devtools/images/pause.svg create mode 100644 LCARStrek/devtools/images/play.svg create mode 100644 LCARStrek/devtools/images/rewind.svg create mode 100644 LCARStrek/devtools/tooltips.css diff --git a/LCARStrek/devtools/animationinspector.css b/LCARStrek/devtools/animationinspector.css index fc423afa..ec8c97af 100644 --- a/LCARStrek/devtools/animationinspector.css +++ b/LCARStrek/devtools/animationinspector.css @@ -9,12 +9,9 @@ .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); + --pause-image: url(chrome://devtools/skin/images/pause.svg); + --rewind-image: url(chrome://devtools/skin/images/rewind.svg); + --play-image: url(chrome://devtools/skin/images/play.svg); } :root { @@ -27,8 +24,7 @@ --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 */ + /* The color of the time graduation borders */ --time-graduation-border-color: rgba(160, 144, 144, .5); } @@ -95,9 +91,15 @@ body { /* The main animations container */ +#sidebar-panel-animationinspector { + height: 100%; + width: 100%; +} + #players { height: calc(100% - var(--toolbar-height)); - overflow: auto; + overflow-x: hidden; + overflow-y: auto; } [empty] #players { @@ -149,6 +151,10 @@ body { border-width: 0 1px 0 0; } +#element-picker { + height: 18px; +} + #element-picker::before { background-image: var(--command-pick-image); } @@ -165,20 +171,6 @@ body { background-image: var(--play-image); } -@media (min-resolution: 1.1dppx) { - .pause-button::before { - background-image: var(--pause-image-2x); - } - - .pause-button.paused::before { - background-image: var(--play-image-2x); - } - - #rewind-timeline::before { - background-image: var(--rewind-image-2x); - } -} - #timeline-rate select.devtools-button { -moz-appearance: none; text-align: center; @@ -204,20 +196,7 @@ body { /* Animation timeline component */ .animation-timeline { - height: 100%; - overflow: hidden; position: relative; - /* The timeline gets its background-image from a canvas element created in - /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; - /* 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; } @@ -234,64 +213,94 @@ body { } .animation-timeline .scrubber-wrapper { - z-index: 2; - pointer-events: none; + position: absolute; + left: var(--timeline-sidebar-width); + /* Leave the width of a marker right of a track so the 100% markers can be + selected easily */ + right: var(--keyframes-marker-size); height: 100%; } .animation-timeline .scrubber { + z-index: 5; + pointer-events: none; position: absolute; - height: 100%; + /* Make the scrubber as tall as the viewport minus the toolbar height and the + header-wrapper's borders */ + height: calc(100vh - var(--toolbar-height) - 1px); + min-height: 100%; width: 0; border-right: 1px solid #FF0000; box-sizing: border-box; } -.animation-timeline .scrubber::before { - content: ""; - position: absolute; - top: 0; - width: 1px; - right: -6px; - border-top: 5px solid #FF0000; - border-left: 5px solid transparent; - 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; + right: -1.5px; cursor: col-resize; pointer-events: all; } +.animation-timeline .scrubber .scrubber-handle::before { + content: ""; + position: sticky; + top: 0; + width: 1px; + border-top: 5px solid red; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} + .animation-timeline .time-header { - min-height: var(--toolbar-height); + min-height: var(--timeline-animation-height); cursor: col-resize; -moz-user-select: none; } +.animation-timeline .time-header .header-item { + position: absolute; + height: 100%; + padding-top: 3px; + border-left: 0.5px solid var(--time-graduation-border-color); +} + +.animation-timeline .header-wrapper { + position: sticky; + top: 0; + background-color: var(--theme-body-background); + border-bottom: 1px solid var(--time-graduation-border-color); + z-index: 3; + height: var(--timeline-animation-height); + overflow: hidden; +} + +.animation-timeline .time-body { + height: 100%; +} + .animation-timeline .time-header .time-tick { + -moz-user-select: none; position: absolute; - top: 3px; + width: 0; + /* When scroll bar is shown, make it covers entire time-body */ + height: 100%; + /* When scroll bar is hidden, make it as tall as the viewport minus the + timeline animation height and the header-wrapper's borders */ + min-height: calc(100vh - var(--timeline-animation-height) - 1px); + border-left: 0.5px solid var(--time-graduation-border-color); } .animation-timeline .animations { width: 100%; height: 100%; - overflow-y: auto; - overflow-x: hidden; - /* 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); + margin-top: 0; } /* Animation block widgets */ @@ -376,7 +385,7 @@ body { align-items: center; padding: 0 2px; box-sizing: border-box; - --fast-track-icon-width: 12px; + --fast-track-icon-width: 15px; z-index: 1; } @@ -396,13 +405,23 @@ body { content: ""; display: block; position: absolute; - top: 0; + top: 1px; right: 0; height: 100%; width: var(--fast-track-icon-width); z-index: 1; +} - background-image: url("images/animation-fast-track.svg"); +.animation-timeline .all-properties .name::after { + background-color: white; + clip-path: url(images/animation-fast-track.svg#thunderbolt); + background-repeat: no-repeat; + background-position: center; +} + +.animation-timeline .some-properties .name::after { + background-color: var(--theme-content-color3); + clip-path: url(images/animation-fast-track.svg#thunderbolt); background-repeat: no-repeat; background-position: center; } @@ -518,6 +537,32 @@ body { text-overflow: ellipsis; } +.animated-properties.cssanimation { + --background-color: var(--theme-contrast-background); +} + +.animated-properties.csstransition { + --background-color: var(--theme-highlight-blue); +} + +.animated-properties.scriptanimation { + --background-color: var(--theme-graphs-green); +} + +.animation-timeline .animated-properties .oncompositor::before { + content: ""; + display: inline-block; + width: 17px; + height: 17px; + background-color: var(--background-color); + clip-path: url(images/animation-fast-track.svg#thunderbolt); + vertical-align: middle; +} + +.animation-timeline .animated-properties .warning { + text-decoration: underline dotted; +} + .animation-timeline .animated-properties .frames { /* The frames list is absolutely positioned and the left and width properties are dynamically set from javascript to match the animation's startTime and diff --git a/LCARStrek/devtools/boxmodel.css b/LCARStrek/devtools/boxmodel.css new file mode 100644 index 00000000..e38963c6 --- /dev/null +++ b/LCARStrek/devtools/boxmodel.css @@ -0,0 +1,258 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ + +#boxmodel-wrapper { + border-bottom-style: solid; + border-bottom-width: 1px; + border-color: var(--theme-splitter-color); +} + +#boxmodel-container { + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; + margin: 0px auto; + padding: 0; +} + +/* Header */ + +#boxmodel-header, +#boxmodel-info { + display: flex; + align-items: center; + padding: 4px 17px; +} + +#layout-geometry-editor { + visibility: hidden; +} + +#layout-geometry-editor::before { + background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px; +} + +/* Main: contains the box-model regions */ + +#boxmodel-main { + position: relative; + box-sizing: border-box; + /* The regions are semi-transparent, so the white background is partly + visible */ + background-color: #FF9F00; + color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 0 14px 4px 14px; + width: calc(100% - 2 * 14px); +} + +.boxmodel-margin, +.boxmodel-size { +/* color: var(--theme-highlight-blue); */ +} + +/* Regions are 3 nested elements with wide borders and outlines */ + +#boxmodel-content { + height: 18px; +} + +#boxmodel-margins, +#boxmodel-borders, +#boxmodel-padding { + border-color: var(--theme-splitter-color); + border-width: 18px; + border-style: solid; + outline: dotted 1px var(--theme-splitter-color); +} + +#boxmodel-margins { + /* This opacity applies to all of the regions, since they are nested */ + opacity: .8; +} + +/* Regions colors */ + +#boxmodel-margins { + border-color: #FFCF00; +} + +#boxmodel-borders { + border-color: #A09090; +} + +#boxmodel-padding { + border-color: #8050B0; +} + +#boxmodel-content { + background-color: #008484; +} +/* +.theme-firebug #boxmodel-main, +.theme-firebug #boxmodel-borders, +.theme-firebug #boxmodel-content { + border-style: solid; +} + +.theme-firebug #boxmodel-main, +.theme-firebug #boxmodel-header { + font-family: var(--proportional-font-family); +} + +.theme-firebug #boxmodel-main { + color: var(--theme-body-color); + font-size: var(--theme-toolbar-font-size); +} + +.theme-firebug #boxmodel-header { + font-size: var(--theme-toolbar-font-size); +} +*/ +/* Editable region sizes are contained in absolutely positioned

*/ + +#boxmodel-main > p { + position: absolute; + pointer-events: none; + margin: 0; + text-align: center; +} + +#boxmodel-main > p > span, +#boxmodel-main > p > input { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.boxmodel-top, +.boxmodel-bottom { + width: calc(100% - 2px); + text-align: center; +} + +.boxmodel-padding.boxmodel-top { + top: 37px; +} + +.boxmodel-padding.boxmodel-bottom { + bottom: 38px; +} + +.boxmodel-border.boxmodel-top { + top: 19px; +} + +.boxmodel-border.boxmodel-bottom { + bottom: 20px; +} + +.boxmodel-margin.boxmodel-top { + top: 1px; +} + +.boxmodel-margin.boxmodel-bottom { + bottom: 2px; +} + +.boxmodel-size, +.boxmodel-margin.boxmodel-left, +.boxmodel-margin.boxmodel-right, +.boxmodel-border.boxmodel-left, +.boxmodel-border.boxmodel-right, +.boxmodel-padding.boxmodel-left, +.boxmodel-padding.boxmodel-right { + top: 22px; + line-height: 80px; +} + +.boxmodel-size { + width: calc(100% - 2px); +} + +.boxmodel-margin.boxmodel-right, +.boxmodel-margin.boxmodel-left, +.boxmodel-border.boxmodel-left, +.boxmodel-border.boxmodel-right, +.boxmodel-padding.boxmodel-right, +.boxmodel-padding.boxmodel-left { + width: 21px; +} + +.boxmodel-padding.boxmodel-left { + left: 35px; +} + +.boxmodel-padding.boxmodel-right { + right: 35px; +} + +.boxmodel-border.boxmodel-left { + left: 16px; +} + +.boxmodel-border.boxmodel-right { + right: 17px; +} + +.boxmodel-margin.boxmodel-right { + right: 0; +} + +.boxmodel-margin.boxmodel-left { + left: 0; +} + +.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) { + transform: rotate(-90deg); +} + +.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) { + transform: rotate(90deg); +} + +/* Legend: displayed inside regions */ + +.boxmodel-legend { + position: absolute; + margin: 2px 6px; + z-index: 1; +} + +.boxmodel-legend[data-box="margin"] { + color: #000000; /*var(--theme-highlight-blue);*/ +} + +/* Editable fields */ + +.boxmodel-editable { + border: 1px dashed transparent; + -moz-user-select: text; +} + +.boxmodel-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 */ + +.boxmodel-size > span { + cursor: default; +} + +/* Box Model Info: contains the position and size of the element */ + +#boxmodel-element-size { + flex: 1; +} + +#boxmodel-position-group { + display: flex; + align-items: center; +} diff --git a/LCARStrek/devtools/canvasdebugger.css b/LCARStrek/devtools/canvasdebugger.css index a8163b0d..90f25d36 100644 --- a/LCARStrek/devtools/canvasdebugger.css +++ b/LCARStrek/devtools/canvasdebugger.css @@ -48,6 +48,10 @@ list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch-tbutton.svg"); } +#import-snapshot { + list-style-image: url("images/import.svg"); +} + /* Snapshots items */ .snapshot-item-thumbnail { diff --git a/LCARStrek/devtools/components-frame.css b/LCARStrek/devtools/components-frame.css index e4bc9f46..badb7e3f 100644 --- a/LCARStrek/devtools/components-frame.css +++ b/LCARStrek/devtools/components-frame.css @@ -49,7 +49,7 @@ .frame-link .frame-link-line, .frame-link .frame-link-colon { color: var(--theme-highlight-orange); - display: block; +/* display: block;*/ } .focused .frame-link .frame-link-filename, diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index 9e524a0d..c47bf8c0 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -6,6 +6,7 @@ @import url(variables.css); @import url(common.css); @import url(toolbars.css); +@import url(tooltips.css); body, html { padding: 0; @@ -380,6 +381,7 @@ div.CodeMirror span.eval-text { } .devtools-textinput, +.devtools-filterinput, .devtools-searchinput { background-color: #000000; color: #E7ADE7; @@ -387,6 +389,7 @@ div.CodeMirror span.eval-text { } .devtools-textinput:focus, +.devtools-filterinput:focus, .devtools-searchinput:focus { border-color: #008484; } diff --git a/LCARStrek/devtools/floating-scrollbars-dark-theme.css b/LCARStrek/devtools/floating-scrollbars-dark-theme.css index a5de5859..669647f6 100644 --- a/LCARStrek/devtools/floating-scrollbars-dark-theme.css +++ b/LCARStrek/devtools/floating-scrollbars-dark-theme.css @@ -39,6 +39,8 @@ xul|scrollbar:not(:hover) xul|thumb { } xul|scrollbar xul|scrollbarbutton, +xul|scrollbar xul|scrollbarbutton[sbattr="scrollbar-up-top"], +xul|scrollbar xul|scrollbarbutton[sbattr="scrollbar-down-bottom"], xul|scrollbar xul|gripper { display: none !important; /* need !important to override forced display in LCARStrek */ } diff --git a/LCARStrek/devtools/floating-scrollbars-responsive-design.css b/LCARStrek/devtools/floating-scrollbars-responsive-design.css index d9be4419..4cd47049 100644 --- a/LCARStrek/devtools/floating-scrollbars-responsive-design.css +++ b/LCARStrek/devtools/floating-scrollbars-responsive-design.css @@ -42,6 +42,8 @@ scrollbar:not(:hover) thumb { } scrollbar scrollbarbutton, +scrollbar scrollbarbutton[sbattr="scrollbar-up-top"], +scrollbar scrollbarbutton[sbattr="scrollbar-down-bottom"], scrollbar gripper { display: none !important; /* need !important to override forced display in LCARStrek */ } diff --git a/LCARStrek/devtools/fonts.css b/LCARStrek/devtools/fonts.css index 932c5e63..c781a340 100644 --- a/LCARStrek/devtools/fonts.css +++ b/LCARStrek/devtools/fonts.css @@ -37,8 +37,9 @@ border-radius: 300px; border: none; background-color: var(--fonts-button-background); - color: var(--fonts-selected-text); + color: var(--fonts-button-text); margin: 3px; + padding: 0 6px; cursor: pointer; position: fixed; bottom: 0; diff --git a/LCARStrek/devtools/images/dropmarker.svg b/LCARStrek/devtools/images/dropmarker.svg new file mode 100644 index 00000000..b175ec11 --- /dev/null +++ b/LCARStrek/devtools/images/dropmarker.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/filter.svg b/LCARStrek/devtools/images/filter.svg new file mode 100644 index 00000000..2e3ad5a3 --- /dev/null +++ b/LCARStrek/devtools/images/filter.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/LCARStrek/devtools/images/filters.svg b/LCARStrek/devtools/images/filters.svg index 384a18b6..8e76a1b4 100644 --- a/LCARStrek/devtools/images/filters.svg +++ b/LCARStrek/devtools/images/filters.svg @@ -3,13 +3,20 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - + + + + diff --git a/LCARStrek/devtools/images/itemToggle.svg b/LCARStrek/devtools/images/itemToggle.svg new file mode 100644 index 00000000..f8d4165d --- /dev/null +++ b/LCARStrek/devtools/images/itemToggle.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/devtools/images/magnifying-glass-light.png b/LCARStrek/devtools/images/magnifying-glass-light.png deleted file mode 100644 index 8d50b9df1019a760064e6e06088273d05243ef35..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-z3?wHfJxv8tYymzYt{-RB&zbZ8`kv|RKoQ20 zAirP+hi5m^K%69RcNc~ZR#^`qhqJ&VvKXje7=#%aX3dcR3bL1Y`ns~;V-;rP;8>Y+ z;xkZ4#nZ(xgyVYhhQx#w$q5zb4irfAH1t%lvHfOaJI2hz!!IEr!%(Wit~XtY*%7Fo N!PC{xWt~$(699buEH?lE diff --git a/LCARStrek/devtools/images/magnifying-glass-light@2x.png b/LCARStrek/devtools/images/magnifying-glass-light@2x.png deleted file mode 100644 index 40597744897555e7c6d628a437ac9cd96b534048..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@O3?%P=v80 z$S;_|;n|He5GTpo-G!lpRn`N@;VkfoEM{Qf76xHPhFNnYfP(BLp1!W^_gIA)IoSNJ zJpBR`^6_+W4B@z*oKSb*z=8kGjgJ5LnVaXzGCQ-{GdnX{GaqLE#@5DuhJ)u(^AX2S zW#1gW{+E{c@n1e6p^nF-;UhB;To7oJQrO0r#K~~ry~y9i2kI6B&1LX(^>bP0l+XkK DjEzCq diff --git a/LCARStrek/devtools/images/magnifying-glass.png b/LCARStrek/devtools/images/magnifying-glass.png deleted file mode 100644 index 8d50b9df1019a760064e6e06088273d05243ef35..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^+#t-z3?wHfJxv8tYymzYt{-RB&zbZ8`kv|RKoQ20 zAirP+hi5m^K%69RcNc~ZR#^`qhqJ&VvKXje7=#%aX3dcR3bL1Y`ns~;V-;rP;8>Y+ z;xkZ4#nZ(xgyVYhhQx#w$q5zb4irfAH1t%lvHfOaJI2hz!!IEr!%(Wit~XtY*%7Fo N!PC{xWt~$(699buEH?lE diff --git a/LCARStrek/devtools/images/magnifying-glass@2x.png b/LCARStrek/devtools/images/magnifying-glass@2x.png deleted file mode 100644 index 40597744897555e7c6d628a437ac9cd96b534048..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@O3?%P=v80 z$S;_|;n|He5GTpo-G!lpRn`N@;VkfoEM{Qf76xHPhFNnYfP(BLp1!W^_gIA)IoSNJ zJpBR`^6_+W4B@z*oKSb*z=8kGjgJ5LnVaXzGCQ-{GdnX{GaqLE#@5DuhJ)u(^AX2S zW#1gW{+E{c@n1e6p^nF-;UhB;To7oJQrO0r#K~~ry~y9i2kI6B&1LX(^>bP0l+XkK DjEzCq diff --git a/LCARStrek/devtools/images/pause.svg b/LCARStrek/devtools/images/pause.svg new file mode 100644 index 00000000..04b8d401 --- /dev/null +++ b/LCARStrek/devtools/images/pause.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/play.svg b/LCARStrek/devtools/images/play.svg new file mode 100644 index 00000000..ef7db366 --- /dev/null +++ b/LCARStrek/devtools/images/play.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/rewind.svg b/LCARStrek/devtools/images/rewind.svg new file mode 100644 index 00000000..a423fec5 --- /dev/null +++ b/LCARStrek/devtools/images/rewind.svg @@ -0,0 +1,6 @@ + + + + diff --git a/LCARStrek/devtools/images/tool-options-tbutton.svg b/LCARStrek/devtools/images/tool-options-tbutton.svg index c2c1c37c..b54c3cce 100644 --- a/LCARStrek/devtools/images/tool-options-tbutton.svg +++ b/LCARStrek/devtools/images/tool-options-tbutton.svg @@ -2,5 +2,5 @@ - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - + diff --git a/LCARStrek/devtools/inspector.css b/LCARStrek/devtools/inspector.css index 4be769a7..71f5a607 100644 --- a/LCARStrek/devtools/inspector.css +++ b/LCARStrek/devtools/inspector.css @@ -2,10 +2,56 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +:root { + --eyedropper-image: url(images/command-eyedropper.svg); +} + window { padding: 0; } +/* Use flex layout for the Inspector toolbar. For now, it's done + specifically for the Inspector toolbar since general rule applied + on .devtools-toolbar breaks breadcrubs and also toolbars in other + panels (e.g. webconsole, debugger), these are not ready for HTML + layout yet. */ +div#inspector-toolbar.devtools-toolbar { + display: flex; + background-size: calc(100% - 30px); + background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF); + background-repeat: no-repeat; + background-position: center center; +} + +div#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer { + flex-grow: 1; + display: inline-block; +} + +div#inspector-toolbar.devtools-toolbar::before, +div#inspector-toolbar.devtools-toolbar::after { + display: flex; + content: ""; + width: 12px; + min-height: 16px; + background-color: #FF9F00; +} + +div#inspector-toolbar.devtools-toolbar::before { + border-radius: 8px 0px 0px 8px; + border: none; + border-inline-end: 3px solid black; + margin-inline-end: 2px; +} + +div#inspector-toolbar.devtools-toolbar::after { + border-radius: 0px 8px 8px 0px; + border: none; + border-inline-start: 3px solid black; + margin-inline-start: 2px; +} + + #inspector-toolbar { border-top: none; } @@ -42,6 +88,93 @@ window { list-style-image: url("chrome://devtools/skin/images/add.svg"); } +button#inspector-element-add-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + list-style-image: url("chrome://devtools/skin/images/add.svg"); + -moz-user-focus: normal; +} + +#inspector-search { + flex: unset; +} + +/* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox + is converted to html*/ +#inspector-searchbox { + width: 100%; +} + +/* Eyedropper toolbar button */ + +#inspector-eyedropper-toggle { + /* hidden by default, until we can check that the required highlighter exists */ + display: none; +} + +#inspector-eyedropper-toggle::before { + background-image: var(--eyedropper-image); +} + +#inspector-sidebar-toggle-box { + line-height: initial; +} + +button#sidebar-toggle { + height: 100%; +} + +/* Set the minimum width for the side bar so, all tabs are + properly visible. The value can be decreased when bug 1281789 + is fixed and the all-tabs-menu is available again. */ +#inspector-sidebar-container { + overflow: hidden; + min-width: 300px; + position: relative; +} + +div#inspector-sidebar { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +/* Sidebar tabs */ + +.tabs .tabs-navigation { + height: auto !important; +} + +.tabs .tabs-menu-item { + border-radius: 8px 8px 0px 0px; + margin-top: 2px; + border: 0 !important; + border-inline-end: 2px solid transparent !important; + border-bottom: none; + padding: 2px 4px 1px; + background-color: var(--theme-button-background); + color: var(--theme-button-color); + background-clip: padding-box; + height: auto !important; +} + +.tabs .tabs-menu-item a { + color: inherit !important; + padding: 0 !important; + border: 0; +} + +.tabs .tabs-menu-item:hover { + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); +} + +.tabs .tabs-menu-item:hover:active { + background-color: var(--theme-active-background); + color: var(--theme-active-color); +} + /* Tooltip: Events */ #devtools-tooltip-events-container { diff --git a/LCARStrek/devtools/memory.css b/LCARStrek/devtools/memory.css index 0351cb09..20b41e7d 100644 --- a/LCARStrek/devtools/memory.css +++ b/LCARStrek/devtools/memory.css @@ -44,15 +44,44 @@ html, body, #app, #memory-tool { */ display: flex; align-items: center; + background-size: calc(100% - 30px); + background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF); + background-repeat: no-repeat; + background-position: center center; +} + +.devtools-toolbar::before, +.devtools-toolbar::after { + display: flex; + content: ""; + width: 12px; + min-height: 16px; + height: 100%; + background-color: #FF9F00; +} + +.devtools-toolbar::before { + border-radius: 8px 0px 0px 8px; + border: none; + border-inline-end: 3px solid black; + margin-inline-end: 2px; +} + +.devtools-toolbar::after { + border-radius: 0px 8px 8px 0px; + border: none; + border-inline-start: 3px solid black; + margin-inline-start: 2px; } .devtools-toolbar > .toolbar-group:nth-of-type(1) { /** * We want this to be exactly at a `--sidebar-width` distance from the - * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding. + * toolbar's start boundary. We want the end border to be after the sidebar, + * and the startcap has to be subtracted. */ - flex: 0 0 calc(var(--sidebar-width) - 4px); - border-inline-end: 1px solid var(--theme-splitter-color); + flex: 0 0 calc(var(--sidebar-width) - 2px - 15px); + border-inline-end: 3px solid var(--theme-toolbar-background); margin-inline-end: 5px; padding-right: 1px; } @@ -68,6 +97,7 @@ html, body, #app, #memory-tool { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + height: 100%; } .devtools-toolbar > .toolbar-group > label { @@ -78,6 +108,7 @@ html, body, #app, #memory-tool { display: flex; align-items: center; margin-inline-end: 5px; + color: var(--theme-button-color); } .devtools-toolbar > .toolbar-group > label.display-by > span { @@ -90,6 +121,8 @@ html, body, #app, #memory-tool { .devtools-toolbar > label { margin-inline-end: 5px; + flex: 1; + color: var(--theme-button-color); } #select-view { @@ -116,6 +149,7 @@ html, body, #app, #memory-tool { #pop-view-button-label { border-inline-end: 1px solid var(--theme-splitter-color); padding-inline-end: 5px; + flex: none; } /** @@ -125,10 +159,10 @@ html, body, #app, #memory-tool { #import-snapshot, #clear-snapshots { -moz-box-align: center; - flex-grow: 1; +/* flex-grow: 1; padding: 1px; margin: 2px 1px; - min-width: unset; + min-width: unset;*/ } .spacer { @@ -137,7 +171,8 @@ html, body, #app, #memory-tool { #filter { align-self: stretch; - margin: 2px; +/* margin: 2px; */ + font: inherit; } /** @@ -639,3 +674,81 @@ text { text { fill: var(--theme-body-color-alt); } + + + +/* Hide the actual checkbox */ +input[type="checkbox"] { + opacity: 0; + width: 0; + pointer-events: none; + position: absolute; +} + +/* Create a box to style as the checkbox */ +input[type="checkbox"] + span::before { + display: inline-block; + content: ""; + vertical-align: -3px; +} + +input[type="checkbox"] + span { + line-height: 0px; +} + +input[type="checkbox"] + span::before { + -moz-appearance: none; + width: 1em; + height: 1em; + border-radius: 0; + border: 1px solid var(--theme-body-color); + -moz-margin-end: 10px; + background-color: var(--theme-toolbar-background); + background-position: center center; + background-repeat: no-repeat; +} + +input[type="checkbox"]:not(:disabled) + span:hover::before { + border-color: var(--theme-hover-background); +} +input[type="checkbox"]:not(:disabled) + span:hover { + color: var(--theme-hover-background); +} +input[type="checkbox"]:checked + span::before { + background-image: url("chrome://global/skin/in-content/check.svg#check"); +} + +input[type="checkbox"]:checked:disabled + span::before { + background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); +} +input[type="checkbox"]:checked:not(:disabled) + span:hover::before { + background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); +} +input[type="checkbox"]:disabled + span::before { + border-color: var(--theme-body-color-inactive); +} +input[type="checkbox"]:disabled + span { + color: var(--theme-body-color-inactive); +} + +select { + border: 1px solid var(--theme-body-color); + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + background-image: url("chrome://global/skin/arrow/arrow-down.gif"); + background-repeat: no-repeat; + background-position: calc(100% - 2px) center; + border-radius: 3px; + padding: 1px; + margin: 1px; + font: inherit; +} +select:hover { + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); + background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif"); +} +select:hover:active { + background-color: var(--theme-active-background); + color: var(--theme-active-color); +} diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index fe378ec6..5ee2b67f 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -49,7 +49,6 @@ window { #requests-menu-reload-notice-button { min-height: 26px; margin: 0; - background-color: var(--theme-toolbar-background); } /* Network requests table */ @@ -74,8 +73,8 @@ window { .requests-menu-header-button { background-color: transparent; border-image: linear-gradient(transparent 15%, - var(--theme-splitter-color) 15%, - var(--theme-splitter-color) 85%, + var(--theme-toolbar-background) 15%, + var(--theme-toolbar-background) 85%, transparent 85%) 1 1; border-style: solid; border-width: 0; @@ -218,6 +217,24 @@ window { width: 8vw; } +.requests-menu-cause { + max-width: 8em; + width: 8vw; +} + +.requests-menu-cause-stack { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0 2px; + margin: 0; + margin-inline-end: 3px; + -moz-user-select: none; +} + .requests-menu-transferred { max-width: 8em; text-align: center; @@ -589,6 +606,8 @@ window { padding: 0 5px; margin: 2px; color: var(--theme-body-color);*/ + margin-top: 0; + margin-bottom: 0; } .requests-menu-filter-button:hover { @@ -602,13 +621,10 @@ window { /* Performance analysis buttons */ #requests-menu-network-summary-button { - background: none; box-shadow: none; border-color: transparent; - list-style-image: url("images/profiler-stopwatch.svg"); - -moz-padding-end: 0; + list-style-image: url("images/profiler-stopwatch-tbutton.svg"); cursor: pointer; - margin-inline-end: 1em; min-width: 0; } diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css index 8ac95bc6..1ead4918 100644 --- a/LCARStrek/devtools/performance.css +++ b/LCARStrek/devtools/performance.css @@ -70,8 +70,28 @@ /* Recording buttons */ -#main-record-button { - list-style-image: url(images/profiler-stopwatch.svg); +#recordings-controls { + background-color: #9C9CFF; +} + +#clear-button::before { + background-image: var(--clear-icon-url); +} + +#main-record-button::before { + background-image: url(images/profiler-stopwatch-tbutton.svg); +} + +#import-button::before { + background-image: url(images/import.svg); +} + +#main-record-button .button-icon, #import-button .button-icon { + margin: 0; +} + +#main-record-button .button-text, #import-button .button-text { + display: none; } #main-record-button .button-icon { diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css index 84a65bae..e104d3ac 100644 --- a/LCARStrek/devtools/rules.css +++ b/LCARStrek/devtools/rules.css @@ -7,7 +7,6 @@ .theme-dark, .theme-firebug { --rule-highlight-background-color: #402000; - --rule-filter-icon: url(images/magnifying-glass.png); } /* Rule View Tabpanel */ @@ -73,6 +72,17 @@ -moz-user-select: text; overflow: auto; flex: auto; + height: 100%; +} + +/* This extra wrapper only serves as a way to get the content of the view focusable. + So that when the user reaches it either via keyboard or mouse, we know that the view + is focused and therefore can handle shortcuts. + However, for accessibility reasons, tabindex is set to -1 to avoid having to tab + through it, and the outline is hidden. */ +#ruleview-container-focusable { + height: 100%; + outline: none; } #ruleview-container.non-interactive { @@ -283,7 +293,7 @@ } .ruleview-overridden-rule-filter { - background-image: var(--rule-filter-icon); + background-image: url(images/filter.svg#filterinput); background-size: 11px 11px; margin-inline-start: 5px; display: inline-block; diff --git a/LCARStrek/devtools/styleeditor.css b/LCARStrek/devtools/styleeditor.css index aabfdf6f..cb257d9d 100644 --- a/LCARStrek/devtools/styleeditor.css +++ b/LCARStrek/devtools/styleeditor.css @@ -10,9 +10,47 @@ window:not([windowtype]) { } #style-editor-chrome { + -moz-box-flex: 1; background-color: #000000; } +.splitview-nav > li, +.stylesheet-info, +.stylesheet-more, +.stylesheet-rule-count, +li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton, +li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton { + display: -moz-box; +} + +.devtools-toolbar > spacer { + -moz-box-flex: 1; +} + +.style-editor-newButton { + list-style-image: url(images/add.svg); +} + +.style-editor-importButton { + list-style-image: url(images/import.svg); +} + +.stylesheet-details-container { + -moz-box-flex: 1; +} + +.stylesheet-media-container { + overflow-y: auto; +} + +.stylesheet-error-message { + display: none; +} + +li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { + display: block; +} + .stylesheet-title, .stylesheet-name { text-decoration: none; @@ -21,6 +59,24 @@ window:not([windowtype]) { .stylesheet-name { font-size: 13px; + white-space: nowrap; +} + +.stylesheet-name > label { + display: inline; + cursor: pointer; +} + +.stylesheet-info > h1 { + -moz-box-flex: 1; +} + +.splitview-nav > li > hgroup.stylesheet-info { + -moz-box-pack: center; +} + +.stylesheet-more > spacer { + -moz-box-flex: 1; } .stylesheet-rule-count, @@ -49,6 +105,16 @@ window:not([windowtype]) { outline: 0; /* focus ring is on the stylesheet name */ } +.splitview-nav > li { + -moz-box-orient: horizontal; +} + +.splitview-nav > li > hgroup { + display: -moz-box; + -moz-box-orient: vertical; + -moz-box-flex: 1; +} + .splitview-nav > li.unsaved > hgroup .stylesheet-name { font-style: italic; } @@ -70,12 +136,14 @@ window:not([windowtype]) { } .media-rule-label { - border-bottom: 1px solid #A09090; /* Grey */ + border-bottom: 1px solid var(--theme-splitter-color); } .media-rule-label { + display: flex; padding: 4px; cursor: pointer; + border-bottom: 1px solid; } .media-responsive-mode-toggle { @@ -84,7 +152,7 @@ window:not([windowtype]) { } .media-rule-line { - -moz-padding-start: 4px; + padding-inline-start: 4px; } .media-condition-unmatched { @@ -92,26 +160,28 @@ window:not([windowtype]) { /* opacity: 0.4;*/ } +.media-rule-condition { + flex: 1; + overflow: hidden; +} + .stylesheet-enabled { + display: -moz-box; + cursor: pointer; padding: 8px 0; margin: 0 8px; - background-image: url("images/itemToggle.png"); + background-image: url("images/itemToggle.svg"); background-repeat: no-repeat; background-clip: content-box; - background-position: 0 8px; - background-size: 48px 24px; + background-position: center; + background-size: 16px; width: 24px; height: 40px; -} - -@media (min-resolution: 1.1dppx) { - .stylesheet-enabled { - background-image: url("images/itemToggle@2x.png"); - } +/* filter: var(--icon-filter);*/ } .disabled > .stylesheet-enabled { - background-position: -24px 8px; + filter: url(images/filters.svg#disabled-icon-state); } .splitview-nav > li > .stylesheet-enabled:focus, @@ -120,15 +190,29 @@ window:not([windowtype]) { } .stylesheet-linked-file:not(:empty){ - -moz-margin-end: 0.4em; + margin-inline-end: 0.4em; } .stylesheet-linked-file:not(:empty):before { - -moz-margin-start: 0.4em; + margin-inline-start: 0.4em; + content: " ↳ "; +} + +li.unsaved > hgroup > h1 > .stylesheet-name:before { + content: "*"; +} + +li.linked-file-error .stylesheet-linked-file { + text-decoration: line-through; } li.linked-file-error .stylesheet-linked-file:after { font-size: 110%; + content: " ✘"; +} + +li.linked-file-error .stylesheet-rule-count { + visibility: hidden; } .stylesheet-more > h3 { @@ -136,7 +220,8 @@ li.linked-file-error .stylesheet-linked-file:after { -moz-margin-end: 2px; } -.devtools-searchinput { +.devtools-searchinput, +.devtools-filterinput { max-width: 25ex; font-size: 11px; } @@ -162,6 +247,11 @@ h3 { /* portrait mode */ @media (max-width: 550px) { + li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count, + li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count { + display: none; + } + .splitview-nav { box-shadow: none; } @@ -182,26 +272,65 @@ h3 { .splitview-nav > li > hgroup.stylesheet-info { -moz-box-align: baseline; + -moz-box-orient: horizontal; + -moz-box-flex: 1; } .stylesheet-sidebar { width: 180px; } + + .stylesheet-more { + -moz-box-flex: 1; + -moz-box-pack: end; + } + + .stylesheet-more > spacer { + -moz-box-flex: 0; + } } .csscoverage-report { background-color: var(--theme-contrastsidebar-background); + -moz-box-orient: horizontal; } .csscoverage-report-container { height: 100vh; - padding: 10px; + padding: 0 10px; + overflow-x: hidden; + overflow-y: auto; + -moz-box-flex: 1; } .csscoverage-report-content { margin: 20px auto; -moz-column-width: 300px; font-size: 13px; + -moz-user-select: text; +} + +.csscoverage-report-summary, +.csscoverage-report-unused, +.csscoverage-report-optimize { + display: inline-block; +} + +.csscoverage-report-unused, +.csscoverage-report-optimize { + flex: 1; + min-width: 0; +} + +@media (max-width: 950px) { + .csscoverage-report-content { + display: block; + } + + .csscoverage-report-summary { + display: block; + text-align: center; + } } .csscoverage-report h1 { @@ -219,6 +348,12 @@ h3 { margin: 10px 0; } +.csscoverage-report code, +.csscoverage-report textarea { + font-family: var(--monospace-font-family); + font-size: inherit; +} + .csscoverage-list:after { content: ', '; } @@ -251,7 +386,12 @@ h3 { border-radius: 0; border-top: none; border-bottom: none; - -moz-border-start: none; + border-inline-start: none; +} + +.csscoverage-report .pie-table-chart-container { + -moz-box-orient: vertical; + text-align: start; } .chart-colored-blob[name="Used Preload"] { @@ -280,5 +420,5 @@ h3 { } .csscoverage-report-chart { - margin: 0 50px; + margin: 0 20px; } diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css index 37fd6c6a..c46b93b5 100644 --- a/LCARStrek/devtools/toolbars.css +++ b/LCARStrek/devtools/toolbars.css @@ -13,9 +13,9 @@ --searchbox-border-color: #9C9CFF; --searcbox-no-match-background-color: #400000; --searcbox-no-match-border-color: #FF0000; - --magnifying-glass-image: url(images/magnifying-glass-light.png); - --magnifying-glass-image-2x: url(images/magnifying-glass-light@2x.png); - --tool-options-image: url(images/tool-options.svg); + --magnifying-glass-image: url(images/search.svg); + --filter-image: url(images/filter.svg); + --tool-options-image: url(images/tool-options-tbutton.svg); --close-button-image: url(chrome://devtools/skin/images/close.svg); --icon-filter: invert(1); --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg); @@ -37,12 +37,17 @@ --command-measure-image: url(images/command-measure.svg); } +#toolbox-container { + padding-top: 3px; +} + /* Toolbars */ .devtools-toolbar, .devtools-sidebar-tabs tabs { } .devtools-toolbar { + border-bottom: 3px solid var(--theme-body-background); } .devtools-toolbar checkbox { @@ -86,7 +91,11 @@ .devtools-button { margin: 0; padding: 0; + border: none; + border-radius: 3px; min-width: 16px; + height: 100%; + margin-inline-start: 2px; background: var(--theme-toolbar-background); color: var(--theme-body-color); /* The icon is absolutely positioned in the button using ::before */ @@ -129,6 +138,24 @@ border: none; /* min-height: 32px; */ background-color: var(--theme-button-background); + color: var(--theme-button-color); + border-radius: 300px; +} + +.devtools-button[standalone]:hover, +.devtools-button[data-standalone]:hover, +.devtools-toolbarbutton[standalone]:hover, +.devtools-toolbarbutton[data-standalone]:hover { + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); +} + +.devtools-button[standalone]:hover:active, +.devtools-button[data-standalone]:hover:active, +.devtools-toolbarbutton[standalone]:hover:active, +.devtools-toolbarbutton[data-standalone]:hover:active { + background-color: var(--theme-active-background); + color: var(--theme-active-color); } .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { @@ -208,15 +235,49 @@ /* opacity: 0.5 !important;*/ } +.devtools-button[standalone]::before, +.devtools-button[data-standalone]::before, +.devtools-toolbarbutton[standalone]::before, +.devtools-toolbarbutton[data-standalone]::before, +.devtools-button:not([disabled]):hover::before, +.devtools-button:not([disabled]):hover:active::before, .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 { +.devtools-button[standalone] > image, +.devtools-button[data-standalone] > image, +.devtools-toolbarbutton[standalone] > image, +.devtools-toolbarbutton[data-standalone] > image, +.devtools-toolbarbutton:not([disabled]):hover > image, +.devtools-toolbarbutton:not([disabled]):hover:active > image, +.devtools-toolbarbutton[checked=true] > image, +.devtools-toolbarbutton[open=true] > image { + filter: url(images/filters.svg#checked-icon-state); +} + +#toolbox-close:hover::before, +#toolbox-close:hover:active::before, +.toolbox-dock-button:hover::before, +.toolbox-dock-button:hover:active::before, +.command-button:hover::before, +.command-button:hover:active::before, +.command-button[checked=true]::before, +.command-button[open=true]::before, +#toolbox-close:hover > image, +#toolbox-close:hover:active > image, +.toolbox-dock-button:hover > image, +.toolbox-dock-button:hover:active > image, +.command-button:hover > image, +.command-button:hover:active > image, +.command-button[checked=true] > image, +.command-button[open=true] > image { filter: url(images/filters.svg#checked-icon-state); } +.devtools-button[disabled]::before, +.devtools-toolbarbutton[disabled] > image { + filter: url(images/filters.svg#disabled-icon-state); +} + /* Icon-and-text buttons */ .devtools-toolbarbutton.icon-and-text .toolbarbutton-text { margin-inline-start: .5em !important; @@ -290,6 +351,7 @@ /* Text input */ .devtools-textinput, +.devtools-filterinput, .devtools-searchinput { /* -moz-appearance: none; margin: 1 3px; @@ -297,6 +359,8 @@ border-radius: 2px; padding: 4px 6px; border-color: var(--theme-splitter-color);*/ + margin-top: 0; + margin-bottom: 0; } :root[platform="mac"] .devtools-textinput, @@ -414,12 +478,6 @@ -moz-image-region: rect(0, 32px, 16px, 16px); } -@media (min-resolution: 1.1dppx) { - .devtools-searchinput { - background-image: var(--magnifying-glass-image-2x); - } -} - /* Close button */ .devtools-closebutton { @@ -438,6 +496,11 @@ background-repeat: no-repeat; } +button#toolbox-close { + margin-inline-start: 2px; + margin-inline-end: 10px; +} + .devtools-closebutton > .toolbarbutton-icon { /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must use evil CSS to give the impression of smaller content */ @@ -449,7 +512,8 @@ /* In-tools sidebar */ -.devtools-sidebar-tabs { +div.devtools-sidebar-tabs { + height: 100%; } .devtools-sidebar-tabs > tabpanels { @@ -601,13 +665,18 @@ .command-button { -moz-appearance: none; border: none; -/* padding: 0 8px; */ -/* margin: 0; */ - width: 16px; + margin-inline-start: 2px; + width: 20px; + height: 100%; position: relative; -moz-user-focus: normal; } +button.toolbox-dock-button, +button.command-button { + padding: 8px; +} + .command-button:hover { /* background-color: var(--toolbar-tab-hover); */ } @@ -630,21 +699,6 @@ background-repeat: no-repeat; } -#toolbox-close:hover::before, -#toolbox-close:hover:active::before, -.toolbox-dock-button:hover::before, -.toolbox-dock-button:hover:active::before, -.command-button:hover::before, -.command-button:hover:active::before, -.command-button[checked=true]::before, -.command-button[open=true]::before, -.command-button:hover > image, -.command-button:hover:active > image, -.command-button[checked=true] > image, -.command-button[open=true] > image { - filter: url(images/filters.svg#checked-icon-state); -} - /* Toolbox buttons images */ #command-button-paintflashing > image, diff --git a/LCARStrek/devtools/tooltips.css b/LCARStrek/devtools/tooltips.css new file mode 100644 index 00000000..760dd83f --- /dev/null +++ b/LCARStrek/devtools/tooltips.css @@ -0,0 +1,456 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Tooltip specific theme variables */ + +.theme-dark, +.theme-light { + --bezier-diagonal-color: #A09090; + --bezier-grid-color: rgba(0, 0, 0, 0.2); +} + +/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */ + +.devtools-tooltip .panel-arrowcontent { + padding: 4px; +} + +.devtools-tooltip .panel-arrowcontainer { + /* Reseting the transition used when panels are shown */ + transition: none; + /* Panels slide up/down/left/right when they appear using a transform. + Since we want to remove the transition, we don't need to transform anymore + plus it can interfeer by causing mouseleave events on the underlying nodes */ + transform: none; +} + +.devtools-tooltip[clamped-dimensions] { + min-height: 100px; + max-height: 400px; + min-width: 100px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions-no-min-height] { + min-height: 0; + max-height: 400px; + min-width: 100px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions-no-max-or-min-height] { + min-width: 400px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions] .panel-arrowcontent, +.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent, +.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent { + overflow: hidden; +} +.devtools-tooltip[wide] { + max-width: 600px; +} + +/* Tooltip: Simple Text */ + +.devtools-tooltip-simple-text { + max-width: 400px; + margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ + padding: 8px 12px; + white-space: pre-wrap; +} + +.devtools-tooltip-simple-text:first-child { + margin-top: -4px; +} + +.devtools-tooltip-simple-text:last-child { + margin-bottom: -4px; +} + +/* Tooltip: Alert Icon */ + +.devtools-tooltip-alert-icon { + width: 32px; + height: 32px; + margin: 6px; + margin-inline-end: 20px; +} + +.devtools-tooltip-alert-icon { + list-style-image: url("chrome://global/skin/icons/warning-32.png"); +} + +/* Tooltip: Variables View */ + +.devtools-tooltip-variables-view-box { + margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ +} + +.devtools-tooltip-variables-view-box .variable-or-property > .title { + padding-inline-end: 6px; +} + +/* Tooltip: Tiles */ + +.devtools-tooltip-tiles { + background-color: #eee; + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; +} + +.devtools-tooltip-iframe { + border: none; + background: transparent; +} + +.tooltip-container { + display: none; + position: fixed; + z-index: 9999; + display: none; + background: transparent; + pointer-events: none; + overflow: hidden; + filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow)); +} + +.tooltip-xul-wrapper { + -moz-appearance: none; + background: transparent; + overflow: visible; + border-style: none; +} + +.tooltip-xul-wrapper .tooltip-container { + position: absolute; +} + +.tooltip-top { + flex-direction: column; +} + +.tooltip-bottom { + flex-direction: column-reverse; +} + +.tooltip-panel{ + background-color: var(--theme-tooltip-background); + pointer-events: all; + flex-grow: 1; +} + +.tooltip-visible { + display: flex; +} + +.tooltip-hidden { + display: flex; + visibility: hidden; +} + +/* Tooltip : flexible height styles */ + +.tooltip-flexible-height .tooltip-panel { + /* In flexible mode the tooltip panel should only grow according to its content. */ + flex-grow: 0; +} + +.tooltip-flexible-height .tooltip-filler { + /* In flexible mode the filler should grow as much as possible. */ + flex-grow: 1; +} + +/* type="arrow" overrides: remove arrow decorations for the xul wrapper */ + +.tooltip-xul-wrapper[type="arrow"] { + margin: 0; +} + +/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */ + +/* Remove all decorations on .panel-arrowcontent is the tooltip content container. */ +.tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent { + margin: 0; + padding: 0; + background: transparent; + border: none; + box-shadow: none; +} + +/* Tooltip : arrow style */ + +.tooltip-xul-wrapper .tooltip-container { + /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */ + filter: none; +} + +.tooltip-container[type="arrow"] > .tooltip-panel { + position: relative; + min-height: 10px; + box-sizing: border-box; + width: 100%; + + border: 3px solid var(--theme-tooltip-border); + border-radius: 5px; +} + +.tooltip-top[type="arrow"] .tooltip-panel { + top: 0; +} + +.tooltip-bottom[type="arrow"] .tooltip-panel { + bottom: 0; +} + +.tooltip-arrow { + position: relative; + height: 16px; + width: 32px; + overflow: hidden; + flex-shrink: 0; +} + +/* In RTL locales, only use RTL on the tooltip content, keep LTR for positioning */ +.tooltip-container:-moz-locale-dir(rtl) { + direction: ltr; +} + +.tooltip-panel:-moz-locale-dir(rtl) { + direction: rtl; +} + +.tooltip-top .tooltip-arrow { + margin-top: -3px; +} + +.tooltip-bottom .tooltip-arrow { + margin-bottom: -3px; +} + +.tooltip-arrow:before { + content: ""; + position: absolute; + width: 21px; + height: 21px; + margin-left: 4px; + background: linear-gradient(-45deg, + var(--theme-tooltip-background) 50%, transparent 50%); + border-color: var(--theme-tooltip-border); + border-style: solid; + border-width: 0px 3px 3px 0px; + border-radius: 3px; + pointer-events: all; +} + +.tooltip-bottom .tooltip-arrow:before { + margin-top: 4px; + transform: rotate(225deg); +} + +.tooltip-top .tooltip-arrow:before { + margin-top: -12px; + transform: rotate(45deg); +} + +/* Tooltip: Events */ + +.event-header { + display: flex; + align-items: center; + cursor: pointer; + overflow: hidden; +} + +.event-header:first-child { + border-width: 0; +} + +.event-header:not(:first-child) { + border-width: 1px 0 0 0; +} + +.devtools-tooltip-events-container { + height: 100%; + overflow-y: auto; +} + +.event-tooltip-event-type, +.event-tooltip-filename, +.event-tooltip-attributes { + margin-inline-start: 0; + flex-shrink: 0; + cursor: pointer; +} + +.event-tooltip-event-type { + font-weight: bold; + font-size: 13px; +} + +.event-tooltip-filename { + margin: 0 5px; + font-size: 100%; + flex-shrink: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* Force ellipsis to be displayed on the left */ + direction: rtl; +} + +.event-tooltip-debugger-icon { + width: 16px; + height: 16px; + margin-inline-end: 4px; + opacity: 0.6; + flex-shrink: 0; +} + +.event-tooltip-debugger-icon:hover { + opacity: 1; +} + +.event-tooltip-content-box { + display: none; + height: 100px; + overflow: hidden; + margin-inline-end: 0; + border: 1px solid var(--theme-splitter-color); + border-width: 1px 0 0 0; +} + +.event-toolbox-content-box iframe { + height: 100%; + border-style: none; +} + +.event-tooltip-content-box[open] { + display: block; +} + +.event-tooltip-source-container { + margin-top: 5px; + margin-bottom: 10px; + margin-inline-start: 5px; + margin-inline-end: 0; +} + +.event-tooltip-source { + margin-bottom: 0; +} + +.event-tooltip-attributes-container { + display: flex; + flex-shrink: 0; + flex-grow: 1; + justify-content: flex-end; +} + +.event-tooltip-attributes-box { + display: flex; + flex-shrink: 0; + align-items: center; + height: 14px; + border-radius: 3px; + padding: 2px; + margin-inline-start: 5px; + background-color: var(--theme-body-color-alt); + color: var(--theme-toolbar-background); +} + +.event-tooltip-attributes { + margin: 0; + font-size: 9px; + padding-top: 2px; +} + +/* + * Tooltip: JS stack traces + */ + +.stack-trace-tooltip { + direction: ltr; + height: 100%; + overflow-y: auto; +} + +.stack-trace-tooltip > .stack-frame { + margin-left: 5px; + margin-right: 5px; +} + +.stack-trace-tooltip > .stack-frame:first-child { + margin-top: 5px; +} + +.stack-trace-tooltip > .stack-frame:last-child { + margin-bottom: 5px; +} + +.stack-frame-call { + color: var(--theme-body-color-alt); + cursor: pointer; + display: flex; +} + +.stack-frame-call:hover { + background-color: var(--theme-selection-background-semitransparent); +} + +.stack-frame-async { + color: var(--theme-body-color-inactive); +} + +.stack-frame-function-name { + color: var(--theme-highlight-blue); + max-width: 50%; + margin-inline-end: 1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.stack-frame-source-name { + flex: 1 1; + /* Makes the file name truncated (and ellipsis shown) on the left side */ + direction: rtl; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Enforce LTR direction for the file name - fixes bug 1290056 */ +.stack-frame-source-name-inner { + direction: ltr; + unicode-bidi: embed; +} + +.stack-frame-line { + color: var(--theme-highlight-orange); +} + +/* Tooltip: HTML Search */ + +#searchbox-panel-listbox { + width: 250px; + max-width: 250px; + overflow-x: hidden; +} + +#searchbox-panel-listbox .autocomplete-item, +#searchbox-panel-listbox .autocomplete-item[selected] { + overflow-x: hidden; +} + +#searchbox-panel-listbox .autocomplete-item > .initial-value { + max-width: 130px; + margin-left: 15px; +} + +#searchbox-panel-listbox .autocomplete-item > .autocomplete-value { + max-width: 150px; +} diff --git a/LCARStrek/devtools/variables.css b/LCARStrek/devtools/variables.css index 66e3a54c..c6f8fb04 100644 --- a/LCARStrek/devtools/variables.css +++ b/LCARStrek/devtools/variables.css @@ -24,6 +24,7 @@ --theme-tab-toolbar-background: #402800; --theme-toolbar-background: #000000; --theme-button-background: #C09070; + --theme-button-color: #000000; --theme-hover-background: #FFCF00; --theme-hover-color: #000000; --theme-active-background: #FFCF00; diff --git a/LCARStrek/global/in-content/check.svg b/LCARStrek/global/in-content/check.svg index b05b1d17..bbcaa5d2 100644 --- a/LCARStrek/global/in-content/check.svg +++ b/LCARStrek/global/in-content/check.svg @@ -31,4 +31,6 @@ + + diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index d5294d1c..d5d5821a 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -510,7 +510,7 @@ html|input[type="checkbox"] { } /* Create a box to style as the checkbox */ -html|input[type="checkbox"] + html|label:before { +html|input[type="checkbox"] + html|label::before { display: inline-block; content: ""; vertical-align: middle; @@ -525,7 +525,7 @@ xul|checkbox { } */ /* xul|*.checkbox-check, */ -html|input[type="checkbox"] + html|label:before { +html|input[type="checkbox"] + html|label::before { -moz-appearance: none; width: 23px; height: 23px; @@ -538,7 +538,7 @@ html|input[type="checkbox"] + html|label:before { } /* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */ -html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { +html|input[type="checkbox"]:not(:disabled) + html|label:hover::before { border-color: var(--in-content-border-focus); } html|input[type="checkbox"]:not(:disabled) + html|label:hover { @@ -551,18 +551,18 @@ xul|*.checkbox-check[checked] { linear-gradient(#fff, rgba(255,255,255,0.8)) !important; } */ -html|input[type="checkbox"]:checked + html|label:before { +html|input[type="checkbox"]:checked + html|label::before { background-image: url("chrome://global/skin/in-content/check.svg#check"); } /*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/ -html|input[type="checkbox"]:checked:disabled + html|label:before { +html|input[type="checkbox"]:checked:disabled + html|label::before { background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); } -html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { +html|input[type="checkbox"]:checked:not(:disabled) + html|label:hover::before { background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); } -html|input[type="checkbox"]:disabled + html|label:before { +html|input[type="checkbox"]:disabled + html|label::before { border-color: var(--in-content-border-disabled); } html|input[type="checkbox"]:disabled + html|label { diff --git a/LCARStrek/global/popup.css b/LCARStrek/global/popup.css index 1e5968e7..1397ee16 100644 --- a/LCARStrek/global/popup.css +++ b/LCARStrek/global/popup.css @@ -13,7 +13,7 @@ --panel-arrowcontent-padding: 6px; --panel-arrowcontent-background: #000000; --panel-arrowcontent-color: #FF9F00; - --panel-arrowcontent-border: 1px solid #FF9F00; + --panel-arrowcontent-border-color: #FF9F00; } /* ::::: menupopup ::::: */ @@ -57,7 +57,7 @@ panel[type="arrow"][side="right"] { color: var(--panel-arrowcontent-color); background: var(--panel-arrowcontent-background); background-clip: padding-box; - border: var(--panel-arrowcontent-border); + border: 1px solid var(--panel-arrowcontent-border-color); margin: 0px; } -- 2.43.0