From 936e60fe1e8ef7a38298736369448d66d0507842 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sat, 14 Nov 2015 00:27:51 +0100 Subject: [PATCH] third part of syncing LCARStrek with Firefox 41 windows theme changes --- LCARStrek/browser/browser.css | 6 + LCARStrek/browser/devtools/font-inspector.css | 3 + LCARStrek/browser/devtools/performance.css | 435 +++++++++--------- LCARStrek/browser/devtools/widgets.css | 2 +- 4 files changed, 221 insertions(+), 225 deletions(-) diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index b52c2d46..e4070861 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -3491,6 +3491,12 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled /* === END notification-icons.inc.css === */ +.popup-notification-body[popupid="addon-progress"], +.popup-notification-body[popupid="addon-install-confirmation"] { + width: 28em; + max-width: 28em; +} + /* Translation infobar */ /* === BEGIN infobar.inc.css === */ diff --git a/LCARStrek/browser/devtools/font-inspector.css b/LCARStrek/browser/devtools/font-inspector.css index 70a0b0e7..c64b981f 100644 --- a/LCARStrek/browser/devtools/font-inspector.css +++ b/LCARStrek/browser/devtools/font-inspector.css @@ -3,6 +3,9 @@ } body { + display: flex; + flex-direction: column; + height: 100%; margin: 0; padding-bottom: 20px; } diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css index e36deb7f..77ab4d9b 100644 --- a/LCARStrek/browser/devtools/performance.css +++ b/LCARStrek/browser/devtools/performance.css @@ -7,6 +7,7 @@ .theme-dark, .theme-light { --cell-border-color: #A09090; + --cell-border-color-light: #A09090; --focus-cell-border-color: #9C9CFF; --row-alt-background-color: #403400; --row-hover-background-color: #544400; @@ -14,19 +15,10 @@ /* Toolbar */ -#performance-toolbar > tabs, -#performance-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - #performance-toolbar-control-other { -moz-padding-end: 5px; } -#performance-toolbar-controls-detail-views > toolbarbutton { - min-width: 0; -} - #performance-toolbar-controls-detail-views .toolbarbutton-text { -moz-padding-start: 4px; -moz-padding-end: 8px; @@ -78,159 +70,169 @@ border-radius: 1px; } -/* Recording Notice */ +/* Details panel buttons */ -#performance-view .notice-container { - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color); - padding-bottom: 20vh; +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); } -#performance-view .notice-container button { - min-width: 30px; - min-height: 28px; - margin: 0; +#select-waterfall-view:hover, +#select-waterfall-view:hover:active, +#select-waterfall-view[checked] { + list-style-image: url(performance-icons.svg#details-waterfall-active); } -#performance-view .notice-container vbox { - text-align: center; +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); } -.console-profile-command { - font-family: monospace; - margin: 3px 2px; +#select-js-calltree-view:hover, +#select-js-calltree-view:hover:active, +#select-js-calltree-view[checked], +#select-memory-calltree-view:hover, +#select-memory-calltree-view:hover:active, +#select-memory-calltree-view[checked] { + list-style-image: url(performance-icons.svg#details-call-tree-active); } -#performance-view .realtime-message { - opacity: 0.5; - display: block; +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); } -#performance-view toolbarbutton.record-button { - padding: 5px; +#select-js-flamegraph-view:hover, +#select-js-flamegraph-view:hover:active, +#select-js-flamegraph-view[checked], +#select-memory-flamegraph-view:hover, +#select-memory-flamegraph-view:hover:active, +#select-memory-flamegraph-view[checked] { + list-style-image: url(performance-icons.svg#details-flamegraph-active); } -#performance-view toolbarbutton.record-button[checked], -#performance-view toolbarbutton.record-button[checked] { - color: var(--theme-selection-color); - background: var(--theme-selection-background); +/* Recording buttons */ + +#main-record-button { + list-style-image: url(profiler-stopwatch-tbutton.svg); } -.record-button[locked] { - pointer-events: none; - opacity: 0.5; +#empty-notice > .record-button, +#main-record-button:hover, +#main-record-button:hover:active { + list-style-image: url(profiler-stopwatch.svg); } -#performance-view .realtime-disabled-message, -#performance-view .realtime-disabled-on-e10s-message { - display: none; - /* This label does not want to wrap naturally (based on some combination of - it's parents and flex). Quick and dirty way to force it to wrap -> don't - let it get bigger than half the screen size */ - max-width: 60vw; +#main-record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: block; - opacity: 0.5; +#main-record-button .button-icon { + margin: 0; +} +#main-record-button .button-text { + display: none; } -#performance-view[e10s="unsupported"] .realtime-disabled-message { - display: block; - opacity: 0.5; + +.notice-container .record-button { + padding: 5px !important; } -#details-pane-container .buffer-status-message, -#details-pane-container .buffer-status-message-full { - display: none; +.notice-container .record-button[checked], +.notice-container .record-button[checked] { + color: var(--theme-selection-color) !important; + background: var(--theme-selection-background) !important; } -#details-pane-container[buffer-status="in-progress"] .buffer-status-message { - display: block; +.record-button[locked] { + pointer-events: none; opacity: 0.5; } -#details-pane-container[buffer-status="full"] .buffer-status-message { - display: block; - color: var(--theme-highlight-red); - font-weight: bold; - opacity: 1; +/* Sidebar & recording items */ + +.recording-item { + padding: 4px; } -#details-pane-container[buffer-status="full"] .buffer-status-message-full { - display: block; +.recording-item-title { + font-size: 110%; } -/* Overview Panel */ +.recording-item-footer { + padding-top: 4px; + font-size: 90%; +} -#main-record-button { - list-style-image: url(profiler-stopwatch-tbutton.svg); +.recording-item-save { + text-decoration: underline; + cursor: pointer; } -#empty-notice > .record-button, -#main-record-button:hover, -#main-record-button:hover:active { - list-style-image: url(profiler-stopwatch.svg); +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); } -#main-record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } -#main-record-button .button-icon { - margin: 0; + +/* Recording notices */ + +.notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; } -#main-record-button .button-text { +.console-profile-command { + font-family: monospace; + margin: 3px 2px; +} + +.realtime-disabled-message, +.realtime-disabled-on-e10s-message { display: none; } -/* Details Panel */ +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { + display: initial; + opacity: 0.5; -#select-waterfall-view { - list-style-image: url(performance-icons.svg#details-waterfall); } - -#select-waterfall-view:hover, -#select-waterfall-view:hover:active, -#select-waterfall-view[checked] { - list-style-image: url(performance-icons.svg#details-waterfall-active); +#performance-view[e10s="unsupported"] .realtime-disabled-message { + display: initial; + opacity: 0.5; } -#select-js-calltree-view, -#select-memory-calltree-view { - list-style-image: url(performance-icons.svg#details-call-tree); +.buffer-status-message, +.buffer-status-message-full { + display: none; } -#select-js-calltree-view:hover, -#select-js-calltree-view:hover:active, -#select-js-calltree-view[checked], -#select-memory-calltree-view:hover, -#select-memory-calltree-view:hover:active, -#select-memory-calltree-view[checked] { - list-style-image: url(performance-icons.svg#details-call-tree-active); +#details-pane-container[buffer-status="in-progress"] .buffer-status-message { + display: initial; + opacity: 0.5; } -#select-js-flamegraph-view, -#select-memory-flamegraph-view { - list-style-image: url(performance-icons.svg#details-flamegraph); +#details-pane-container[buffer-status="full"] .buffer-status-message { + display: initial; + color: var(--theme-highlight-red); + font-weight: bold; + opacity: 1; } -#select-js-flamegraph-view:hover, -#select-js-flamegraph-view:hover:active, -#select-js-flamegraph-view[checked], -#select-memory-flamegraph-view:hover, -#select-memory-flamegraph-view:hover:active, -#select-memory-flamegraph-view[checked] { - list-style-image: url(performance-icons.svg#details-flamegraph-active); +#details-pane-container[buffer-status="full"] .buffer-status-message-full { + display: initial; } /* Profile call tree */ .call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); overflow: auto; } @@ -302,7 +304,7 @@ background-color: var(--theme-tab-toolbar-background); } -.call-tree-item:last-child:not(:focus) { +.call-tree-item:last-child { border-bottom: 1px solid var(--cell-border-color); } @@ -318,7 +320,7 @@ background-color: var(--theme-selection-background); } -.call-tree-item:focus label { +.call-tree-item:focus description { color: var(--theme-selection-color) !important; } @@ -365,111 +367,110 @@ color: var(--theme-content-color2); } -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; } -.theme-dark .call-tree-zoom { - background-image: url(magnifying-glass.png); -} +/** + * Waterfall ticks header + */ -.theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light.png); +.waterfall-header-ticks { + overflow: hidden; } -@media (min-resolution: 1.25dppx) { - .theme-dark .call-tree-zoom { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light@2x.png); - } +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; } -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); } -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ } -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; } /** - * Details Waterfall Styles + * Markers waterfall breakdown */ -.waterfall-list-contents { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); +#waterfall-breakdown { overflow-x: hidden; overflow-y: auto; } -.waterfall-header-contents { - overflow-x: hidden; +.waterfall-tree-item:not([level="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(255,255,255,0.05) 2px, + rgba(255,255,255,0.05) 4px + ); } -.waterfall-background-ticks { - /* Background created on a in js. */ - /* @see browser/devtools/timeline/widgets/waterfall.js */ - background-image: -moz-element(#waterfall-background); - background-repeat: repeat-y; - background-position: -1px center; +.waterfall-tree-item[expandable] .waterfall-marker-bullet, +.waterfall-tree-item[expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(0,0,0,0.35) 5px, + rgba(0,0,0,0.35) 10px + ); } -.waterfall-marker-container[is-spacer] { - pointer-events: none; +.waterfall-tree-item[expanded], +.waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { + box-shadow: 0 -1px var(--cell-border-color-light); } -.waterfall-marker-container:not([is-spacer]):nth-child(2n) { - background-color: #403400; +.waterfall-tree-item:nth-child(2n) > .waterfall-marker { + background-color: var(--row-alt-background-color); } -.waterfall-marker-container:hover { - background-color: #FFCF00 !important; +.waterfall-tree-item:hover { + background-color: var(--row-hover-background-color); } -.waterfall-marker-item { - overflow: hidden; +.waterfall-tree-item:last-child { + border-bottom: 1px solid var(--cell-border-color); } -.waterfall-sidebar { - -moz-border-end: 1px solid var(--theme-splitter-color); +.waterfall-tree-item:focus { + background-color: var(--theme-selection-background); } -.waterfall-marker-container:hover > .waterfall-sidebar { - background-color: transparent; +.waterfall-tree-item:focus description { + color: var(--theme-selection-color) !important; } -.waterfall-header-name { - padding: 2px 4px; - font-size: 90%; -} +/** + * Marker left sidebar + */ -.waterfall-header-tick { - width: 100px; - font-size: 9px; - transform-origin: left center; - color: var(--theme-body-color); +.waterfall-sidebar { + -moz-border-end: 1px solid var(--cell-border-color); } -.waterfall-header-tick:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ +.waterfall-tree-item > .waterfall-sidebar:hover, +.waterfall-tree-item:hover > .waterfall-sidebar, +.waterfall-tree-item:focus > .waterfall-sidebar { + background: transparent; } .waterfall-marker-bullet { @@ -485,18 +486,30 @@ padding-bottom: 1px !important; } +/** + * Marker timebar + */ + +.waterfall-marker { + overflow: hidden; +} + .waterfall-marker-bar { height: 9px; transform-origin: left center; border-radius: 1px; } -.waterfall-marker-container.selected > .waterfall-sidebar, -.waterfall-marker-container.selected > .waterfall-marker-item { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); +.waterfall-marker > .theme-twisty { + /* Don't affect layout. */ + width: 14px; + -moz-margin-end: -14px; } +/** + * Marker details view + */ + #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; @@ -505,12 +518,33 @@ min-width: 50px; } +#waterfall-details > * { + padding-top: 3px; +} + .marker-details-bullet { width: 8px; height: 8px; border-radius: 1px; } +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} + +/** + * Marker colors + */ + menuitem.marker-color-graphs-purple:before, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); @@ -541,53 +575,6 @@ menuitem.marker-color-graphs-blue:before, background-color: var(--theme-graphs-blue); } -#waterfall-details > * { - padding-top: 3px; -} - -.marker-details-labelname { - -moz-padding-end: 4px; -} - -.marker-details-type { - font-size: 1.2em; - font-weight: bold; -} - -.marker-details-duration { - font-weight: bold; -} - -/* Recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - /* Profile call tree */ .call-tree-cells-container { @@ -870,8 +857,8 @@ call-tree-item:not([origin="content"]) .call-tree-line { /** * Configurable Options * - * Elements can be tagged with a class and visibility is controlled via a preference being - * applied or removed. + * Elements can be tagged with a class and visibility is controlled via a + * preference being applied or removed. */ /** diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css index b095b565..110c4bc8 100644 --- a/LCARStrek/browser/devtools/widgets.css +++ b/LCARStrek/browser/devtools/widgets.css @@ -858,7 +858,7 @@ -moz-padding-start: 6px; -moz-padding-end: 6px; transform: translateY(-50%); - font-size: 80%; + font-size: 0.8rem !important; z-index: 1; pointer-events: none; -- 2.43.0