From 0518f7e2fcc8710698593b52ab0a811d374de7bb Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Sat, 2 Apr 2016 16:13:00 -0400 Subject: [PATCH] Bug 1261642 - Various theme cleanups for Canvas Debugger, Shader Editor, Web Audio Editor and Performance tool. r=vporof MozReview-Commit-ID: BrwIbsfvs8o --HG-- extra : rebase_source : ee2481df3fd5f0435d1276c6c52c23345239f609 --- devtools/client/themes/canvasdebugger.css | 90 +++++++++-------------- devtools/client/themes/performance.css | 11 ++- devtools/client/themes/shadereditor.css | 5 -- devtools/client/themes/webaudioeditor.css | 9 --- 4 files changed, 39 insertions(+), 76 deletions(-) diff --git a/devtools/client/themes/canvasdebugger.css b/devtools/client/themes/canvasdebugger.css index 0949cb36d8f4..d98999006304 100644 --- a/devtools/client/themes/canvasdebugger.css +++ b/devtools/client/themes/canvasdebugger.css @@ -8,11 +8,21 @@ --checkerboard-pattern: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); } + +:root.theme-dark { + --draw-call-background: rgba(112,191,83,0.15); + --interesting-call-background: rgba(223,128,255,0.15); +} + +:root.theme-light { + --draw-call-background: rgba(44,187,15,0.1); + --interesting-call-background: rgba(184,46,229,0.1); +} + /* Reload and waiting notices */ .notice-container { margin-top: -50vh; - background-color: var(--theme-toolbar-background); color: var(--theme-body-color-alt); } @@ -33,9 +43,8 @@ /* Snapshots pane */ -#snapshots-pane > tabs, -#snapshots-pane .devtools-toolbar { - -moz-border-end: 1px solid var(--theme-splitter-color); +#snapshots-pane { + border-inline-end: 1px solid var(--theme-splitter-color); } #record-snapshot { @@ -61,7 +70,7 @@ } .snapshot-item-details { - -moz-padding-start: 6px; + padding-inline-start: 6px; } .snapshot-item-calls { @@ -134,7 +143,7 @@ } #calls-slider { - -moz-padding-end: 24px; + padding-inline-end: 24px; } #calls-slider .scale-slider { @@ -154,44 +163,24 @@ background: transparent; } -#calls-list .side-menu-widget-item { - padding: 0; -} - /* Calls list items */ -.theme-dark #calls-list .side-menu-widget-item { - border-color: #111; +#calls-list .side-menu-widget-item { + padding: 0; + border-color: var(--theme-splitter-color); border-bottom-color: transparent; } -.theme-light #calls-list .side-menu-widget-item { - border-color: #eee; - border-bottom-color: transparent; +.call-item-view:hover { + background-color: rgba(128,128,128,0.05); } -.theme-dark .call-item-view:hover { - background-color: rgba(255,255,255,.025); +.call-item-view[draw-call] { + background-color: var(--draw-call-background); } -.theme-light .call-item-view:hover { - background-color: rgba(0,0,0,.025); -} - -.theme-dark .call-item-view[draw-call] { - background-color: rgba(112,191,83,0.15); -} - -.theme-light .call-item-view[draw-call] { - background-color: rgba(44,187,15,0.1); -} - -.theme-dark .call-item-view[interesting-call] { - background-color: rgba(223,128,255,0.15); -} - -.theme-light .call-item-view[interesting-call] { - background-color: rgba(184,46,229,0.1); +.call-item-view[interesting-call] { + background-color: var(--interesting-call-background); } .call-item-gutter { @@ -200,8 +189,10 @@ padding-inline-end: 4px; padding-top: 2px; padding-bottom: 2px; - -moz-border-end: 1px solid; - -moz-margin-end: 6px; + border-inline-end: 1px solid var(--theme-splitter-color); + margin-inline-end: 6px; + background-color: var(--theme-sidebar-background); + color: var(--theme-content-color3); } .selected .call-item-gutter { @@ -217,12 +208,6 @@ } } -.call-item-gutter { - background-color: var(--theme-sidebar-background); - color: var(--theme-content-color3); - border-color: var(--theme-splitter-color); -} - .call-item-index { text-align: end; } @@ -236,11 +221,12 @@ } .call-item-location { - -moz-padding-start: 2px; - -moz-padding-end: 6px; + padding-inline-start: 2px; + padding-inline-end: 6px; text-align: end; cursor: pointer; color: var(--theme-highlight-bluegrey); + border-color: var(--theme-splitter-color); } .call-item-location:hover { @@ -252,16 +238,8 @@ text-decoration: underline; } -.theme-dark .call-item-location { - border-color: #111; -} - -.theme-light .call-item-location { - border-color: #eee; -} - .call-item-stack { - -moz-padding-start: calc(var(--gutter-width) + var(--gutter-padding-start)); + padding-inline-start: calc(var(--gutter-width) + var(--gutter-padding-start)); padding-bottom: 10px; } @@ -279,8 +257,8 @@ } .call-item-stack-fn-location { - -moz-padding-start: 2px; - -moz-padding-end: 6px; + padding-inline-start: 2px; + padding-inline-end: 6px; text-align: end; cursor: pointer; text-decoration: underline; diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css index f15d4f6cbf59..3aa9bf2cf072 100644 --- a/devtools/client/themes/performance.css +++ b/devtools/client/themes/performance.css @@ -105,9 +105,12 @@ /* Sidebar & recording items */ +#recordings-pane { + border-inline-end: 1px solid var(--theme-splitter-color); +} + #recordings-list { max-width: 300px; - border-inline-end: 1px solid var(--theme-splitter-color); } .recording-item { @@ -166,11 +169,7 @@ display: none; } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: initial; - opacity: 0.5; - -} +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message, #performance-view[e10s="unsupported"] .realtime-disabled-message { display: initial; opacity: 0.5; diff --git a/devtools/client/themes/shadereditor.css b/devtools/client/themes/shadereditor.css index 4f774699180f..8b169a2667a0 100644 --- a/devtools/client/themes/shadereditor.css +++ b/devtools/client/themes/shadereditor.css @@ -6,7 +6,6 @@ .notice-container { margin-top: -50vh; - background-color: var(--theme-toolbar-background); color: var(--theme-body-color-alt); } @@ -24,10 +23,6 @@ min-width: 150px; } -#shaders-pane + .devtools-side-splitter { - border-color: transparent; -} - .program-item { padding: 2px 0px; } diff --git a/devtools/client/themes/webaudioeditor.css b/devtools/client/themes/webaudioeditor.css index f028b3297e7a..3fa60529c115 100644 --- a/devtools/client/themes/webaudioeditor.css +++ b/devtools/client/themes/webaudioeditor.css @@ -5,7 +5,6 @@ /* Reload and waiting notices */ .notice-container { margin-top: -50vh; - background-color: var(--theme-toolbar-background); color: var(--theme-body-color-alt); } @@ -62,15 +61,7 @@ g.edgeLabel tspan { .nodes rect { stroke-width: 1px; cursor: pointer; -} - -.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); }