From ec6b35d822a99b5e8ed93538398ec054713bb38b Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Fri, 27 Jan 2017 23:51:07 +0100 Subject: [PATCH] sync LCARStrek with Firefox 51 devtools theme changes --- LCARStrek/browser/browser.css | 4 + LCARStrek/devtools/common.css | 477 ++++++++++++++++++ LCARStrek/devtools/computed.css | 2 +- LCARStrek/devtools/dark-theme.css | 6 + LCARStrek/devtools/eyedropper.css | 45 -- LCARStrek/devtools/fonts.css | 8 +- .../devtools/images/filetypes/dir-close.svg | 5 +- .../devtools/images/filetypes/dir-open.svg | 6 +- LCARStrek/devtools/images/filetypes/globe.svg | 5 +- LCARStrek/devtools/images/filetypes/store.svg | 7 +- .../devtools/images/tool-profiler-active.svg | 11 +- LCARStrek/devtools/inspector.css | 15 +- LCARStrek/devtools/memory.css | 18 +- LCARStrek/devtools/netmonitor.css | 17 +- LCARStrek/devtools/performance.css | 35 +- LCARStrek/devtools/rules.css | 5 + LCARStrek/devtools/styleeditor.css | 11 +- LCARStrek/devtools/toolbars.css | 457 ----------------- LCARStrek/devtools/toolbox.css | 16 +- LCARStrek/devtools/webconsole.css | 22 +- LCARStrek/devtools/widgets.css | 11 +- 21 files changed, 609 insertions(+), 574 deletions(-) delete mode 100644 LCARStrek/devtools/eyedropper.css diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index eff25218..2212fea4 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -4101,6 +4101,10 @@ html|*#gcli-output-frame { filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state); } +.devtools-responsiveui-close > image { + filter: invert(1); +} + .devtools-responsiveui-rotate { list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png"); -moz-image-region: rect(0px,16px,16px,0px); diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css index d76eda34..9bad1677 100644 --- a/LCARStrek/devtools/common.css +++ b/LCARStrek/devtools/common.css @@ -160,6 +160,249 @@ checkbox:-moz-focusring { outline: none; } +/* Toolbar buttons */ + +.devtools-menulist, +.devtools-toolbarbutton, +.devtools-button { +} + +.devtools-menulist, +.devtools-toolbarbutton { +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, +.devtools-button::before { + width: 16px; + height: 16px; +/* transition: opacity 0.05s ease-in-out;*/ +} + +/* HTML buttons */ +.devtools-button { + margin: 0; + padding: 0; + border: none; + border-radius: 3px; + min-width: 18px; + 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 */ + position: relative; +} + +.devtools-button:not([disabled]):hover { + background: var(--theme-hover-background); + color: var(--theme-hover-color); +} + +.devtools-button:not([disabled]):hover:active { + background: var(--theme-active-background); + color: var(--theme-active-color); +} + +/* Menu type buttons and checked states */ +.devtools-button[checked], +.devtools-button.checked { + background: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.devtools-button::before { + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; +/* background-size: cover; + background-repeat: no-repeat;*/ +/* transition: opacity 0.05s ease-in-out;*/ +} + +.devtools-button:-moz-focusring { + outline: none; +} + +/* Standalone buttons */ +.devtools-button[standalone], +.devtools-button[data-standalone], +.devtools-toolbarbutton[standalone], +.devtools-toolbarbutton[data-standalone], +.menu-filter-button { + border: none; +/* min-height: 32px; */ + font: inherit; + 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, +.menu-filter-button: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, +.menu-filter-button:hover:active { + background-color: var(--theme-active-background); + color: var(--theme-active-color); +} + +.menu-filter-button.checked { + background: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.menu-filter-button + .menu-filter-button { + margin-inline-start: 2px; +} + +.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { +} + +.devtools-toolbarbutton[label][standalone] { +} + +.devtools-menulist, +.devtools-toolbarbutton, +.devtools-button { + min-height: 18px; +} + +/* Icon button styles */ +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 16px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbar .devtools-toolbarbutton { + margin-inline-start: 2px; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { +} + +/* Menu button styles (eg. web console filters) */ +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { +/* -moz-box-orient: horizontal; */ +} + +.devtools-toolbarbutton[type=menu-button] { +} + +.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +} + +.devtools-menulist > .menulist-dropmarker { +} + +.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { +} + +/* Icon-only buttons */ +.devtools-button:empty::before, +.devtools-toolbarbutton:not([label]):not([disabled]) > image { +/* opacity: 0.8;*/ +} + +.devtools-button:hover:empty::before, +.devtools-button.checked:empty::before, +.devtools-button[checked]:empty::before, +.devtools-button[open]:empty::before, +.devtools-button.checked::before, +.devtools-toolbarbutton:not([label]):hover > image, +.devtools-toolbarbutton:not([label])[checked=true] > image, +.devtools-toolbarbutton:not([label])[open=true] > image { +/* opacity: 1;*/ +} + +.devtools-button:disabled, +.devtools-button[disabled], +.devtools-toolbarbutton[disabled] { + pointer-events: none; +/* opacity: 0.5 !important;*/ +} + +.devtools-button[standalone]::before, +.devtools-button[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[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: var(--checked-icon-filter); +} + +.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; + font-weight: 600; +} + +/* Text-only buttons */ +.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.devtools-toolbarbutton[data-text-only], +.devtools-button:not(:empty), +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { +/* background-color: rgba(0, 0, 0, .2); / Splitter */ +} + +/* Text-only button states */ +.devtools-button:not(:empty):not(:disabled):hover, +#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover { +/* background: rgba(0, 0, 0, .3); / Splitters */ +} + +.devtools-button:not(:empty):not(:disabled):hover:active, +#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active { +/* background: rgba(0, 0, 0, .4); / Splitters */ +} + +.devtools-toolbarbutton:not([disabled])[label][checked=true], +.devtools-toolbarbutton:not([disabled])[label][open], +.devtools-button:not(:empty)[checked=true], +#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] { +/* background: rgba(29, 79, 115, .7); / Select highlight blue / + color: var(--theme-selection-color); */ +} + +.devtools-menulist[open=true], +.devtools-toolbarbutton[open=true], +.devtools-toolbarbutton[open=true]:hover, +.devtools-toolbarbutton[open=true]:hover:active, +.devtools-toolbarbutton[checked=true], +.devtools-toolbarbutton[checked=true]:hover, +#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { +/* background: rgba(29, 79, 115, .8); / Select highlight blue / + color: var(--theme-selection-color); */ +} :root { --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); @@ -180,3 +423,237 @@ checkbox:-moz-focusring { .devtools-option-toolbarbutton { list-style-image: var(--tool-options-image); } + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { +} + +.devtools-separator + .devtools-toolbarbutton { +} + +/* + * Filter buttons + * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands + */ + +.menu-filter-button { +/* -moz-appearance: none; + background: rgba(128,128,128,0.1); + border: none; + border-radius: 2px; + min-width: 0; + padding: 0 5px; + margin: 2px; + color: var(--theme-body-color);*/ +} + +.menu-filter-button:hover { +/* background: rgba(128,128,128,0.2);*/ +} + +.menu-filter-button:hover:active { +/* background-color: var(--theme-selection-background-semitransparent);*/ +} + +.menu-filter-button:not(:active).checked { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +/* Text input */ + +.devtools-textinput, +.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); + font: message-box;*/ + margin-top: 0; + margin-bottom: 0; +} + +:root[platform="mac"] .devtools-searchinput, +:root[platform="mac"] .devtools-textinput { +/* border-radius: 20px;*/ +} + +.devtools-searchinput, +.devtools-filterinput { +/* margin-top: 1px; + margin-bottom: 1px; + padding: 0;*/ + padding-inline-start: 22px; + padding-inline-end: 4px; + background-position: 8px center; + background-size: 11px 11px; + background-repeat: no-repeat; + font-size: inherit; +} + +/* + * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it + * once we have a standardized search and filter input across the toolboxes. + */ +.has-clear-btn > .devtools-searchinput, +.has-clear-btn > .devtools-filterinput { + padding-inline-end: 23px; +} + +.devtools-searchinput { + background-image: var(--magnifying-glass-image); +} + +.devtools-filterinput { + background-image: var(--filter-image); +} + +.devtools-searchinput:-moz-locale-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-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { + visibility: hidden; +} + +.devtools-searchinput .textbox-input::placeholder, +.devtools-filterinput .textbox-input::placeholder { + font-style: normal; +} + +.devtools-plaininput { + border-color: transparent; + background-color: transparent; + + color: var(--theme-highlight-gray); +} + +/* Searchbox is a div container element for a search input element */ +.devtools-searchbox { + display: flex; + flex: 1; + position: relative; +} + +button + .devtools-searchbox { + margin-inline-start: 2px; +} + +/* The spacing is accomplished with a padding on the searchbox */ +.devtools-searchbox > .devtools-textinput, +.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-filterinput:first-child { +} +.devtools-toolbar > .devtools-textinput:last-child, +.devtools-toolbar > .devtools-searchinput:last-child, +.devtools-toolbar > .devtools-filterinput:last-child { +} +.devtools-toolbar > .devtools-searchbox:first-child { +} +.devtools-toolbar > .devtools-searchbox:last-child { +} + +.devtools-rule-searchbox { + -moz-box-flex: 1; + width: 100%; +/* font: inherit;*/ +} + +.devtools-rule-searchbox[filled] { + background-color: var(--searchbox-background-color); + border-color: var(--searchbox-border-color); +} + +.devtools-style-searchbox-no-match { + background-color: var(--searchbox-no-match-background-color) !important; + border-color: var(--searchbox-no-match-border-color) !important; +} + +.devtools-searchinput-clear { + position: absolute; + top: 3.5px; + offset-inline-end: 7px; + padding: 0; + border: 0; + width: 16px; + height: 16px; + background-position: 0 0; + background-repeat: no-repeat; + background-color: transparent; +} + +.devtools-searchinput-clear:dir(rtl) { + right: unset; + left: 7px; +} + +.devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/images/search-clear.svg"); +} + +.devtools-style-searchbox-no-match + .devtools-searchinput-clear { + background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important; +} + +.devtools-searchinput-clear:hover { + background-position: -16px 0; +} + +.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:hover, +.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +/* Throbbers */ + +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + margin-inline-end: 0.5em; + width: 1em; + height: 1em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: 1.1s linear throbber-spin infinite; +} + +@keyframes throbber-spin { + from { + transform: none; + } + to { + transform: rotate(360deg); + } +} diff --git a/LCARStrek/devtools/computed.css b/LCARStrek/devtools/computed.css index 02fb4f8d..803349df 100644 --- a/LCARStrek/devtools/computed.css +++ b/LCARStrek/devtools/computed.css @@ -64,7 +64,7 @@ } .property-view { - padding: 2px 0 2px 17px; + padding: 2px 17px; display: flex; flex-wrap: wrap; } diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index 6753b7ac..c209a860 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -290,6 +290,12 @@ div.CodeMirror span.eval-text { visibility: hidden; } +/* Mirror the twisty for rtl direction */ +.theme-twisty:dir(rtl), +.theme-twisty:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + .theme-checkbox { display: inline-block; border: 0; diff --git a/LCARStrek/devtools/eyedropper.css b/LCARStrek/devtools/eyedropper.css deleted file mode 100644 index 21034aa9..00000000 --- a/LCARStrek/devtools/eyedropper.css +++ /dev/null @@ -1,45 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -#canvas { - image-rendering: -moz-crisp-edges; - cursor: none; - border: 3px solid #A09090; - border-radius: 50%; -} - -#canvas-overflow { - overflow: hidden; - width: 96px; - height: 96px; -} - -#color-preview { - width: 16px; - height: 16px; - border: solid 1px #9C9CFF; - margin: 3px; -} - -#color-value-box { - background-color: #000000; - border-radius: 1px; - width: 150px; -} - -#color-value { - /* avoid the # appearing at the end for some colours in RTL locales */ - direction: ltr; - padding: 0.3em; -} - -#color-value.highlight { - font-family: inherit; -} - -window { - /* inexplicably, otherwise background shows up on Linux */ - border: 1px solid transparent; - background-color: transparent; -} diff --git a/LCARStrek/devtools/fonts.css b/LCARStrek/devtools/fonts.css index 78b87a27..fa7d97bf 100644 --- a/LCARStrek/devtools/fonts.css +++ b/LCARStrek/devtools/fonts.css @@ -35,12 +35,12 @@ border: none; background-color: var(--fonts-button-background); color: var(--fonts-button-text); - margin: 3px; padding: 0 6px; cursor: pointer; - position: absolute; - bottom: 0; - offset-inline-end: 0; +} + +#font-showall:hover { +/* text-decoration: underline;*/ } .dim > #font-container, diff --git a/LCARStrek/devtools/images/filetypes/dir-close.svg b/LCARStrek/devtools/images/filetypes/dir-close.svg index 156bc38d..7a50bb87 100644 --- a/LCARStrek/devtools/images/filetypes/dir-close.svg +++ b/LCARStrek/devtools/images/filetypes/dir-close.svg @@ -1,7 +1,6 @@ - - - + + diff --git a/LCARStrek/devtools/images/filetypes/dir-open.svg b/LCARStrek/devtools/images/filetypes/dir-open.svg index 3db182ed..14c01fba 100644 --- a/LCARStrek/devtools/images/filetypes/dir-open.svg +++ b/LCARStrek/devtools/images/filetypes/dir-open.svg @@ -1,7 +1,7 @@ - - - + + + diff --git a/LCARStrek/devtools/images/filetypes/globe.svg b/LCARStrek/devtools/images/filetypes/globe.svg index 539d6912..fcc575a4 100644 --- a/LCARStrek/devtools/images/filetypes/globe.svg +++ b/LCARStrek/devtools/images/filetypes/globe.svg @@ -1,6 +1,7 @@ - - + + + diff --git a/LCARStrek/devtools/images/filetypes/store.svg b/LCARStrek/devtools/images/filetypes/store.svg index c704763a..a62d2adb 100644 --- a/LCARStrek/devtools/images/filetypes/store.svg +++ b/LCARStrek/devtools/images/filetypes/store.svg @@ -1,8 +1,7 @@ - - - - + + + diff --git a/LCARStrek/devtools/images/tool-profiler-active.svg b/LCARStrek/devtools/images/tool-profiler-active.svg index d411c289..fb049b7f 100644 --- a/LCARStrek/devtools/images/tool-profiler-active.svg +++ b/LCARStrek/devtools/images/tool-profiler-active.svg @@ -1,10 +1,9 @@ - - - - - - + + + + + diff --git a/LCARStrek/devtools/inspector.css b/LCARStrek/devtools/inspector.css index b99c2215..49d5bf11 100644 --- a/LCARStrek/devtools/inspector.css +++ b/LCARStrek/devtools/inspector.css @@ -95,6 +95,17 @@ window { #inspector-searchlabel { overflow: hidden; + margin-inline-end: 2px; +} + +#inspector-search { + flex: unset; +} + +/* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox + is converted to html*/ +#inspector-searchbox { + width: 100%; } /* Make sure the text is vertically centered in Inspector's @@ -105,10 +116,6 @@ window { line-height: 19px; } -#inspector-search { - flex: unset; -} - /* Eyedropper toolbar button */ #inspector-eyedropper-toggle { diff --git a/LCARStrek/devtools/memory.css b/LCARStrek/devtools/memory.css index e094a6ba..650b0662 100644 --- a/LCARStrek/devtools/memory.css +++ b/LCARStrek/devtools/memory.css @@ -436,6 +436,10 @@ html, body, #app, #memory-tool { padding-inline-end: 5px; } +.children-pointer:dir(rtl) { + transform: scaleX(-1); +} + /** * Heap tree view columns */ @@ -477,7 +481,8 @@ html, body, #app, #memory-tool { * These subcolumns may have specific widths or need to flex. */ display: flex; - text-align: end; + /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */ + text-align: right; border-inline-end: var(--cell-border-color) 1px solid; } @@ -527,7 +532,11 @@ html, body, #app, #memory-tool { } .heap-tree-number { - padding-inline-start: 3px; + padding: 0 3px; + flex: 1; + color: var(--theme-content-color3); + /* Make sure number doesn't appear backwards on RTL locales */ + direction: ltr; } .heap-tree-percent { @@ -540,11 +549,6 @@ html, body, #app, #memory-tool { font-family: var(--monospace-font-family); } -.heap-tree-number { - flex: 1; - color: var(--theme-content-color3); -} - .heap-tree-percent { width: 4ch; } diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 81ff32a3..ca8fdad5 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -348,6 +348,10 @@ window { margin-inline-end: 4px; } +.side-menu-widget-item.selected .requests-security-state-icon { +/* filter: brightness(1.3);*/ +} + .security-state-insecure { list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg"); } @@ -410,6 +414,10 @@ window { width: 8vw; } +.side-menu-widget-item.selected .requests-menu-transferred.theme-comment { + color: var(--theme-selection-color); +} + /* Network requests table: status codes */ .requests-menu-status-code { @@ -429,7 +437,9 @@ window { transition: background-color 0.5s ease-in-out; } +.side-menu-widget-item.selected .requests-menu-status-icon, .request-list-item.selected .requests-menu-status-icon { +/* filter: brightness(1.3);*/ } .requests-menu-status-icon:not([code]), @@ -652,17 +662,20 @@ window { /* Method Column */ +.side-menu-widget-item.selected .requests-menu-method, .request-list-item.selected .requests-menu-method { color: var(--theme-selection-color); } /* Network request details */ -#details-pane-toggle { +#details-pane-toggle:-moz-locale-dir(ltr), +#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) { list-style-image: var(--theme-pane-collapse-image); } -#details-pane-toggle.pane-collapsed { +#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr), +#details-pane-toggle:-moz-locale-dir(rtl) { list-style-image: var(--theme-pane-expand-image); } diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css index d2759987..c60aa520 100644 --- a/LCARStrek/devtools/performance.css +++ b/LCARStrek/devtools/performance.css @@ -13,6 +13,14 @@ --row-hover-background-color: #544400; } +/* + * DE-XUL: Set a sidebar width because inline XUL components will cause the flex + * to overflow if dynamically sized. + */ +.performance-tool { + --sidebar-width: 185px; +} + /** * A generic class to hide elements, replacing the `element.hidden` attribute * that we use to hide elements that can later be active @@ -85,12 +93,10 @@ background-image: var(--clear-icon-url); } -#main-record-button > image, #main-record-button::before { background-image: url(images/profiler-stopwatch-tbutton.svg); } -#import-button > image, #import-button::before { background-image: url(images/import.svg); } @@ -115,21 +121,32 @@ padding: 5px !important; } -.notice-container .record-button[checked], -.notice-container .record-button[checked] { +.notice-container .record-button.checked, +.notice-container .record-button.checked { color: var(--theme-selection-color) !important; background: var(--theme-selection-background) !important; } -.record-button[locked] { - pointer-events: none; - opacity: 0.5; -} - /* Sidebar & recording items */ #recordings-pane { border-inline-end: 1px solid var(--theme-splitter-color); + width: var(--sidebar-width); +} + +#recording-controls-mount { + width: var(--sidebar-width); +} + +#recording-controls-mount > div { + width: var(--sidebar-width); +} + +/* + * DE-XUL: The height of the toolbar is not correct without tweaking the line-height. + */ +#recordings-pane .devtools-toolbar { + line-height: 0; } #recordings-list { diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css index 863b473e..abe4739e 100644 --- a/LCARStrek/devtools/rules.css +++ b/LCARStrek/devtools/rules.css @@ -326,6 +326,11 @@ div#ruleview-toolbar-container::after { display: inline-block; } +.ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) { + /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */ + transform: none; +} + .ruleview-newproperty { /* (enable checkbox width: 12px) + (expander width: 15px) */ margin-inline-start: 27px; diff --git a/LCARStrek/devtools/styleeditor.css b/LCARStrek/devtools/styleeditor.css index bcbace32..5168985c 100644 --- a/LCARStrek/devtools/styleeditor.css +++ b/LCARStrek/devtools/styleeditor.css @@ -54,7 +54,6 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { .stylesheet-title, .stylesheet-name { text-decoration: none; - color: var(--theme-highlight-blue); } .stylesheet-name { @@ -79,6 +78,11 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { -moz-box-flex: 1; } +.stylesheet-title, +.stylesheet-name { + color: var(--theme-highlight-blue); +} + .stylesheet-rule-count, .stylesheet-linked-file, .stylesheet-saveButton { @@ -86,6 +90,9 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { } .stylesheet-saveButton { + display: none; + margin-top: 0px; + margin-bottom: 0px; text-decoration: underline; cursor: pointer; } @@ -132,7 +139,7 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { max-width: 400px; min-width: 100px; - border-color: #9C9CFF; /* Splitters */ + border-color: var(--theme-splitter-color); } .media-rule-label { diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css index 7eefeac4..cf3e8d9c 100644 --- a/LCARStrek/devtools/toolbars.css +++ b/LCARStrek/devtools/toolbars.css @@ -167,439 +167,6 @@ div.devtools-tabbar::after { margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */ } -/* Toolbar buttons */ - -.devtools-menulist, -.devtools-toolbarbutton, -.devtools-button { -} - -.devtools-menulist, -.devtools-toolbarbutton { -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, -.devtools-button::before { - width: 16px; - height: 16px; -/* transition: opacity 0.05s ease-in-out;*/ -} - -/* HTML buttons */ -.devtools-button { - margin: 0; - padding: 0; - border: none; - border-radius: 3px; - min-width: 18px; - 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 */ - position: relative; -} - -.devtools-button:not([disabled]):hover { - background: var(--theme-hover-background); - color: var(--theme-hover-color); -} - -.devtools-button:not([disabled]):hover:active { - background: var(--theme-active-background); - color: var(--theme-active-color); -} - -/* Menu type buttons and checked states */ -.devtools-button[checked], -.devtools-button.checked { - background: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.devtools-button::before { - content: ""; - display: block; - position: absolute; - left: 50%; - top: 50%; - margin: -8px 0 0 -8px; -/* background-size: cover; - background-repeat: no-repeat;*/ -/* transition: opacity 0.05s ease-in-out;*/ -} - -.devtools-button:-moz-focusring { - outline: none; -} - -/* Standalone buttons */ -.devtools-button[standalone], -.devtools-button[data-standalone], -.devtools-toolbarbutton[standalone], -.devtools-toolbarbutton[data-standalone], -.menu-filter-button { - border: none; -/* min-height: 32px; */ - font: inherit; - 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, -.menu-filter-button: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, -.menu-filter-button:hover:active { - background-color: var(--theme-active-background); - color: var(--theme-active-color); -} - -.menu-filter-button.checked { - background: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.menu-filter-button + .menu-filter-button { - margin-inline-start: 2px; -} - -.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { -} - -.devtools-toolbarbutton[label][standalone] { -} - -.devtools-menulist, -.devtools-toolbarbutton, -.devtools-button { - min-height: 18px; -} - -/* Icon button styles */ -.devtools-toolbarbutton:not([label]), -.devtools-toolbarbutton[text-as-image] { - min-width: 16px; -} - -/* Set flex attribute to Toolbox buttons and Picker container so, - they don't overlapp with the tab bar */ -#toolbox-buttons { - display: flex; -} - -#toolbox-picker-container { - display: flex; - margin-inline-start: 1px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbar .devtools-toolbarbutton { - margin-inline-start: 2px; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { -} - -/* Menu button styles (eg. web console filters) */ -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { -/* -moz-box-orient: horizontal; */ -} - -.devtools-toolbarbutton[type=menu-button] { -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { -} - -.devtools-menulist > .menulist-dropmarker { -} - -.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { -} - -/* Icon-only buttons */ -.devtools-button:empty::before, -.devtools-toolbarbutton:not([label]):not([disabled]) > image { -/* opacity: 0.8;*/ -} - -.devtools-button:hover:empty::before, -.devtools-button[checked]:empty::before, -.devtools-button[open]:empty::before, -.devtools-toolbarbutton:not([label]):hover > image, -.devtools-toolbarbutton:not([label])[checked=true] > image, -.devtools-toolbarbutton:not([label])[open=true] > image { -/* opacity: 1;*/ -} - -.devtools-button:disabled, -.devtools-button[disabled], -.devtools-toolbarbutton[disabled] { -/* opacity: 0.5 !important;*/ -} - -.devtools-button[standalone]::before, -.devtools-button[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[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: var(--checked-icon-filter); -} - -.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; - font-weight: 600; -} - -/* Text-only buttons */ -.devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.devtools-toolbarbutton[data-text-only], -#toolbox-buttons .devtools-toolbarbutton[text-as-image] { -/* background-color: rgba(0, 0, 0, .2); / Splitter */ -} - -/* Text-only button states */ -.devtools-button:not(:empty):not([disabled]):hover, -#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover { -/* background: rgba(0, 0, 0, .3); / Splitters */ -} - -.devtools-button:not(:empty):not([disabled]):hover:active, -#toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active { -/* background: rgba(0, 0, 0, .4); / Splitters */ -} - -.devtools-toolbarbutton:not([disabled])[label][checked=true], -.devtools-toolbarbutton:not([disabled])[label][open], -.devtools-button:not(:empty)[checked=true], -#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] { -/* background: rgba(29, 79, 115, .7); / Select highlight blue / - color: var(--theme-selection-color); */ -} - -.devtools-menulist[open=true], -.devtools-toolbarbutton[open=true], -.devtools-toolbarbutton[open=true]:hover, -.devtools-toolbarbutton[open=true]:hover:active, -.devtools-toolbarbutton[checked=true], -.devtools-toolbarbutton[checked=true]:hover, -#toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { -/* background: rgba(29, 79, 115, .8); / Select highlight blue / - color: var(--theme-selection-color); */ -} - -:root { - --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); -} - -.devtools-button.devtools-clear-icon::before { - background-image: var(--clear-icon-url); -} - -.devtools-toolbarbutton.devtools-clear-icon { - list-style-image: var(--clear-icon-url); -} - -.devtools-option-toolbarbutton { - list-style-image: var(--tool-options-image); -} - -.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { -} - -.devtools-toolbarbutton-group + .devtools-toolbarbutton { -} - -.devtools-separator + .devtools-toolbarbutton { -} - -/* Text input */ - -.devtools-textinput, -.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); - font: message-box;*/ - margin-top: 0; - margin-bottom: 0; -} - -:root[platform="mac"] .devtools-searchinput, -:root[platform="mac"] .devtools-textinput { -/* border-radius: 20px;*/ -} - -.devtools-searchinput, -.devtools-filterinput { -/* margin-top: 1px; - margin-bottom: 1px; - padding: 0;*/ - padding-inline-start: 22px; - padding-inline-end: 4px; - 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: var(--filter-image); -} - -.devtools-searchinput:-moz-locale-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-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { - visibility: hidden; -} - -.devtools-searchinput .textbox-input::placeholder, -.devtools-filterinput .textbox-input::placeholder { - font-style: normal; -} - -/* Searchbox is a div container element for a search input element */ -.devtools-searchbox { - display: flex; - flex: 1; - position: relative; -} - -button + .devtools-searchbox { - margin-inline-start: 2px; -} - -/* The spacing is accomplished with a padding on the searchbox */ -.devtools-searchbox > .devtools-textinput, -.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-filterinput:first-child { -} -.devtools-toolbar > .devtools-textinput:last-child, -.devtools-toolbar > .devtools-searchinput:last-child, -.devtools-toolbar > .devtools-filterinput:last-child { -} -.devtools-toolbar > .devtools-searchbox:first-child { -} -.devtools-toolbar > .devtools-searchbox:last-child { -} - -.devtools-rule-searchbox { - -moz-box-flex: 1; - width: 100%; -/* font: inherit;*/ -} - -.devtools-rule-searchbox[filled] { - background-color: var(--searchbox-background-color); - border-color: var(--searchbox-border-color); - padding-inline-end: 23px; -} - -.devtools-style-searchbox-no-match { - background-color: var(--searchbox-no-match-background-color) !important; - border-color: var(--searchbox-no-match-border-color) !important; -} - -.devtools-searchinput-clear { - position: absolute; - top: 3.5px; - right: 7px; - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position: 0 0; - background-repeat: no-repeat; - background-color: transparent; -} - -.devtools-searchinput-clear:dir(rtl) { - right: unset; - left: 7px; -} - -.devtools-searchinput-clear { - background-image: url("chrome://devtools/skin/images/search-clear.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.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:hover, -.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - /* In-tools sidebar */ .devtools-sidebar-tabs { @@ -714,27 +281,3 @@ button + .devtools-searchbox { border: 0 !important; border-bottom: 3px solid var(--theme-body-background) !important; } - -/* Throbbers */ - -.devtools-throbber::before { - content: ""; - display: inline-block; - vertical-align: bottom; - margin-inline-end: 0.5em; - width: 1em; - height: 1em; - border: 2px solid currentColor; - border-right-color: transparent; - border-radius: 50%; - animation: 1.1s linear throbber-spin infinite; -} - -@keyframes throbber-spin { - from { - transform: none; - } - to { - transform: rotate(360deg); - } -} diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css index d3c842fb..4f3814a1 100644 --- a/LCARStrek/devtools/toolbox.css +++ b/LCARStrek/devtools/toolbox.css @@ -104,7 +104,6 @@ hbox#toolbox-buttons { border-width: 0; /* border-inline-start-width: 1px;*/ -moz-box-align: center; - -moz-user-focus: normal; -moz-box-flex: 1; color: var(--theme-button-color); @@ -246,7 +245,6 @@ hbox#toolbox-buttons { #toolbox-controls > button, #toolbox-dock-buttons > button { -moz-appearance: none; - -moz-user-focus: normal; border: none; /* margin: 0 4px;*/ min-width: 18px; @@ -269,12 +267,6 @@ hbox#toolbox-buttons { 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"); } @@ -304,7 +296,6 @@ hbox#toolbox-buttons { padding: 0; margin: 0; position: relative; - -moz-user-focus: normal; } .command-button::before { @@ -392,7 +383,6 @@ hbox#toolbox-buttons { #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 */ @@ -400,7 +390,11 @@ hbox#toolbox-buttons { min-width: 32px; } -#command-button-frames:-moz-dir(rtl) { +#command-button-frames:-moz-locale-dir(ltr) { + background-position: right; +} + +#command-button-frames:-moz-locale-dir(rtl) { background-position: left; } diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css index ce0d175d..095b405d 100644 --- a/LCARStrek/devtools/webconsole.css +++ b/LCARStrek/devtools/webconsole.css @@ -356,17 +356,24 @@ a { .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before, -.message[category=server][severity=error] > .icon::before { +.message[category=server][severity=error] > .icon::before, +.message.console-api.error > .icon::before, +.message.output.error > .icon::before, +.message.server.error > .icon::before { background-position: -12px -36px; } .message[category=console][severity=warn] > .icon::before, -.message[category=server][severity=warn] > .icon::before { +.message[category=server][severity=warn] > .icon::before, +.message.console-api.warn > .icon::before, +.message.server.warn > .icon::before { background-position: -24px -36px; } .message[category=console][severity=info] > .icon::before, -.message[category=server][severity=info] > .icon::before { +.message[category=server][severity=info] > .icon::before, +.message.console-api.info > .icon::before, +.message.server.info > .icon::before { background-position: -36px -36px; } @@ -535,7 +542,8 @@ a { background-color: #000000; } -.message[open] .stacktrace { +.message[open] .stacktrace, +.message.open .stacktrace { display: block; } @@ -546,6 +554,12 @@ a { flex-shrink: 0; } +/*Do not mirror the twisty because container force to ltr */ +.message .theme-twisty:dir(rtl), +.message .theme-twisty:-moz-locale-dir(rtl) { + transform: none; +} + .cm-s-mozilla a[class] { font-style: italic; text-decoration: none; diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css index 67d6790a..ba1dba2c 100644 --- a/LCARStrek/devtools/widgets.css +++ b/LCARStrek/devtools/widgets.css @@ -207,7 +207,7 @@ #breadcrumb-separator-after, #breadcrumb-separator-before:after { - background: var(--theme-toolbar-background); + background: var(--theme-body-background); } /* This chevron arrow cannot be replicated easily in CSS, so we are using @@ -258,15 +258,6 @@ color: var(--theme-active-color); } -.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; -- 2.35.3