From e9fbfc3a7b3198b48b041b9d5ce52d444d3f3a40 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 3 Apr 2016 22:13:44 +0200 Subject: [PATCH] fifth part of syncing LCARStrek with Firefox 42-44 windows theme changes --- LCARStrek/browser/browser.css | 17 +- LCARStrek/browser/controlcenter/panel.css | 1 + .../browser/devtools/animationinspector.css | 131 ++-- LCARStrek/browser/devtools/dark-theme.css | 1 + LCARStrek/browser/devtools/debugger.css | 7 +- LCARStrek/browser/devtools/images/clear.svg | 7 + .../devtools/images/command-screenshot.svg | 7 + LCARStrek/browser/devtools/images/diff.svg | 7 + .../browser/devtools/images/webconsole.svg | 101 +++ LCARStrek/browser/devtools/markup-view.css | 12 + LCARStrek/browser/devtools/memory.css | 578 ++++++++++++++++++ LCARStrek/browser/devtools/netmonitor.css | 15 +- LCARStrek/browser/devtools/performance.css | 64 +- LCARStrek/browser/devtools/ruleview.css | 17 +- LCARStrek/browser/devtools/webconsole.css | 20 +- .../devtools/webconsole_networkpanel.css | 95 --- LCARStrek/browser/engineManager.css | 14 - .../preferences/in-content/preferences.css | 96 +++ LCARStrek/browser/searchbar.css | 90 +-- 19 files changed, 1019 insertions(+), 261 deletions(-) create mode 100644 LCARStrek/browser/devtools/images/clear.svg create mode 100644 LCARStrek/browser/devtools/images/command-screenshot.svg create mode 100644 LCARStrek/browser/devtools/images/diff.svg create mode 100644 LCARStrek/browser/devtools/images/webconsole.svg create mode 100644 LCARStrek/browser/devtools/memory.css delete mode 100644 LCARStrek/browser/devtools/webconsole_networkpanel.css delete mode 100644 LCARStrek/browser/engineManager.css diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 29be8d96..70813dbd 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -1944,7 +1944,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, padding: 0 2px; } -.searchbar-engine-button, .search-go-container { padding: 2px; } @@ -2020,7 +2019,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; - -moz-user-focus: ignore; min-width: 80px; border-radius: 3px; padding: 4px 16px; @@ -2718,11 +2716,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- -moz-image-region: rect(0px 32px 16px 16px); } -#bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-margin-start: 5px; -} - -#bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { +#nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { padding-top: 2px; padding-bottom: 2px; } @@ -3517,11 +3511,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled /* padding-left: 7px; */ } +/* This changes the direction of the main notification box on the url bar. */ #notification-popup-box:-moz-locale-dir(rtl), +/* This adds a second flip for the notification anchors, as they don't switch direction + for RTL mode. */ .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } +/* For the anchor icons in the chat window, we don't have the notification popup box, + so we need to cancel the RTL transform. */ +.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { + transform: none; +} + .notification-anchor-icon { list-style-image: url("chrome://global/skin/icons/information-16.png"); diff --git a/LCARStrek/browser/controlcenter/panel.css b/LCARStrek/browser/controlcenter/panel.css index c2322a2b..75ac48cb 100644 --- a/LCARStrek/browser/controlcenter/panel.css +++ b/LCARStrek/browser/controlcenter/panel.css @@ -177,6 +177,7 @@ margin: 3px 0 4px; font-size: 150%; } + .identity-popup-warning-gray { -moz-padding-start: 24px; background: url(chrome://browser/skin/controlcenter/warning-gray.svg) no-repeat 0 50%; diff --git a/LCARStrek/browser/devtools/animationinspector.css b/LCARStrek/browser/devtools/animationinspector.css index 1f83b3f5..a48e4e76 100644 --- a/LCARStrek/browser/devtools/animationinspector.css +++ b/LCARStrek/browser/devtools/animationinspector.css @@ -9,6 +9,15 @@ --even-animation-timeline-background-color: rgba(160,144,144,0.03); } +:root { + /* How high should toolbars be */ + --toolbar-height: 20px; + /* How wide should the sidebar be */ + --timeline-sidebar-width: 150px; + /* How high should animations displayed in the timeline be */ + --timeline-animation-height: 20px; +} + html { height: 100%; } @@ -31,7 +40,7 @@ body { flex-direction: row; align-items: center; justify-content: flex-end; - height: 20px; + height: var(--toolbar-height); } #toolbar .label { @@ -40,13 +49,13 @@ body { #toggle-all { border-width: 0 0 0 1px; - min-height: 20px; + min-height: var(--toolbar-height); } /* The main animations container */ #players { - height: calc(100% - 20px); + height: calc(100% - var(--toolbar-height)); overflow: auto; } @@ -123,17 +132,42 @@ body { background-repeat: repeat-y; /* The animations are drawn 150px from the left edge so that animated nodes can be displayed in a sidebar */ - background-position: 150px 0; + background-position: var(--timeline-sidebar-width) 0; display: flex; flex-direction: column; } +.animation-timeline .scrubber { + position: absolute; + height: 100%; + width: var(--timeline-sidebar-width); + border-right: 1px solid #FF0000; + box-sizing: border-box; + z-index: 1; + pointer-events: none; +} + +.animation-timeline .scrubber::before { + content: ""; + position: absolute; + top: 0; + width: 1px; + right: -6px; + border-top: 5px solid #FF0000; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} + .animation-timeline .time-header { - margin-left: 150px; - height: 20px; + margin-left: var(--timeline-sidebar-width); + height: var(--toolbar-height); overflow: hidden; position: relative; + /* This is the same color as the time graduations in + browser/devtools/animationinspector/utils.js */ border-bottom: 1px solid var(--theme-splitter-color); + cursor: col-resize; + -moz-user-select: none; } .animation-timeline .time-header .time-tick { @@ -154,7 +188,7 @@ body { .animation-timeline .animation { margin: 4px 0; - height: 20px; + height: var(--timeline-animation-height); position: relative; } @@ -163,7 +197,7 @@ body { } .animation-timeline .animation .target { - width: 150px; + width: var(--timeline-sidebar-width); overflow: hidden; height: 100%; } @@ -175,7 +209,7 @@ body { .animation-timeline .animation .time-block { position: absolute; top: 0; - left: 150px; + left: var(--timeline-sidebar-width); right: 0; height: 100%; } @@ -185,19 +219,36 @@ body { .animation-timeline .animation .iterations { position: relative; height: 100%; - border: 1px solid var(--theme-highlight-lightorange); box-sizing: border-box; - background: var(--theme-contrast-background); - /* Iterations are displayed with a repeating linear-gradient which size is - dynamically changed from JS */ + --timelime-border-color: var(--theme-body-color); + --timeline-background-color: var(--theme-splitter-color); + + /* Iterations of the animation are displayed with a repeating linear-gradient + which size is dynamically changed from JS. The gradient only draws 1px + borders between each iteration. These borders must have the same color as + the border of this element */ background-image: linear-gradient(to right, - var(--theme-highlight-lightorange) 0, - var(--theme-highlight-lightorange) 1px, + var(--timelime-border-color) 0, + var(--timelime-border-color) 1px, transparent 1px, transparent 2px); background-repeat: repeat-x; background-position: -1px 0; + border: 1px solid var(--timelime-border-color); + + /* The background color is set independently */ + background-color: var(--timeline-background-color); +} + +.animation-timeline .animation .cssanimation { + --timelime-border-color: var(--theme-highlight-lightorange); + --timeline-background-color: var(--theme-contrast-background); +} + +.animation-timeline .animation .csstransition { + --timelime-border-color: var(--theme-highlight-bluegrey); + --timeline-background-color: var(--theme-highlight-blue); } .animation-timeline .animation .iterations.infinite { @@ -222,24 +273,41 @@ body { top: unset; } -.animation-timeline .animation .animation-title { - height: 1.5em; +.animation-timeline .animation .name { + color: var(--theme-selection-color); + height: 100%; width: 100%; - box-sizing: border-box; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 150%; + padding: 0 2px; } .animation-timeline .animation .delay { position: absolute; top: 0; - height: 100%; - background-image: linear-gradient(to bottom, - transparent, - transparent 9px, - var(--theme-highlight-lightorange) 9px, - var(--theme-highlight-lightorange) 11px, - transparent 11px, - transparent); + /* Make sure the delay covers up the animation border */ + transform: translate(-1px, -1px); + box-sizing: border-box; + height: calc(100% + 2px); + + border: 1px solid var(--timelime-border-color); + border-width: 1px 0 1px 1px; + background-image: repeating-linear-gradient(45deg, + transparent, + transparent 1px, + var(--theme-selection-color) 1px, + var(--theme-selection-color) 4px); + background-color: var(--timelime-border-color); +} + +.animation-timeline .animation .delay.negative { + /* Negative delays are displayed on top of the animation, so they need a + right border. Whereas normal delays are displayed just before the + animation, so there's already the animation's left border that serves as + a separation. */ + border-width: 1px; } .animation-timeline .animation .delay::before { @@ -250,14 +318,7 @@ body { height: 8px; top: 50%; margin-top: -4px; - background: var(--theme-highlight-lightorange); -} - -.animation-timeline .animation .name { - position: absolute; - z-index: 1; - padding: 2px; - white-space: nowrap; + background: var(--timelime-border-color); } /* Animation target node gutter, contains a preview of the dom node */ @@ -322,7 +383,7 @@ body { /* Timeline wiget */ .timeline { - height: 20px; + height: var(--timeline-animation-height); width: 100%; display: flex; flex-direction: row; diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css index 6eea5192..dfe21985 100644 --- a/LCARStrek/browser/devtools/dark-theme.css +++ b/LCARStrek/browser/devtools/dark-theme.css @@ -55,6 +55,7 @@ /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ --theme-graphs-green: #008484; --theme-graphs-blue: #9C9CFF; + --theme-graphs-bluegrey: #C09070; --theme-graphs-purple: #C09070; --theme-graphs-yellow: #FFCF00; --theme-graphs-red: #FF0000; diff --git a/LCARStrek/browser/devtools/debugger.css b/LCARStrek/browser/devtools/debugger.css index 4318b901..e5eb6b85 100644 --- a/LCARStrek/browser/devtools/debugger.css +++ b/LCARStrek/browser/devtools/debugger.css @@ -620,7 +620,12 @@ window { } #debugger-controls toolbarbutton[disabled] { -/* opacity: 0.5; */ +/* opacity: 0.5; + transition: none; */ +} + +#resume[break-on-next] { + background: var(--theme-highlight-lightorange); } #step-over { diff --git a/LCARStrek/browser/devtools/images/clear.svg b/LCARStrek/browser/devtools/images/clear.svg new file mode 100644 index 00000000..702a8cee --- /dev/null +++ b/LCARStrek/browser/devtools/images/clear.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/browser/devtools/images/command-screenshot.svg b/LCARStrek/browser/devtools/images/command-screenshot.svg new file mode 100644 index 00000000..f8905d78 --- /dev/null +++ b/LCARStrek/browser/devtools/images/command-screenshot.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/browser/devtools/images/diff.svg b/LCARStrek/browser/devtools/images/diff.svg new file mode 100644 index 00000000..c09eeb11 --- /dev/null +++ b/LCARStrek/browser/devtools/images/diff.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/LCARStrek/browser/devtools/images/webconsole.svg b/LCARStrek/browser/devtools/images/webconsole.svg new file mode 100644 index 00000000..d40e1641 --- /dev/null +++ b/LCARStrek/browser/devtools/images/webconsole.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/browser/devtools/markup-view.css b/LCARStrek/browser/devtools/markup-view.css index f257ffca..74942ba4 100644 --- a/LCARStrek/browser/devtools/markup-view.css +++ b/LCARStrek/browser/devtools/markup-view.css @@ -15,6 +15,18 @@ border: 1px solid #9C9CFF; } +/* Draw a circle next to nodes that have a pseudo class lock. + Center vertically with the 1.4em line height on .tag-line */ +.child.pseudoclass-locked::before { + content: ""; + background: var(--theme-highlight-lightorange); + border-radius: 50%; + width: .8em; + height: .8em; + margin-top: .3em; + left: 1px; + position: absolute; +} /* Selected nodes in the tree should have light selected text. theme-selected doesn't work in this case since the text is a diff --git a/LCARStrek/browser/devtools/memory.css b/LCARStrek/browser/devtools/memory.css new file mode 100644 index 00000000..25fd76c2 --- /dev/null +++ b/LCARStrek/browser/devtools/memory.css @@ -0,0 +1,578 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* CSS Variables specific to this panel that aren't defined by the themes */ +.theme-dark, +.theme-light { + --cell-border-color: #9C9CFF; + --cell-border-color-light: #A09090; + --focus-cell-border-color: #9C9CFF; + --row-alt-background-color: #402000; + --row-hover-background-color: #603000; +} + +html, body, #app, #memory-tool { + height: 100%; +} + +#memory-tool { + /** + * Flex: contains two children: .devtools-toolbar and #memory-tool-container, + * which need to be laid out vertically. The toolbar has a fixed height and + * the container needs to flex to fill out all remaining vertical space. + */ + display: flex; + flex-direction: column; + --sidebar-width: 185px; + /** + * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT + * in `devtools/client/memory/components/heap.js`. + */ + --heap-tree-row-height: 14px; + --heap-tree-header-height: 17px; +} + +/** + * Toolbar + */ + +.devtools-toolbar { + /** + * Flex: contains several children, which need to be laid out horizontally, + * and aligned vertically in the middle of the container. + */ + display: flex; + align-items: center; +} + +.devtools-toolbar > .toolbar-group:nth-of-type(1) { + /** + * We want this to be exactly at a `--sidebar-width` distance from the + * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding. + */ + flex: 0 0 calc(var(--sidebar-width) - 4px); + border-inline-end: 1px solid var(--theme-splitter-color); + margin-inline-end: 5px; + padding-right: 1px; +} + +.devtools-toolbar > .toolbar-group { + /** + * Flex: contains several children, which need to be laid out horizontally, + * and aligned vertically in the middle of the container. + */ + display: flex; + align-items: center; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.devtools-toolbar > .toolbar-group > label { + /** + * Flex: contains form controls and text, which need to be laid out + * horizontally, vertically aligned in the middle of the container. + */ + display: flex; + align-items: center; + margin-inline-end: 5px; +} + +.devtools-toolbar > .toolbar-group > label.display-by > span { + margin-inline-end: 5px; +} + +.devtools-toolbar > .toolbar-group > label.label-by > span { + margin-inline-end: 5px; +} + +.devtools-toolbar > label { + margin-inline-end: 5px; +} + +#select-view { + margin-inline-start: 5px; +} + +#take-snapshot::before { + background-image: url(images/command-screenshot.svg); +} + +#clear-snapshots::before { + background-image: url(chrome://devtools/skin/images/clear.svg); +} + +#diff-snapshots::before { + background-image: url(chrome://devtools/skin/images/diff.svg); +} + +/** + * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides + * .devtools-toolbarbutton's min-width of 78px, reset the min-width. + */ +#import-snapshot, +#clear-snapshots { + -moz-box-align: center; + flex-grow: 1; + padding: 1px; + margin: 2px 1px; + min-width: unset; +} + +.spacer { + flex: 1; +} + +#filter { + align-self: stretch; + margin: 2px; +} + +/** + * Container (sidebar + main panel) + */ + +#memory-tool-container { + /** + * Flex: contains two children: .list (sidebar) and #heap-view (main panel), + * which need to be laid out horizontally. The sidebar has a fixed width and + * the main panel needs to flex to fill out all remaining horizontal space. + */ + display: flex; + /** + * Flexing to fill out remaining vertical space. The preceeding sibling is + * the toolbar. @see #memory-tool. + */ + flex: 1; + overflow: hidden; +} + +/** + * Sidebar + */ + +.list { + width: var(--sidebar-width); + min-width: var(--sidebar-width); + overflow-y: auto; + margin: 0; + padding: 0; + background-color: var(--theme-sidebar-background); + border-inline-end: 1px solid var(--theme-splitter-color); +} + +.snapshot-list-item { + /** + * Flex: contains several children, which need to be laid out vertically. + */ + display: flex; + flex-direction: column; + color: var(--theme-body-color); + border-bottom: 1px solid #A09090; + padding: 8px; + cursor: default; +} + +.snapshot-list-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.snapshot-list-item.selected ::-moz-selection { + background-color: var(--theme-selection-color); + color: var(--theme-selection-background); +} + +.snapshot-list-item .snapshot-info { + display: flex; + justify-content: space-between; + font-size: 90%; +} + +.snapshot-list-item .save { + text-decoration: underline; + cursor: pointer; +} + +.snapshot-list-item > .snapshot-title { + margin-bottom: 14px; +} + +.snapshot-list-item > .snapshot-title > input[type=checkbox] { + margin: 0; + margin-inline-end: 5px; +} + +.snapshot-list-item > .snapshot-state, +.snapshot-list-item > .snapshot-totals { + font-size: 90%; + color: var(--theme-body-color-alt); +} + +.snapshot-list-item.selected > .snapshot-state, +.snapshot-list-item.selected > .snapshot-totals { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/** + * Main panel + */ + +.vbox { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: auto; + padding: 0; + margin: 0; +} + +.vbox > * { + flex: 1; + + /** + * By default, flex items have min-width: auto; + * (https://drafts.csswg.org/css-flexbox/#min-size-auto) + */ + min-width: 0; +} + +#heap-view { + /** + * Flex: contains a .heap-view-panel which needs to fill out all the + * available space, horizontally and vertically. + */; + display: flex; + /** + * Flexing to fill out remaining horizontal space. The preceeding sibling + * is the sidebar. @see #memory-tool-container. + */ + flex: 1; + background-color: var(--theme-body-background); + + /** + * By default, flex items have min-width: auto; + * (https://drafts.csswg.org/css-flexbox/#min-size-auto) + */ + min-width: 0; + font-size: 90%; +} + +#heap-view > .heap-view-panel { + /** + * Flex: can contain several children, including a tree with a header and + * multiple rows, all of which need to be laid out vertically. When the + * tree is visible, the header has a fixed height and tree body needs to flex + * to fill out all remaining vertical space. + */ + display: flex; + flex-direction: column; + /** + * Flexing to fill out remaining horizontal space. @see #heap-view. + */ + flex: 1; + + /** + * By default, flex items have min-width: auto; + * (https://drafts.csswg.org/css-flexbox/#min-size-auto) + */ + min-width: 0; +} + +#heap-view > .heap-view-panel > .snapshot-status, +#heap-view > .heap-view-panel > .take-snapshot, +#heap-view .empty, +#shortest-paths-select-node-msg { + margin: auto; + margin-top: 65px; + font-size: 120%; +} + +#heap-view > .heap-view-panel > .take-snapshot { + padding: 5px; +} + +#heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre { + background-color: var(--theme-body-background); + margin: 20px; + padding: 20px; +} + +/** + * Heap tree view header + */ + +.header { + /** + * Flex: contains several span columns, all of which need to be laid out + * horizontally. All columns except the last one have percentage widths, and + * the last one needs to flex to fill out all remaining horizontal space. + */ + display: flex; + color: var(--theme-body-color); + background-color: var(--theme-tab-toolbar-background); + border-bottom: 1px solid var(--cell-border-color); + flex: 0; +} + +.header > span, +#shortest-paths-header { + text-overflow: ellipsis; + line-height: var(--heap-tree-header-height); + justify-content: center; + justify-self: center; + white-space: nowrap; +} + +.header > span { + overflow: hidden; +} + +.header > .heap-tree-item-name { + justify-content: flex-start; +} + +#shortest-paths { + background-color: var(--theme-body-background); + overflow: hidden; + height: 100%; + width: 100%; +} + +#shortest-paths-select-node-msg { + justify-self: center; +} + +/** + * Heap tree view body + */ + +.tree { + /** + * Flexing to fill out remaining vertical space. @see .heap-view-panel + */ + flex: 1; + overflow-y: auto; + background-color: var(--theme-body-background); +} + +.tree-node { + height: var(--heap-tree-row-height); + line-height: var(--heap-tree-row-height); + cursor: default; +} + +.children-pointer { + padding-inline-end: 5px; +} + +/** + * Heap tree view columns + */ + +.heap-tree-item { + /** + * Flex: contains several span columns, all of which need to be laid out + * horizontally. All columns except the last one have percentage widths, and + * the last one needs to flex to fill out all remaining horizontal space. + */ + display: flex; +} + +.tree-node-odd { + background-color: var(--row-alt-background-color); +} + +.tree-node:hover { + background-color: var(--row-hover-background-color); +} + +.heap-tree-item.focused { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.heap-tree-item.focused ::-moz-selection { + background-color: var(--theme-selection-color); + color: var(--theme-selection-background); +} + +.heap-tree-item-bytes, +.heap-tree-item-count, +.heap-tree-item-total-bytes, +.heap-tree-item-total-count { + /** + * Flex: contains several subcolumns, which need to be laid out horizontally. + * These subcolumns may have specific widths or need to flex. + */ + display: flex; + text-align: end; + border-inline-end: var(--cell-border-color) 1px solid; +} + +.heap-tree-item-count, +.heap-tree-item-total-count, +.heap-tree-item-bytes, +.heap-tree-item-total-bytes { + width: 10%; + /* + * Provision for up to 19 characters: + * + * GG_MMM_KKK_BBB_100% + * | ||| | + * '------------'|'--' + * 14 ch for 10s | 4 ch for the largest % we will + * of GB and | normally see: "100%" + * spaces every | + * 3 digits | + * | + * A space between the number and percent + */ + min-width: 19ch; +} + +.heap-tree-item-name { + /** + * Flex: contains an .arrow and some text, which need to be laid out + * horizontally, vertically aligned in the middle of the container. + */ + display: flex; + align-items: center; + /** + * Flexing to fill out remaining vertical space. + * @see .header and .heap-tree-item */ + flex: 1; + padding-inline-start: 5px; +} + +/** + * Heap tree view subcolumns + */ + +.heap-tree-number, +.heap-tree-percent, +.heap-tree-item-name { + white-space: nowrap; +} + +.heap-tree-number { + padding-inline-start: 3px; +} + +.heap-tree-percent { + padding-inline-start: 3px; + padding-inline-end: 3px; +} + +.heap-tree-number, +.heap-tree-percent { + font-family: var(--monospace-font-family); +} + +.heap-tree-number { + flex: 1; + color: var(--theme-content-color3); +} + +.heap-tree-percent { + width: 4ch; +} + +.heap-tree-item.focused .heap-tree-number, +.heap-tree-item.focused .heap-tree-percent { + color: inherit; +} + +/** + * Heap tree errors. + */ + +.error::before { + content: ""; + display: inline-block; + width: 12px; + height: 12px; + max-height: 12px; + background-image: url(chrome://devtools/skin/images/webconsole.svg); + background-size: 72px 60px; + background-position: -24px -24px; + background-repeat: no-repeat; + margin: 0px; + margin-top: 2px; + margin-inline-end: 5px; +} + +.theme-light .error::before { + background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); +} + +/** + * Frame View components + */ + +.separator, +.not-available, +.heap-tree-item-address { + opacity: .5; + margin-left: .5em; + margin-right: .5em; +} + +.no-allocation-stacks { + border-color: var(--theme-splitter-color); + border-style: solid; + border-width: 0px 0px 1px 0px; + text-align: center; + padding: 5px; +} + +/** + * Dagre-D3 graphs + */ + +.edgePath path { + stroke-width: 1px; + fill: none; +} + +.theme-dark .edgePath path { + stroke: var(--theme-body-color-alt); +} +.theme-light .edgePath path { + stroke: var(--theme-splitter-color); +} + +g.edgeLabel rect { + fill: var(--theme-body-background); +} +g.edgeLabel tspan { + fill: var(--theme-body-color-alt); +} + +.nodes rect { + stroke-width: 1px; +} + +.nodes rect { + stroke: var(--theme-tab-toolbar-background); +} +.theme-light rect { + fill: var(--theme-tab-toolbar-background); +} +.theme-dark rect { + fill: var(--theme-toolbar-background); +} + +text { + font-weight: 300; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + font-size: 14px; +} + +text { + fill: var(--theme-body-color-alt); +} diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css index bad325fc..61f719ec 100644 --- a/LCARStrek/browser/devtools/netmonitor.css +++ b/LCARStrek/browser/devtools/netmonitor.css @@ -167,25 +167,27 @@ window { width: 16px; height: 16px; -moz-margin-end: 4px; + cursor: pointer; } .security-state-insecure { - list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); + list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); } .security-state-secure { - cursor: pointer; list-style-image: url("chrome://browser/skin/identity-secure.svg"); } .security-state-weak { - cursor: pointer; list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg"); } .security-state-broken { - cursor: pointer; - list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); + list-style-image: url("chrome://browser/skin/controlcenter/warning-gray.svg"); +} + +.security-state-local { + list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); } .requests-menu-type { @@ -222,7 +224,8 @@ label.requests-menu-status-code { } box.requests-menu-status:not([code]) { - background-color: var(--theme-content-color2); + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ } box.requests-menu-status[code="cached"] { diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css index 5a108b1b..5eaf9ec3 100644 --- a/LCARStrek/browser/devtools/performance.css +++ b/LCARStrek/browser/devtools/performance.css @@ -13,6 +13,16 @@ --row-hover-background-color: #544400; } +/** + * A generic class to hide elements, replacing the `element.hidden` attribute + * that we use to hide elements that can later be active + */ +.hidden { + display: none; + width: 0px; + height: 0px; +} + /* Toolbar */ #performance-toolbar-control-other { @@ -272,8 +282,20 @@ .call-tree-header[type="count"], .call-tree-cell[type="count"], .call-tree-header[type="self-count"], -.call-tree-cell[type="self-count"] { - width: 9vw; +.call-tree-cell[type="self-count"], +.call-tree-header[type="size"], +.call-tree-cell[type="size"], +.call-tree-header[type="self-size"], +.call-tree-cell[type="self-size"], +.call-tree-header[type="count-percentage"], +.call-tree-cell[type="count-percentage"], +.call-tree-header[type="self-count-percentage"], +.call-tree-cell[type="self-count-percentage"], +.call-tree-header[type="size-percentage"], +.call-tree-cell[type="size-percentage"], +.call-tree-header[type="self-size-percentage"], +.call-tree-cell[type="self-size-percentage"] { + width: 6vw; } .call-tree-header[type="function"], @@ -545,23 +567,33 @@ font-weight: bold; } +.marker-details-customcontainer .custom-button { + padding: 2px 5px; + border-width: 1px; +} + /** * Marker colors */ -menuitem.marker-color-graphs-purple:before, -.marker-color-graphs-purple { - background-color: var(--theme-graphs-purple); +menuitem.marker-color-graphs-green:before, +.marker-color-graphs-green { + background-color: var(--theme-graphs-green); } -menuitem.marker-color-graphs-grey:before, -.marker-color-graphs-grey{ - background-color: var(--theme-graphs-grey); +menuitem.marker-color-graphs-blue:before, +.marker-color-graphs-blue { + background-color: var(--theme-graphs-blue); } -menuitem.marker-color-graphs-green:before, -.marker-color-graphs-green { - background-color: var(--theme-graphs-green); +menuitem.marker-color-graphs-bluegrey:before, +.marker-color-graphs-bluegrey { + background-color: var(--theme-graphs-bluegrey); +} + +menuitem.marker-color-graphs-purple:before, +.marker-color-graphs-purple { + background-color: var(--theme-graphs-purple); } menuitem.marker-color-graphs-yellow:before, @@ -574,9 +606,9 @@ menuitem.marker-color-graphs-red:before, background-color: var(--theme-graphs-red); } -menuitem.marker-color-graphs-blue:before, -.marker-color-graphs-blue { - background-color: var(--theme-graphs-blue); +menuitem.marker-color-graphs-grey:before, +.marker-color-graphs-grey{ + background-color: var(--theme-graphs-grey); } /* Profile call tree */ @@ -863,10 +895,6 @@ description.opt-icon::before { .opt-icon[severity=warning]::before { background-position: -24px -24px; } -.opt-icon[type=linkable]::before { - cursor: pointer; -} - ul.frames-list { list-style-type: none; diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css index 7e5f8804..c863d174 100644 --- a/LCARStrek/browser/devtools/ruleview.css +++ b/LCARStrek/browser/devtools/ruleview.css @@ -6,6 +6,7 @@ .theme-light { --rule-highlight-background-color: #402800; + --rule-filter-icon: url("magnifying-glass.png"); } .ruleview { @@ -95,7 +96,6 @@ background: url("alerticon-warning.png"); -moz-margin-start: 5px; display: inline-block; - vertical-align: top; width: 13px; height: 12px; } @@ -106,6 +106,15 @@ } } +.ruleview-overridden-rule-filter { + background-image: var(--rule-filter-icon); + background-size: 11px 11px; + -moz-margin-start: 5px; + display: inline-block; + width: 11px; + height: 11px; +} + .ruleview-ruleopen { -moz-padding-end: 5px; } @@ -291,13 +300,15 @@ */ /* #ruleview-add-rule-button, -#pseudo-class-panel-toggle { +#pseudo-class-panel-toggle, +.ruleview-overridden-rule-filter { opacity: 0.8; } #ruleview-add-rule-button:not([disabled]):hover, #pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked] { +#pseudo-class-panel-toggle[checked], +.ruleview-overridden-rule-filter:hover { opacity: 1; } diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css index b25bc12a..c8ee2f6b 100644 --- a/LCARStrek/browser/devtools/webconsole.css +++ b/LCARStrek/browser/devtools/webconsole.css @@ -354,18 +354,32 @@ a { } .message[category=console][severity=error] > .icon::before, -.message[category=output][severity=error] > .icon::before { +.message[category=output][severity=error] > .icon::before, +.message[category=server][severity=error] > .icon::before { background-position: -12px -36px; } -.message[category=console][severity=warn] > .icon::before { +.message[category=console][severity=warn] > .icon::before, +.message[category=server][severity=warn] > .icon::before { background-position: -24px -36px; } -.message[category=console][severity=info] > .icon::before { +.message[category=console][severity=info] > .icon::before, +.message[category=server][severity=info] > .icon::before { background-position: -36px -36px; } +/* Server Logging Styles */ + +.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#006363, #004242); + border-color: #008484; +} + +.message[category=server] > .indent { + -moz-border-end: solid #8050B0 6px; +} + /* Input and output styles */ .message[category=input] > .indent, .message[category=output] > .indent { diff --git a/LCARStrek/browser/devtools/webconsole_networkpanel.css b/LCARStrek/browser/devtools/webconsole_networkpanel.css deleted file mode 100644 index 4477b178..00000000 --- a/LCARStrek/browser/devtools/webconsole_networkpanel.css +++ /dev/null @@ -1,95 +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/. */ - -body { - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; - background: #000000; - color: #FF9F00; -} - -#header { - padding: 5px; - overflow-x:auto; - display: block; -} - -h1 { - font-size: 13px; - line-height: 15px; - padding: 3px 10px; - vertical-align: bottom; - margin: 0px; - border-bottom: 1px solid #9C9CFF; -} - -h1 .info { - font-size: 11px; - line-height: 15px; - vertical-align: bottom; - float: right; - color: #9C9CFF; - padding-right: 3px; - display: block; -} - -.property-table { - padding: 2px 5px; - color: #9C9CFF; - width: 100%; - max-height: 330px; - overflow: auto; -} - -.property-table-header { - font-size: 11px; - font-weight: bold; - padding-right: 4px; - color: #FF9F00; - white-space: nowrap; - text-align: end; - vertical-align: top; - width: 10%; -} - -.property-table-value { - padding-right: 5px; - font-size: 11px; - word-wrap: break-word; - width: 90%; -} - -div.group { - margin-top: 10px; -} - -div.group, -#header { - background: #000000; - border-color: #9C9CFF; - border-style: solid; - border-width: 1px; - border-radius: 4px 4px 4px 4px; -} - -img#responseImageNode { - max-width: 100%; -} - -#responseImageNodeDiv { - padding: 5px; -} - -#responseBodyFetchLink, #requestBodyFetchLink { - padding: 5px; - margin: 0; - cursor: pointer; - font-weight: bold; - font-size: 1.1em; - text-decoration: underline; -} - -.longStringEllipsis { - margin-left: 0.6em; -} diff --git a/LCARStrek/browser/engineManager.css b/LCARStrek/browser/engineManager.css deleted file mode 100644 index 79d8d825..00000000 --- a/LCARStrek/browser/engineManager.css +++ /dev/null @@ -1,14 +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/. */ - -#engineList treechildren::-moz-tree-image(engineName) { - -moz-margin-end: 4px; - -moz-margin-start: 1px; - width: 16px; - height: 16px; -} - -#engineList treechildren::-moz-tree-row { - height: 20px; -} diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css index 3a6c7c16..11c3043f 100644 --- a/LCARStrek/browser/preferences/in-content/preferences.css +++ b/LCARStrek/browser/preferences/in-content/preferences.css @@ -531,6 +531,102 @@ description > html|a { margin: 0 0 20px; } +#syncStatusMessageDescription { + font-size: 14px; + line-height: 158%; + margin: 0 !important; +} + +#syncStatusMessageClose { + margin: 0px; +} + +#syncStatusMessage { + visibility: collapse; + opacity: 0; + transition: opacity 1s linear; + padding: 14px 8px 14px 14px; + border-radius: 2px; +} + +#syncStatusMessage[message-type] { + visibility: visible; + opacity: 1; +} + +#syncStatusMessage[message-type="verify-success"] { + background-color: #008484; +} + +#syncStatusMessage[message-type="verify-error"] { + background-color: #FF0000; +} + +#syncStatusMessage[message-type="migration"] { + background-color: #FFCF00; +} + +#sync-migration-buttons-deck { + visibility: collapse; +} + +#learnMoreLink { + margin: 0; + color: #336699; + text-decoration: underline; +} + +#syncStatusMessage[message-type="migration"] #sync-migration-buttons-deck { + visibility: visible; +} + +#sync-migration-buttons-deck { + margin-top: 20px; +} + +#sync-migration-buttons-deck button { + margin: 0 10px 0 0; + border: 0; + border-radius: 2px; +} + +#sync-migrate-upgrade, +#sync-migrate-resend { +/* background-color: #0095DD; + color: #FBFBFB; */ +} + +#sync-migrate-upgrade:hover, +#sync-migrate-resend:hover { +/* background-color: #008ACB; */ +} + +#sync-migrate-upgrade:hover:active, +#sync-migrate-resend:hover:active { +/* background-color: #006B9D; */ +} + +#syncStatusMessageWrapper { + -moz-box-flex: 1; + padding-right: 5px; +} + +#syncStatusMessageTitle, #syncStatusMessageDescription { + color: #A09090; +} + +#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle { + display: none; +} + +#syncStatusMessageTitle { + font-weight: bold !important; + font-size: 16px; + line-height: 157%; + margin: 0 0 20px; +} + + #syncStatusMessageDescription { font-size: 14px; line-height: 158%; diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css index 1a21a0cc..a84bb1a6 100644 --- a/LCARStrek/browser/searchbar.css +++ b/LCARStrek/browser/searchbar.css @@ -6,11 +6,6 @@ -moz-margin-start: -25px; } -.searchbar-dropmarker-image { - --searchbar-dropmarker-url: url("chrome://global/skin/arrow/arrow-down.gif"); - --searchbar-dropmarker-hover-url: url("chrome://global/skin/arrow/arrow-down-hover.gif"); -} - .autocomplete-textbox-container { -moz-box-align: stretch; } @@ -25,46 +20,9 @@ height: 16px; width: 16px; list-style-image: url("chrome://global/skin/filepicker/file.gif"); + -moz-margin-start: -1px; } -.searchbar-engine-button { - min-width: 0; - margin: 0; - padding: 0; - -moz-padding-end: 2px; - -moz-box-align: center; - background: none; - border: none; - border-radius: 3px 0px 0px 3px; -} - -.searchbar-engine-button:-moz-locale-dir(rtl) { - border-radius: 0px 3px 3px 0px; -} - -.searchbar-engine-button:hover { - background-color: #FFCF00; -} - -.searchbar-engine-button[open="true"] { - background-color: #FF9F00; -} - -.searchbar-engine-button > .button-box { - padding: 0; - border: 0; -} - -.searchbar-dropmarker-image { - list-style-image: var(--searchbar-dropmarker-url); -} - -.searchbar-engine-button:hover > .searchbar-dropmarker-image, -.searchbar-engine-button[open="true"] > .searchbar-dropmarker-image { - list-style-image: var(--searchbar-dropmarker-hover-url); -} - - /* ::::: search-go-button ::::: */ .search-go-container { @@ -73,22 +31,22 @@ .search-go-button { padding: 1px; - list-style-image: url("chrome://global/skin/icons/search.png"); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + -moz-image-region: rect(0, 42px, 14px, 28px); + width: 14px; } -.search-go-button:-moz-locale-dir(rtl) { +.search-go-button:-moz-locale-dir(rtl), +.search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { transform: scaleX(-1); } .search-go-button:hover { + -moz-image-region: rect(14px, 42px, 28px, 28px); } .search-go-button:hover:active { -} - -.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text { - font-weight: bold; + -moz-image-region: rect(14px, 42px, 28px, 28px); } .searchbar-search-button-container { @@ -114,35 +72,17 @@ background-color: #FFCF00; } -searchbar[oneoffui] .search-go-button { - list-style-image: url("chrome://browser/skin/reload-stop-goFx.png"); - -moz-image-region: rect(0, 42px, 14px, 28px); - width: 14px; -} - -searchbar[oneoffui] .search-go-button:hover { - -moz-image-region: rect(14px, 42px, 28px, 28px); -} - -searchbar[oneoffui] .search-go-button:hover:active { - -moz-image-region: rect(28px, 42px, 42px, 28px); -} - -searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { - transform: scaleX(-1); -} - @media (min-resolution: 1.1dppx) { - searchbar[oneoffui] .search-go-button { + .search-go-button { list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); -moz-image-region: rect(0, 84px, 28px, 56px); } - searchbar[oneoffui] .search-go-button:hover { + .search-go-button:hover { -moz-image-region: rect(28px, 84px, 56px, 56px); } - searchbar[oneoffui] .search-go-button:hover:active { + .search-go-button:hover:active { -moz-image-region: rect(56px, 84px, 84px, 56px); } } @@ -266,10 +206,6 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); } -searchbar[oneoffui] .searchbar-engine-button { - display: none; -} - .search-panel-tree > .autocomplete-treebody::-moz-tree-cell { -moz-padding-start: 15px; border-top: none !important; @@ -293,10 +229,6 @@ searchbar[oneoffui] .searchbar-engine-button { list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active"); } -searchbar[oneoffui] .searchbar-engine-image { - -moz-margin-start: -1px; -} - .search-setting-button { border-bottom: none; border-left: none; -- 2.35.3