From 6f751fd100ed69c35ed979e9d0db9d0f991af80a Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sat, 19 Nov 2016 01:22:15 +0100 Subject: [PATCH] first part of syncing LCARStrek with Firefox 49/50 devtools theme changes --- LCARStrek/browser/browser.css | 16 +- LCARStrek/devtools/common.css | 142 ++--- LCARStrek/devtools/components-frame.css | 34 +- LCARStrek/devtools/dark-theme.css | 31 +- LCARStrek/devtools/debugger.css | 11 +- LCARStrek/devtools/eyedropper.css | 2 + LCARStrek/devtools/fonts.css | 5 +- LCARStrek/devtools/images/close.svg | 4 +- .../devtools/images/commandline-icon.png | Bin 200 -> 0 bytes .../devtools/images/commandline-icon.svg | 42 ++ .../devtools/images/commandline-icon@2x.png | Bin 213 -> 0 bytes LCARStrek/devtools/images/debugging-tabs.svg | 3 + LCARStrek/devtools/images/dock-bottom.svg | 4 +- LCARStrek/devtools/images/dock-side.svg | 7 +- LCARStrek/devtools/images/dock-undock.svg | 7 +- LCARStrek/devtools/images/tabs-icon.svg | 8 + LCARStrek/devtools/inspector.css | 277 ++-------- LCARStrek/devtools/jit-optimizations.css | 38 +- LCARStrek/devtools/layout.css | 6 + LCARStrek/devtools/netmonitor.css | 13 +- LCARStrek/devtools/performance.css | 22 +- LCARStrek/devtools/rules.css | 17 +- LCARStrek/devtools/storage.css | 3 +- LCARStrek/devtools/toolbars.css | 493 +++--------------- LCARStrek/devtools/toolbox.css | 355 +++++++++++++ LCARStrek/devtools/variables.css | 24 + LCARStrek/devtools/webaudioeditor.css | 2 +- LCARStrek/devtools/webconsole.css | 82 ++- LCARStrek/devtools/widgets.css | 17 +- 29 files changed, 740 insertions(+), 925 deletions(-) delete mode 100644 LCARStrek/devtools/images/commandline-icon.png create mode 100644 LCARStrek/devtools/images/commandline-icon.svg delete mode 100644 LCARStrek/devtools/images/commandline-icon@2x.png create mode 100644 LCARStrek/devtools/images/debugging-tabs.svg create mode 100644 LCARStrek/devtools/images/tabs-icon.svg create mode 100644 LCARStrek/devtools/toolbox.css diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 29431c64..657620f7 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -3918,6 +3918,8 @@ html|*.pointerlockfswarning-exit-button { --gcli-border-color: #9C9CFF; /* --theme-splitter-color */ --selection-background: #008484; /* --theme-selection-background */ --selection-color: #000000; /* --theme-selection-color */ + --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */ + --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */ } /* Developer toolbar */ @@ -4039,19 +4041,11 @@ html|*#gcli-output-frame { width: 16px; height: 16px; margin: 0 2px; - background-image: url("chrome://devtools/skin/images/commandline-icon.png"); - background-position: 0 center; - background-size: 32px 16px; + background-image: var(--command-line-image); } .gclitoolbar-input-node[focused="true"]::before { - background-position: -16px center; -} - -@media (min-resolution: 2dppx) { - .gclitoolbar-input-node::before { - background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png"); - } + background-image: var(--command-line-image-focus); } .gclitoolbar-input-node:not([focused="true"]) { @@ -4135,7 +4129,7 @@ html|*#gcli-output-frame { color: #fff; border: 1px solid #111; border-radius: 2px; - padding: 5px;*/ + padding: 0 5px;*/ width: 200px; margin: 0; } diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css index aead269a..7ed2d9e9 100644 --- a/LCARStrek/devtools/common.css +++ b/LCARStrek/devtools/common.css @@ -34,12 +34,23 @@ notification { .devtools-autocomplete-popup { border-radius: 3px; overflow-x: hidden; - max-height: 40rem; + max-height: 20rem; } .devtools-autocomplete-listbox { background-color: transparent; border-width: 0px !important; + margin: 0; +} + +.devtools-autocomplete-listbox > scrollbox { + padding: 2px; +} + +.inplace-editor-autocomplete-popup .devtools-autocomplete-listbox { + /* Inplace editor closes the autocomplete popup on blur, the autocomplete + popup should not steal the focus here.*/ + -moz-user-focus: ignore; } .devtools-autocomplete-listbox > richlistitem, @@ -108,108 +119,6 @@ notification { /* color: #666;*/ } -/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */ - -.devtools-tooltip.devtools-tooltip-tooltip { - /* If the tooltip uses a XUL element */ - padding: 4px; - background: #A09090; - border-radius: 3px; -} - -.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/alert-exclam.gif"); -} - -/* 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: #A09090; - background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF), - linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF); - background-size: 20px 20px; - background-position: 0 0, 10px 10px; -} - -.devtools-tooltip-iframe { - border: none; - background: transparent; -} - /* links to source code, like displaying `myfile.js:45` */ .devtools-source-link { @@ -240,3 +149,30 @@ notification { margin: 2px 0px; cursor: pointer; } + +/* Keyboard focus highlight styles */ + +:-moz-focusring { + outline: var(--theme-focus-outline); + outline-offset: -1px; +} + +textbox[focused="true"] { + border-color: var(--theme-focus-border-color-textbox); + +/* box-shadow: var(--theme-focus-box-shadow-textbox);*/ + transition: all 0.2s ease-in-out +} + +textbox :-moz-focusring { + box-shadow: none; + outline: none; +} + +/* Form fields should already have box-shadow hightlight */ +select:-moz-focusring, +input[type="radio"]:-moz-focusring, +input[type="checkbox"]:-moz-focusring, +checkbox:-moz-focusring { + outline: none; +} diff --git a/LCARStrek/devtools/components-frame.css b/LCARStrek/devtools/components-frame.css index badb7e3f..cbdc3d2c 100644 --- a/LCARStrek/devtools/components-frame.css +++ b/LCARStrek/devtools/components-frame.css @@ -9,32 +9,29 @@ */ .frame-link { - margin-left: 7px; display: flex; + justify-content: space-between; +} + +.frame-link-async-cause { + color: var(--theme-body-color-inactive); } .frame-link .frame-link-source { - display: flex; + flex: initial; + color: var(--theme-highlight-blue); } + .frame-link a.frame-link-source { cursor: pointer; text-decoration: none; + font-style: normal; } + .frame-link a.frame-link-source:hover { text-decoration: underline; } -.frame-link .frame-link-filename { - color: var(--theme-highlight-blue); - text-overflow: ellipsis; - overflow: hidden; - flex: 1; - text-align: right; - /* overrides styling some tools have with anchors */ - text-decoration: none; - font-style: normal; -} - .frame-link .frame-link-host { margin-inline-start: 5px; font-size: 90%; @@ -45,17 +42,12 @@ margin-inline-end: 5px; } -.frame-link .frame-link-column, -.frame-link .frame-link-line, -.frame-link .frame-link-colon { +.frame-link .frame-link-line { color: var(--theme-highlight-orange); -/* display: block;*/ } -.focused .frame-link .frame-link-filename, -.focused .frame-link .frame-link-column, +.focused .frame-link .frame-link-source, .focused .frame-link .frame-link-line, -.focused .frame-link .frame-link-host, -.focused .frame-link .frame-link-colon { +.focused .frame-link .frame-link-host { color: var(--theme-selection-color); } diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index f371e327..ad4c3ebf 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -44,8 +44,9 @@ body, html { } .theme-link, -.cm-s-mozilla .cm-link { /* original: blue */ - color: var(--theme-text-blue); +.cm-s-mozilla .cm-link, +.cm-s-mozilla .cm-keyword { + color: var(--theme-text-green); } /* @@ -83,7 +84,7 @@ body, html { .variable-or-property .token-number, .variable-or-property[return] > .title > .name, .variable-or-property[scope] > .title > .name { - color: var(--theme-highlight-green); + color: var(--theme-highlight-red); } .CodeMirror-Tern-completion-number:before { @@ -92,12 +93,11 @@ body, html { .theme-fg-color2, .cm-s-mozilla .cm-attribute, -.cm-s-mozilla .cm-variable, .cm-s-mozilla .cm-def, .cm-s-mozilla .cm-property, .cm-s-mozilla .cm-qualifier, .variables-view-variable > .title > .name { - color: var(--theme-highlight-blue); + color: var(--theme-highlight-purple); } .CodeMirror-Tern-completion-object:before { @@ -119,7 +119,7 @@ body, html { .cm-s-mozilla .cm-header, .cm-s-mozilla .cm-bracket, .variables-view-property > .title > .name { - color: var(--theme-highlight-pink); + color: var(--theme-highlight-green); } .CodeMirror-Tern-completion-array:before { @@ -130,17 +130,17 @@ body, html { color: var(--theme-highlight-purple); } -.theme-fg-color5, -.cm-s-mozilla .cm-keyword { - color: var(--theme-highlight-lightorange); +.theme-fg-color5 { + color: var(--theme-highlight-purple); } .theme-fg-color6, .cm-s-mozilla .cm-string, .cm-s-mozilla .cm-string-2, .variable-or-property .token-string, +.cm-s-mozilla .cm-variable, .CodeMirror-Tern-farg { - color: var(--theme-highlight-pink); /* -orange? */ + color: var(--theme-highlight-gray); } .CodeMirror-Tern-completion-string:before, @@ -172,7 +172,8 @@ body, html { .devtools-sidebar-alltabs, .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */ /* color: var(--theme-body-color-alt); - background-color: var(--theme-toolbar-background);*/ + background-color: var(--theme-toolbar-background); + border-color: var(--theme-splitter-color);*/ } .theme-fg-contrast { /* To be used for text on theme-bg-contrast */ @@ -381,16 +382,16 @@ div.CodeMirror span.eval-text { } .devtools-textinput, -.devtools-filterinput, -.devtools-searchinput { +.devtools-searchinput, +.devtools-filterinput { background-color: #000000; color: #E7ADE7; border: 1px solid #9C9CFF; } .devtools-textinput:focus, -.devtools-filterinput:focus, -.devtools-searchinput:focus { +.devtools-searchinput:focus, +.devtools-filterinput:focus { border-color: #008484; } diff --git a/LCARStrek/devtools/debugger.css b/LCARStrek/devtools/debugger.css index af4db2e3..968eb4fd 100644 --- a/LCARStrek/devtools/debugger.css +++ b/LCARStrek/devtools/debugger.css @@ -303,21 +303,12 @@ window { } .dbg-expression-arrow { - background-image: url("images/commandline-icon.png"); - background-position: -16px 0; - background-repeat: no-repeat; - background-size: 32px 16px; + background-image: var(--theme-command-line-image-focus); width: 16px; height: 16px; margin: 2px; } -@media (min-resolution: 1.1dppx) { - .dbg-expression-arrow { - background-image: url("images/commandline-icon@2x.png"); - } -} - .dbg-expression-input { color: inherit; } diff --git a/LCARStrek/devtools/eyedropper.css b/LCARStrek/devtools/eyedropper.css index 1e3756e6..21034aa9 100644 --- a/LCARStrek/devtools/eyedropper.css +++ b/LCARStrek/devtools/eyedropper.css @@ -29,6 +29,8 @@ } #color-value { + /* avoid the # appearing at the end for some colours in RTL locales */ + direction: ltr; padding: 0.3em; } diff --git a/LCARStrek/devtools/fonts.css b/LCARStrek/devtools/fonts.css index c781a340..a204beec 100644 --- a/LCARStrek/devtools/fonts.css +++ b/LCARStrek/devtools/fonts.css @@ -41,9 +41,9 @@ margin: 3px; padding: 0 6px; cursor: pointer; - position: fixed; + position: absolute; bottom: 0; - right: 0; + offset-inline-end: 0; } .dim > #font-container, @@ -78,7 +78,6 @@ } #font-preview-text-input { - font: inherit; margin-top: 1px; margin-bottom: 1px; padding-top: 0; diff --git a/LCARStrek/devtools/images/close.svg b/LCARStrek/devtools/images/close.svg index 24535e91..9ad8ed42 100644 --- a/LCARStrek/devtools/images/close.svg +++ b/LCARStrek/devtools/images/close.svg @@ -1,6 +1,6 @@ - - + + diff --git a/LCARStrek/devtools/images/commandline-icon.png b/LCARStrek/devtools/images/commandline-icon.png deleted file mode 100644 index 17557f0cdcb334d79eeb0bfe05814cf9b67bb5c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 200 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et#0(_4@}`~wQk(%kA+8Jz=?wuJ{?BLF_h^k2 zP>``C$S;_|;n|He5GTpo-G!lpRn`Nfyuc%}n1O*?7=#%aX3dcR3bL1Y`ns~;<&fvs zQ%Lka-T)M`@N{tu;kcfhaDZ1rR#sxhEUAVy4Ge5;tlSMef`V*pyu1p{Q>QjIc5_Dx l&S9M1q}`V3F3|xrm46~PtJ<1l@jx>eJYD@<);T3K0RS-BFQ5Pb diff --git a/LCARStrek/devtools/images/commandline-icon.svg b/LCARStrek/devtools/images/commandline-icon.svg new file mode 100644 index 00000000..cf7c7de8 --- /dev/null +++ b/LCARStrek/devtools/images/commandline-icon.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + diff --git a/LCARStrek/devtools/images/commandline-icon@2x.png b/LCARStrek/devtools/images/commandline-icon@2x.png deleted file mode 100644 index cb9e5f7be77d622c7c5d86eb177161e4a52bea57..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 213 zcmeAS@N?(olHy`uVBq!ia0vp^4nVBH#0(_wf1V}|q&Ne7LR^CxIvN5t{GZ7X*1zB) zP>``C$S;_|;n|He5GTpo-G!lpRn`Nfyuc%}n1O*?7=#%aX3dcR3bL1Y`ns~;;}8@Q zQtQmq`vMel^>lFz(Kw%+uz+8nRG^gMVia!_Zvx{rhHDH0XSX(FGe$HRwivRw7_Uu; yV!SBK)uOP0i{oV`M;k+%Sc$XYnx)->Kx1SMso$)b`l1PFAcLo?pUXO@geCx2y*Zcw diff --git a/LCARStrek/devtools/images/debugging-tabs.svg b/LCARStrek/devtools/images/debugging-tabs.svg new file mode 100644 index 00000000..4d2852fd --- /dev/null +++ b/LCARStrek/devtools/images/debugging-tabs.svg @@ -0,0 +1,3 @@ + + + diff --git a/LCARStrek/devtools/images/dock-bottom.svg b/LCARStrek/devtools/images/dock-bottom.svg index 314a0fa0..763a0a45 100644 --- a/LCARStrek/devtools/images/dock-bottom.svg +++ b/LCARStrek/devtools/images/dock-bottom.svg @@ -1,6 +1,6 @@ - - + + diff --git a/LCARStrek/devtools/images/dock-side.svg b/LCARStrek/devtools/images/dock-side.svg index 655c4237..d4f6a202 100644 --- a/LCARStrek/devtools/images/dock-side.svg +++ b/LCARStrek/devtools/images/dock-side.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/LCARStrek/devtools/images/dock-undock.svg b/LCARStrek/devtools/images/dock-undock.svg index 31d48223..a94e613a 100644 --- a/LCARStrek/devtools/images/dock-undock.svg +++ b/LCARStrek/devtools/images/dock-undock.svg @@ -1,7 +1,8 @@ - - - + + + + diff --git a/LCARStrek/devtools/images/tabs-icon.svg b/LCARStrek/devtools/images/tabs-icon.svg new file mode 100644 index 00000000..4e6c8e0c --- /dev/null +++ b/LCARStrek/devtools/images/tabs-icon.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/LCARStrek/devtools/inspector.css b/LCARStrek/devtools/inspector.css index 71f5a607..76d86813 100644 --- a/LCARStrek/devtools/inspector.css +++ b/LCARStrek/devtools/inspector.css @@ -10,272 +10,105 @@ window { padding: 0; } +:root.theme-dark { + --breadcrumbs-border-color: #9C9CFF; +} + /* 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 { +#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 { +#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; -} - #inspector-searchlabel { overflow: hidden; } +/* Make sure the text is vertically centered in Inspector's + search box. This can be removed when the search box is + switched to HTML. + See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */ +#inspector-searchbox { + line-height: 19px; +} + #inspector-breadcrumbs-toolbar { padding: 0px; border-bottom-width: 0px; border-top-width: 1px; + border-top-color: var(--breadcrumbs-border-color); + /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't + get mistaken as a splitter */ + background-color: var(--theme-body-background); + display: block; + position: relative; } -/* Expand/collapse panel toolbar button */ - -#inspector-pane-toggle { - list-style-image: var(--theme-pane-collapse-image); -} - -#inspector-pane-toggle[pane-collapsed] { - list-style-image: var(--theme-pane-expand-image); -} - -@media (max-width: 700px) { - #inspector-pane-toggle > .toolbarbutton-icon { - transform: rotate(90deg); - } -} - -/* Add element toolbar button */ - -#inspector-element-add-button { - 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; +#inspector-breadcrumbs-toolbar, +#inspector-breadcrumbs-toolbar * { + box-sizing: border-box; } -div#inspector-sidebar { +#inspector-breadcrumbs { + display: flex; + /* Break out of the XUL flexbox, so the splitter can still shrink the + markup view even if the contents of the breadcrumbs are wider than + the new width. */ position: absolute; top: 0; - bottom: 0; left: 0; + bottom: 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 { - margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ - max-width: 590px; - overflow-y: auto; -} - -.event-header { +#inspector-breadcrumbs .scrollbutton-up, +#inspector-breadcrumbs .scrollbutton-down { + flex: 0; display: flex; align-items: center; - cursor: pointer; -} - -.event-header:first-child { - border-width: 0; -} - -.event-header:not(:first-child) { - border-width: 1px 0 0 0; } -.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-inline-end: 0; - font-size: 100%; - flex-shrink: 1; -} - -.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; +#inspector-breadcrumbs .html-arrowscrollbox-inner { + flex: 1; + display: flex; 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%; -} - -.event-tooltip-content-box[open] { - display: block; +#inspector-breadcrumbs .breadcrumbs-widget-item { + white-space: nowrap; + flex-shrink: 0; + font: message-box; } -.event-tooltip-source-container { - margin-top: 5px; - margin-bottom: 10px; - margin-inline-start: 5px; - margin-inline-end: 0; +#inspector-eyedropper-toggle { + /* hidden by default, until we can check that the required highlighter exists */ + display: none; } -.event-tooltip-source { - margin-bottom: 0; +#inspector-eyedropper-toggle::before { + background-image: var(--eyedropper-image); } -.event-tooltip-attributes-container { - display: flex; - flex-shrink: 0; - flex-grow: 1; - justify-content: flex-end; +/* Add element toolbar button */ +#inspector-element-add-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + list-style-image: url("chrome://devtools/skin/images/add.svg"); + -moz-user-focus: normal; } -.event-tooltip-attributes-box { - display: flex; - flex-shrink: 0; - align-items: center; - border-radius: 3px; - padding: 2px; - margin-inline-start: 5px; - background-color: var(--theme-body-color-alt); - color: var(--theme-toolbar-background); -} +/* "no results" warning message displayed in the ruleview and in the computed view */ -.event-tooltip-attributes { - margin: 0; - font-size: 9px; - padding-top: 2px; +#ruleview-no-results, +#computedview-no-results { + color: var(--theme-body-color-inactive); + text-align: center; + margin: 5px; } diff --git a/LCARStrek/devtools/jit-optimizations.css b/LCARStrek/devtools/jit-optimizations.css index 9a5804b9..36381050 100644 --- a/LCARStrek/devtools/jit-optimizations.css +++ b/LCARStrek/devtools/jit-optimizations.css @@ -75,9 +75,12 @@ color: var(--theme-highlight-red); } -.opt-icon::before { +.theme-dark .opt-icon::before { background-image: url(chrome://devtools/skin/images/webconsole.svg); } +.theme-light .opt-icon::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} .opt-icon::before { display: inline-block; @@ -100,39 +103,6 @@ } /* Frame Component */ -.focused .frame-link-filename, -.focused .frame-link-column, -.focused .frame-link-line, -.focused .frame-link-host, -.focused .frame-link-colon { - color: var(--theme-selection-color); -} - .frame-link { margin-inline-start: 7px; } - -.frame-link-filename { - color: var(--theme-highlight-blue); - cursor: pointer; -} - -.frame-link-filename:hover { - text-decoration: underline; -} - -.frame-link-column, -.frame-link-line, -.frame-link-colon { - color: var(--theme-highlight-orange); -} - -.frame-link-host { - margin-inline-start: 5px; - font-size: 90%; - color: var(--theme-content-color2); -} - -.frame-link-function-display-name { - margin-inline-end: 5px; -} diff --git a/LCARStrek/devtools/layout.css b/LCARStrek/devtools/layout.css index 3e3f1996..16e2fd19 100644 --- a/LCARStrek/devtools/layout.css +++ b/LCARStrek/devtools/layout.css @@ -7,6 +7,12 @@ overflow: auto; } +#layout-wrapper { + /* The sidebar-panel is not focusable, this wrapper will catch click events in + all the empty area around the layout-container */ + height: 100%; +} + #layout-container { /* The view will grow bigger as the window gets resized, until 400px */ max-width: 400px; diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 43803b52..4fc5be8d 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -7,8 +7,6 @@ window { padding: 0; } -/* === BEGIN netmonitor.inc.css === */ - :root.theme-dark, :root.theme-light { --table-splitter-color: #A09090; @@ -18,7 +16,7 @@ window { --timing-dns-color: #E7ADE7; /* pink */ --timing-connect-color: #FF9F00; /* orange */ --timing-send-color: #FFCF00; /* light blue */ - --timig-wait-color: #9C9CFF; /* blue grey */ + --timing-wait-color: #9C9CFF; /* blue grey */ --timing-receive-color: #A09090; /* green */ --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending); @@ -42,6 +40,13 @@ window { list-style-image: url("images/profiler-stopwatch.svg"); } +/* Make sure the icon is visible on Linux (to overwrite a rule + in xul.css that hides the icon if there is no label. + See also bug 1278050. */ +#requests-menu-perf-notice-button .button-icon { + display: block; +} + #requests-menu-perf-notice-button .button-text { display: none; } @@ -446,7 +451,7 @@ window { list-style-image: var(--theme-pane-collapse-image); } -#details-pane-toggle[pane-collapsed] { +#details-pane-toggle.pane-collapsed { list-style-image: var(--theme-pane-expand-image); } diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css index 323c3e7e..2cb09b07 100644 --- a/LCARStrek/devtools/performance.css +++ b/LCARStrek/devtools/performance.css @@ -39,7 +39,7 @@ list-style-image: var(--filter-image); } -#performance-filter-menupopup > menuitem:before { +#performance-filter-menupopup > menuitem .menu-iconic-left::after { content: ""; display: block; width: 8px; @@ -565,52 +565,52 @@ * Marker colors */ -menuitem.marker-color-graphs-full-red:before, +menuitem.marker-color-graphs-full-red .menu-iconic-left::after, .marker-color-graphs-full-red { background-color: var(--theme-graphs-full-red); border-color: var(--theme-graphs-full-red); } -menuitem.marker-color-graphs-full-blue:before, +menuitem.marker-color-graphs-full-blue .menu-iconic-left::after, .marker-color-graphs-full-blue { background-color: var(--theme-graphs-full-blue); border-color: var(--theme-graphs-full-blue); } -menuitem.marker-color-graphs-green:before, +menuitem.marker-color-graphs-green .menu-iconic-left::after, .marker-color-graphs-green { background-color: var(--theme-graphs-green); border-color: var(--theme-graphs-green); } -menuitem.marker-color-graphs-blue:before, +menuitem.marker-color-graphs-blue .menu-iconic-left::after, .marker-color-graphs-blue { background-color: var(--theme-graphs-blue); border-color: var(--theme-graphs-blue); } -menuitem.marker-color-graphs-bluegrey:before, +menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after, .marker-color-graphs-bluegrey { background-color: var(--theme-graphs-bluegrey); border-color: var(--theme-graphs-bluegrey); } -menuitem.marker-color-graphs-purple:before, +menuitem.marker-color-graphs-purple .menu-iconic-left::after, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); border-color: var(--theme-graphs-purple); } -menuitem.marker-color-graphs-yellow:before, +menuitem.marker-color-graphs-yellow .menu-iconic-left::after, .marker-color-graphs-yellow { background-color: var(--theme-graphs-yellow); border-color: var(--theme-graphs-yellow); } -menuitem.marker-color-graphs-orange:before, +menuitem.marker-color-graphs-orange .menu-iconic-left::after, .marker-color-graphs-orange { background-color: var(--theme-graphs-orange); border-color: var(--theme-graphs-orange); } -menuitem.marker-color-graphs-red:before, +menuitem.marker-color-graphs-red .menu-iconic-left::after, .marker-color-graphs-red { background-color: var(--theme-graphs-red); border-color: var(--theme-graphs-red); } -menuitem.marker-color-graphs-grey:before, +menuitem.marker-color-graphs-grey .menu-iconic-left::after, .marker-color-graphs-grey{ background-color: var(--theme-graphs-grey); border-color: var(--theme-graphs-grey); diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css index e104d3ac..530f3cb1 100644 --- a/LCARStrek/devtools/rules.css +++ b/LCARStrek/devtools/rules.css @@ -198,8 +198,7 @@ border-left: solid 10px; } -.ruleview-rule, -#noResults { +.ruleview-rule { padding: 2px 4px; } @@ -212,6 +211,10 @@ background: var(--theme-tab-toolbar-background); } +.ruleview-rule[unmatched=true] { + opacity: 0.5; +} + .ruleview-rule[uneditable=true] :focus { outline: none; } @@ -263,11 +266,6 @@ color: #A09090; } -#noResults { -/* font: message-box;*/ - color: #A09090; -} - .ruleview-rule + .ruleview-rule { border-top-width: 1px; border-top-style: dotted; @@ -448,8 +446,9 @@ cursor: text; } -.ruleview-selector-separator, .ruleview-selector-unmatched { - color: #888; +.ruleview-selector-separator, +.ruleview-selector-unmatched { + color: var(--theme-comment); } .ruleview-selector-matched > .ruleview-selector-attribute { diff --git a/LCARStrek/devtools/storage.css b/LCARStrek/devtools/storage.css index ea4bb147..c37d1a7d 100644 --- a/LCARStrek/devtools/storage.css +++ b/LCARStrek/devtools/storage.css @@ -34,7 +34,8 @@ /* Responsive sidebar */ @media (max-width: 700px) { - #storage-tree { + #storage-tree, + #storage-sidebar { max-width: 100%; } diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css index a7dfad96..ea1816d2 100644 --- a/LCARStrek/devtools/toolbars.css +++ b/LCARStrek/devtools/toolbars.css @@ -16,29 +16,9 @@ --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); - --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg); - --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg); + --checked-icon-filter: url(images/filters.svg#checked-icon-state); --toolbar-button-border-color: #A09090; - - /* Toolbox buttons */ - --command-paintflashing-image: url(images/command-paintflashing.svg); - --command-screenshot-image: url(images/command-screenshot.svg); - --command-responsive-image: url(images/command-responsivemode.svg); - --command-scratchpad-image: url(images/command-scratchpad.svg); - --command-pick-image: url(images/command-pick.svg); - --command-frames-image: url(images/command-frames.svg); - --command-splitconsole-image: url(images/command-console.svg); - --command-noautohide-image: url(images/command-noautohide.svg); - --command-eyedropper-image: url(images/command-eyedropper.svg); - --command-rulers-image: url(images/command-rulers.svg); - --command-measure-image: url(images/command-measure.svg); -} - -#toolbox-container { - padding-top: 3px; } /* Toolbars */ @@ -63,6 +43,15 @@ .devtools-toolbar checkbox .checkbox-label-box .checkbox-label { } +.devtools-separator { + margin: 0 2px; + width: 2px; + background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; +} + /* Toolbar buttons */ .devtools-menulist, @@ -74,12 +63,6 @@ .devtools-toolbarbutton { } -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring, -.devtools-button:-moz-focusring { - outline: 1px dotted var(--theme-selection-color); -} - .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, .devtools-button::before { width: 16px; @@ -93,7 +76,7 @@ padding: 0; border: none; border-radius: 3px; - min-width: 16px; + min-width: 18px; height: 100%; margin-inline-start: 2px; background: var(--theme-toolbar-background); @@ -125,11 +108,15 @@ left: 50%; top: 50%; margin: -8px 0 0 -8px; - background-size: cover; - background-repeat: no-repeat; +/* background-size: cover; + background-repeat: no-repeat;*/ /* transition: opacity 0.05s ease-in-out;*/ } +.devtools-button:-moz-focusring { + outline: none; +} + /* Standalone buttons */ .devtools-button[standalone], .devtools-button[data-standalone], @@ -167,6 +154,7 @@ .devtools-menulist, .devtools-toolbarbutton, .devtools-button { + min-height: 18px; } /* Icon button styles */ @@ -175,14 +163,15 @@ min-width: 16px; } -#toolbox-buttons .devtools-toolbarbutton[text-as-image] { - padding-inline-start: 5px; - padding-inline-end: 5px; - min-width: inherit; +/* Set flex attribute to Toolbox buttons and Picker container so, + they don't overlapp with the tab bar */ +#toolbox-buttons { + display: flex; } -#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { - padding: 0 2px; +#toolbox-picker-container { + display: flex; + margin-inline-start: 1px; } .devtools-toolbarbutton:not([label]) > .toolbarbutton-text { @@ -237,40 +226,17 @@ .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-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); + filter: var(--checked-icon-filter); } .devtools-button[disabled]::before, @@ -351,45 +317,62 @@ /* Text input */ .devtools-textinput, -.devtools-filterinput, -.devtools-searchinput { +.devtools-searchinput, +.devtools-filterinput { /* -moz-appearance: none; margin: 1 3px; border: 1px solid; border-radius: 2px; padding: 4px 6px; - border-color: var(--theme-splitter-color);*/ + border-color: var(--theme-splitter-color); + font: message-box;*/ margin-top: 0; margin-bottom: 0; } -:root[platform="mac"] .devtools-textinput, -:root[platform="mac"] .devtools-searchinput { +:root[platform="mac"] .devtools-searchinput, +:root[platform="mac"] .devtools-textinput { /* border-radius: 20px;*/ } -.devtools-searchinput { +.devtools-searchinput, +.devtools-filterinput { /* margin-top: 1px; margin-bottom: 1px; padding: 0;*/ padding-inline-start: 22px; padding-inline-end: 4px; - background-image: var(--magnifying-glass-image); background-position: 8px center; background-size: 11px 11px; background-repeat: no-repeat; font-size: inherit; } +.devtools-searchinput { + background-image: var(--magnifying-glass-image); +} + +.devtools-filterinput { + background-image: url(--filter-image); +} + .devtools-searchinput:-moz-locale-dir(rtl), -.devtools-searchinput:dir(rtl) { +.devtools-searchinput:dir(rtl), +.devtools-filterinput:-moz-locale-dir(rtl), +.devtools-filterinput:dir(rtl) { background-position: calc(100% - 8px) center; } -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { visibility: hidden; } +.devtools-searchinput .textbox-input::-moz-placeholder, +.devtools-filterinput .textbox-input::-moz-placeholder { + font-style: normal; +} + /* Searchbox is a div container element for a search input element */ .devtools-searchbox { display: flex; @@ -402,13 +385,24 @@ .devtools-searchbox > .devtools-searchinput { } +.devtools-textinput:focus, +.devtools-searchinput:focus, +.devtools-filterinput:focus { + border-color: var(--theme-focus-border-color-textbox); +/* box-shadow: var(--theme-focus-box-shadow-textbox);*/ + transition: all 0.2s ease-in-out; + outline: none; +} + /* Don't add 'double spacing' for inputs that are at beginning / end of a toolbar (since the toolbar has it's own spacing). */ .devtools-toolbar > .devtools-textinput:first-child, -.devtools-toolbar > .devtools-searchinput:first-child { +.devtools-toolbar > .devtools-searchinput:first-child, +.devtools-toolbar > .devtools-filterinput:first-child { } .devtools-toolbar > .devtools-textinput:last-child, -.devtools-toolbar > .devtools-searchinput:last-child { +.devtools-toolbar > .devtools-searchinput:last-child, +.devtools-toolbar > .devtools-filterinput:last-child { } .devtools-toolbar > .devtools-searchbox:first-child { } @@ -432,10 +426,6 @@ border-color: var(--searcbox-no-match-border-color) !important; } -.devtools-no-search-result { - border-color: var(--theme-highlight-red) !important; -} - .devtools-searchinput-clear { position: absolute; top: 3.5px; @@ -466,53 +456,20 @@ background-position: -16px 0; } -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); -moz-image-region: rect(0, 16px, 16px, 0); } -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { -moz-image-region: rect(0, 32px, 16px, 16px); } -/* Close button */ - -.devtools-closebutton { - min-width: 16px; - width: 16px; -} - -#toolbox-close::before, -.devtools-closebutton > image { - width: 16px; - height: 16px; - -moz-appearance: none; - background-size: cover; - background-image: var(--close-button-image); - background-position: center center; - 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 */ -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - /* In-tools sidebar */ -div.devtools-sidebar-tabs { +.devtools-sidebar-tabs { height: 100%; } @@ -586,321 +543,21 @@ div.devtools-sidebar-tabs { .devtools-sidebar-tabs tabs > tab[selected]:hover:active { } -/* Toolbox - moved from toolbox.css. - * Rules that apply to the global toolbox like command buttons, - * devtools tabs, docking buttons, etc. */ - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-user-focus: normal; - min-width: 16px; - width: 16px; -} - -#toolbox-dock-buttons > toolbarbutton > image { - width: 16px; - height: 16px; - background-size: 16px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} - -#toolbox-dock-bottom::before, -#toolbox-dock-bottom > image { - background-image: var(--dock-bottom-image); -} - -#toolbox-dock-side::before, -#toolbox-dock-side > image { - background-image: var(--dock-side-image); -} - -#toolbox-dock-window::before, -#toolbox-dock-window > image { - background-image: var(--dock-undock-image); -} - -#toolbox-dock-bottom-minimize { - /* Bug 1177463 - The minimize button is currently hidden until we agree on - the UI for it, and until bug 1173849 is fixed too. */ - display: none; -} - -#toolbox-dock-bottom-minimize > image { - background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png"); -} - -#toolbox-dock-bottom-minimize.minimized > image { - background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { -} - -.devtools-separator { - margin: 0 2px; - width: 2px; -} - -#toolbox-buttons:empty + .devtools-separator, -.devtools-separator[invisible] { - visibility: hidden; -} - -#toolbox-controls-separator { - margin: 0; - width: 1px; -} - -/* Command buttons */ - -.toolbox-dock-button, -.command-button { - -moz-appearance: none; - border: none; - 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); */ -} -.command-button:hover:active, .command-button[checked=true]:not(:hover) { -/* background-color: var(--toolbar-tab-hover-active) */ -} - -#command-button-frames { - width: 32px; -} - -#toolbox-close::before, -.toolbox-dock-button::before, -.command-button::before, -.command-button > image { - width: 16px; - height: 16px; - background-size: cover; - background-position: 0 center; - background-repeat: no-repeat; -} - -/* Toolbox buttons images */ - -#command-button-paintflashing > image, -#command-button-paintflashing::before { - background-image: var(--command-paintflashing-image); -} - -#command-button-screenshot > image, -#command-button-screenshot::before { - background-image: var(--command-screenshot-image); -} - -#command-button-responsive > image, -#command-button-responsive::before { - background-image: var(--command-responsive-image); -} - -#command-button-scratchpad > image, -#command-button-scratchpad::before { - background-image: var(--command-scratchpad-image); -} - -#command-button-pick > image, -#command-button-pick::before { - background-image: var(--command-pick-image); -} - -#command-button-frames > image, -#command-button-frames::before { - background-image: var(--command-frames-image); -} - -#command-button-splitconsole > image, -#command-button-splitconsole::before { - background-image: var(--command-splitconsole-image); -} - -#command-button-noautohide > image, -#command-button-noautohide::before { - background-image: var(--command-noautohide-image); -} - -#command-button-eyedropper > image, -#command-button-eyedropper::before { - background-image: var(--command-eyedropper-image); -} - -#command-button-rulers > image, -#command-button-rulers::before { - background-image: var(--command-rulers-image); -} - -#command-button-measure > image, -#command-button-measure::before { - background-image: var(--command-measure-image); -} - -/* Tabs */ - -.devtools-tabbar { -} - -#toolbox-tabs { - padding-inline-start: 3px; - margin-inline-start: 2px; /* this is only needed for the old button design */ - margin-inline-end: 3px; /* this is for the new ::before-based button design */ - background-color: #000000; - color: #FFCF00; -} - -.toolbox-panel { - display: -moz-box; - -moz-box-flex: 1; - visibility: collapse; -} - -.toolbox-panel[selected] { - visibility: visible; -} - -.devtools-tab { - min-width: 32px; - max-width: 100px; - color: #000000; - margin: 0; - margin-inline-end: 3px; - padding: 1px; - padding-inline-start: 3px; - background-color: #C09070; - border-radius: 8px 8px 0 0; -} - -.devtools-tab > image { - margin: 0; -/* margin-inline-start: 4px; */ - max-height: 16px; - width: 16px; /* Prevents collapse during theme switching */ -} - -.devtools-tab > label { - white-space: nowrap; -/* margin: 0 4px;*/ -} - -.devtools-tab:hover > image { -} - -.devtools-tab:active > image, -.devtools-tab[selected] > image { -} - -.devtools-tab:hover, -.devtools-tab:hover:active { - background-color: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.devtools-tab[selected] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.devtools-tab > spacer { - max-width: 0; - -moz-box-flex: 0; -} - -.devtools-tab > image { - margin-inline-end: 0; - margin-inline-start: 0; -} - -#toolbox-picker-container { - margin-inline-start: 1px; -} - -#toolbox-option-container { - background-color: #000000; - padding-inline-start: 3px; - margin-inline-end: 1px; -} - -#toolbox-tab-options { - min-width: 20px; -} - -#toolbox-tab-options > image { - margin-inline-end: 3px; -} - -.devtools-tab:not([highlighted]) > .highlighted-icon, -.devtools-tab[selected] > .highlighted-icon, -.devtools-tab:not([selected])[highlighted] > .default-icon { - visibility: collapse; -} - -.devtools-tab:not([selected])[highlighted] { -} - -.devtools-tab:not([selected])[highlighted] { - color: #FFCF00; -} - -.devtools-tab:not([highlighted]) > .highlighted-icon, -.devtools-tab[selected] > .highlighted-icon, -.devtools-tab:not([selected])[highlighted] > .default-icon { - visibility: collapse; -} - -/* The options tab is special - it doesn't have the same parent - as the other tabs (toolbox-option-container vs toolbox-tabs) */ -#toolbox-option-container .devtools-tab:not([selected]) { -/* background-color: transparent;*/ -} -#toolbox-option-container .devtools-tab { -/* border-color: transparent; - border-width: 0; - padding-inline-start: 1px;*/ -} -#toolbox-tab-options > image { -/* margin: 0 8px;*/ -} - .hidden-labels-box:not(.visible) > label, .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { display: none; } -.devtools-horizontal-splitter { -/* border-bottom: 1px solid var(--theme-splitter-color); */ -} - -.devtools-side-splitter { -/* border-inline-end: 1px solid var(--theme-splitter-color); - border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */ -} - .devtools-invisible-splitter { border-color: transparent; background-color: transparent; } +.devtools-horizontal-splitter, +.devtools-side-splitter { +/* background-color: var(--theme-splitter-color);*/ +} + /* Throbbers */ .devtools-throbber::before { diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css new file mode 100644 index 00000000..448e1e9c --- /dev/null +++ b/LCARStrek/devtools/toolbox.css @@ -0,0 +1,355 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + --close-button-image: url(chrome://devtools/skin/images/close.svg); + --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg); + --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg); + --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg); + + --command-paintflashing-image: url(images/command-paintflashing.svg); + --command-screenshot-image: url(images/command-screenshot.svg); + --command-responsive-image: url(images/command-responsivemode.svg); + --command-scratchpad-image: url(images/command-scratchpad.svg); + --command-pick-image: url(images/command-pick.svg); + --command-frames-image: url(images/command-frames.svg); + --command-splitconsole-image: url(images/command-console.svg); + --command-noautohide-image: url(images/command-noautohide.svg); + --command-rulers-image: url(images/command-rulers.svg); + --command-measure-image: url(images/command-measure.svg); +} + +#toolbox-container { + padding-top: 3px; +} + +/* Toolbox tabbar */ + +.devtools-tabbar { +/* -moz-appearance: none; + min-height: 24px; + border: 0px solid; + border-bottom-width: 1px; + padding: 0; + background: var(--theme-tab-toolbar-background); + border-bottom-color: var(--theme-splitter-color);*/ +} + +#toolbox-tabs { + margin: 0; + padding-inline-start: 3px; + margin-inline-start: 2px; + background-color: #000000; + color: #FFCF00; +} + +/* Toolbox tabs */ + +.devtools-tab { +/* -moz-appearance: none; + -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); + -moz-box-align: center;*/ + min-width: 32px; +/* min-height: 24px;*/ + max-width: 100px; + margin: 0; + margin-inline-end: 3px; + padding: 1px; + padding-inline-start: 3px; + border-radius: 8px 8px 0 0; +/* border-width: 0; + border-inline-start-width: 1px;*/ + -moz-box-align: center; + -moz-user-focus: normal; + -moz-box-flex: 1; + + color: #000000; + background-color: #C09070; +} + +.theme-dark .devtools-tab:hover { + color: #ced3d9; +} + +.devtools-tab:hover, +.devtools-tab:hover:active { + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); +} + +.devtools-tab:not([selected])[highlighted] { + background-color: var(--theme-highlight-pink); +} + +.devtools-tab > image { + border: none; + margin: 0; +/* margin-inline-start: 4px; + opacity: 0.6;*/ + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +.devtools-tab > label { + white-space: nowrap; +/* margin: 0 4px;*/ +} + +.devtools-tab:hover > image { +/* opacity: 0.8;*/ +} + +.devtools-tab:active > image, +.devtools-tab[selected] > image { +/* opacity: 1;*/ +} + +.devtools-tab > spacer { + max-width: 0; + -moz-box-flex: 0; +} + +.devtools-tabbar .devtools-tab[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +#toolbox-tabs .devtools-tab[selected], +#toolbox-tabs .devtools-tab[highlighted] { +} + +#toolbox-tabs .devtools-tab[selected]:last-child, +#toolbox-tabs .devtools-tab[highlighted]:last-child { +} + +#toolbox-tabs .devtools-tab[selected] + .devtools-tab, +#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { +} + +#toolbox-tabs .devtools-tab:first-child[selected] { +} + +#toolbox-tabs .devtools-tab:last-child { +} + +.devtools-tab:not([highlighted]) > .highlighted-icon, +.devtools-tab[selected] > .highlighted-icon, +.devtools-tab:not([selected])[highlighted] > .default-icon { + visibility: collapse; +} + +/* The options tab is special - it doesn't have the same parent + as the other tabs (toolbox-option-container vs toolbox-tabs) */ +#toolbox-option-container .devtools-tab:not([selected]) { +/* background-color: transparent;*/ +} +#toolbox-option-container .devtools-tab { +/* border-color: transparent; + border-width: 0; + padding-inline-start: 1px;*/ +} +#toolbox-tab-options > image { +/* margin: 0 8px;*/ + margin-inline-end: 3px; +} +#toolbox-tab-options { + min-width: 20px; +} +#toolbox-option-container { + background-color: #000000; + padding-inline-start: 3px; + margin-inline-end: 1px; +} + +/* Toolbox controls */ + +#toolbox-controls > button, +#toolbox-dock-buttons > button { + -moz-appearance: none; + -moz-user-focus: normal; + border: none; +/* margin: 0 4px;*/ + min-width: 18px; + width: 18px; +} + +#toolbox-close::before { + background-image: var(--close-button-image); +} + +#toolbox-dock-bottom::before { + background-image: var(--dock-bottom-image); +} + +#toolbox-dock-side::before { + background-image: var(--dock-side-image); +} + +#toolbox-dock-window::before { + background-image: var(--dock-undock-image); +} + +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize::before { + background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized::before { + background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png"); +} + +.devtools-separator { + margin: 0 2px; + width: 2px; +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; +} + +/* Command buttons */ + +.command-button { + padding: 0; + margin: 0; + position: relative; + -moz-user-focus: normal; +} + +.command-button::before { +/* opacity: 0.7;*/ +} + +.command-button:hover { +/* background-color: var(--toolbar-tab-hover);*/ +} + +.command-button:hover:active, +.command-button[checked=true]:not(:hover) { +/* background-color: var(--toolbar-tab-hover-active)*/ +} + +.command-button:hover::before { +/* opacity: 0.85;*/ +} + +.command-button:hover:active::before, +.command-button[checked=true]::before, +.command-button[open=true]::before { +/* opacity: 1;*/ +} + +#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 { + filter: var(--checked-icon-filter); +} + +/* Command button images */ + +#command-button-paintflashing::before { + background-image: var(--command-paintflashing-image); +} + +#command-button-screenshot::before { + background-image: var(--command-screenshot-image); +} + +#command-button-responsive::before { + background-image: var(--command-responsive-image); +} + +#command-button-scratchpad::before { + background-image: var(--command-scratchpad-image); +} + +#command-button-pick::before { + background-image: var(--command-pick-image); +} + +#command-button-splitconsole::before { + background-image: var(--command-splitconsole-image); +} + +#command-button-noautohide::before { + background-image: var(--command-noautohide-image); +} + +#command-button-eyedropper::before { + background-image: var(--command-eyedropper-image); +} + +#command-button-rulers::before { + background-image: var(--command-rulers-image); +} + +#command-button-measure::before { + background-image: var(--command-measure-image); +} + +#command-button-frames::before { + background-image: var(--command-frames-image); +} + +#command-button-frames { + background-image: url("chrome://devtools/skin/images/dropmarker.svg"); + background-repeat: no-repeat; + background-position: right; + + /* Override background-size from the command-button. + The drop down arrow is smaller */ + background-size: 8px 4px !important; + min-width: 32px; +} + +#command-button-frames:-moz-dir(rtl) { + background-position: left; +} + +/* Toolbox panels */ + +.toolbox-panel { + display: -moz-box; + -moz-box-flex: 1; + visibility: collapse; +} + +.toolbox-panel[selected] { + visibility: visible; +} + +/** + * When panels are collapsed or hidden, making sure that they are also + * inaccessible by keyboard. This is not the case by default because the are + * predominantly hidden using visibility: collapse; style or collapsed + * attribute. + */ +.toolbox-panel *, +#toolbox-panel-webconsole[collapsed] * { + -moz-user-focus: ignore; +} + +/** + * Enrure that selected toolbox panel's contents are keyboard accessible as they + * are explicitly made not to be when hidden (default). + */ +.toolbox-panel[selected] * { + -moz-user-focus: normal; +} diff --git a/LCARStrek/devtools/variables.css b/LCARStrek/devtools/variables.css index c6f8fb04..d1c68186 100644 --- a/LCARStrek/devtools/variables.css +++ b/LCARStrek/devtools/variables.css @@ -60,6 +60,11 @@ --theme-highlight-orange: #FF9F00; --theme-highlight-red: #FF0000; --theme-highlight-pink: #E7ADE7; + --theme-highlight-gray: #A09090; + + /* For accessibility purposes we want to enhance the focus styling. This + * should improve keyboard navigation usability. */ + --theme-focus-outline-color: #008484; /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ --theme-graphs-green: #008484; @@ -75,4 +80,23 @@ /* Images */ --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg); --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg); + + /* Tooltips */ + --theme-tooltip-border: #FFCF00; + --theme-tooltip-background: #9C9CFF; + /*--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);*/ + + /* Command line */ + --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); + --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); +} + +:root { + --theme-focus-border-color-textbox: #008484; + /*--theme-textbox-box-shadow: rgba(97,181,255,.75);*/ + + /* For accessibility purposes we want to enhance the focus styling. This + * should improve keyboard navigation usability. */ + --theme-focus-outline: 1px dotted var(--theme-focus-outline-color); +/* --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);*/ } diff --git a/LCARStrek/devtools/webaudioeditor.css b/LCARStrek/devtools/webaudioeditor.css index b02fa2ae..d6cc29a0 100644 --- a/LCARStrek/devtools/webaudioeditor.css +++ b/LCARStrek/devtools/webaudioeditor.css @@ -137,7 +137,7 @@ text { height: 16px; } -#inspector-pane-toggle[pane-collapsed] { +#inspector-pane-toggle.pane-collapsed { list-style-image: var(--theme-pane-expand-image); } diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css index 5ab803e3..593cceb5 100644 --- a/LCARStrek/devtools/webconsole.css +++ b/LCARStrek/devtools/webconsole.css @@ -7,8 +7,6 @@ .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 { @@ -39,7 +37,6 @@ a { .message { display: flex; - flex: none; padding: 0 7px; width: 100%; box-sizing: border-box; @@ -76,7 +73,8 @@ a { } .message > .message-body-wrapper { - flex: 1 1 100%; + flex: auto; + min-width: 0px; margin: 3px; } @@ -104,24 +102,22 @@ a { } .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; + max-width: 40%; } -.message-location:hover, -.message-location:focus { - text-decoration: underline; +.stack-trace .frame-link-source, +.message-location .frame-link-source { + direction: rtl; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.message-location > .frame-link .frame-link-source { - width: 10em; +.stack-trace .frame-link-function-display-name { + max-width: 50%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .message-flex-body { @@ -134,13 +130,7 @@ a { } .message-flex-body > .message-body { - display: block; - flex: 1 1 auto; - vertical-align: middle; -} - -.message-flex-body > .message-location { - margin-top: 0; + flex: auto; } #output-wrapper { @@ -190,7 +180,7 @@ a { height: 8px; width: 8px; border-radius: 50%; - margin-left: 5px; + margin-inline-start: 5px; border-width: 1px; border-style: solid; } @@ -373,11 +363,18 @@ a { .jsterm-input-node, .jsterm-complete-node { border: none; - padding: 0 0 0 16px; + padding: 0; + padding-inline-start: 20px; + margin: 0; -moz-appearance: none; background-color: transparent; } +.jsterm-input-node[focused="true"] { + background-image: var(--theme-command-line-image-focus); + box-shadow: none; +} + .jsterm-complete-node { color: var(--theme-comment); } @@ -386,21 +383,20 @@ a { /* 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-image: var(--theme-command-line-image); background-repeat: no-repeat; background-size: 16px 16px; + background-position: 4px 50%; 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; + /* Set padding for console input on textbox to make sure it is inlcuded in + scrollHeight that is used when resizing JSTerminal's input. Note: textbox + default style has important already */ + padding: 4px 0 !important; } .inlined-variables-view .message-body { @@ -465,10 +461,8 @@ a { .stacktrace { display: none; - list-style: none; - padding: 0 1em 0 1.5em; + padding: 5px 10px; margin: 5px 0 0 0; - max-height: 10em; overflow-y: auto; border: 1px solid var(--theme-splitter-color); border-radius: 3px; @@ -493,16 +487,6 @@ a { 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; @@ -521,7 +505,7 @@ a.learn-more-link.webconsole-learn-more-link { .open-inspector { background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; padding-left: 16px; - margin-left: 5px; + margin-inline-start: 5px; cursor: pointer; } @@ -550,7 +534,7 @@ a.learn-more-link.webconsole-learn-more-link { .webconsole-filter-button > .toolbarbutton-menubutton-button:before { width: 12px; height: 12px; - margin-left: 1px; + margin-inline-start: 1px; } .toolbarbutton-menubutton-dropmarker { margin: 0px; diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css index 7a0e5031..dc8e6e0f 100644 --- a/LCARStrek/devtools/widgets.css +++ b/LCARStrek/devtools/widgets.css @@ -80,7 +80,7 @@ cursor: n-resize; } - .devtools-responsive-container > .devtools-sidebar-tabs:not([pane-collapsed]) { + .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) { /* When the panel is collapsed min/max height should not be applied because collapsing relies on negative margins, which implies constant height. */ min-height: 35vh; @@ -258,6 +258,15 @@ color: #000000; } +.breadcrumbs-widget-item:-moz-focusring { + outline: none; +} + +.breadcrumbs-widget-item[checked]:-moz-focusring > .button-box { + outline: var(--theme-focus-outline); + outline-offset: -1px; +} + .breadcrumbs-widget-item > .button-box { border: none; padding-top: 0; @@ -524,6 +533,12 @@ color: #000000; } +/* Custom scope stylings */ + +.variables-view-watch-expressions .title > .name { + max-width: 14em; +} + /* Generic variables traits */ .variables-view-variable:not(:last-child) { -- 2.43.0