From d9b2b9c1181da47fba5be683e1a3bb325d80ef6d Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Fri, 1 Sep 2017 10:47:11 -0400 Subject: [PATCH] Bug 1391003 - Use the new photon line selection and hover background colors in devtool. r=bgrins --- devtools/client/debugger/new/debugger.css | 4 ++-- .../client/inspector/markup/views/markup-container.js | 10 ++++------ devtools/client/jsonview/css/toolbar.css | 2 +- .../client/netmonitor/src/assets/styles/netmonitor.css | 2 +- devtools/client/shared/components/tree/tree-view.css | 2 +- devtools/client/shared/widgets/cubic-bezier.css | 2 +- devtools/client/themes/animationinspector.css | 3 ++- devtools/client/themes/common.css | 2 +- devtools/client/themes/dark-theme.css | 5 ----- devtools/client/themes/light-theme.css | 4 ---- devtools/client/themes/markup.css | 5 +++++ devtools/client/themes/tooltips.css | 2 +- devtools/client/themes/variables.css | 10 +++++----- devtools/client/themes/webconsole.css | 2 +- 14 files changed, 25 insertions(+), 30 deletions(-) diff --git a/devtools/client/debugger/new/debugger.css b/devtools/client/debugger/new/debugger.css index 73a8eab186f6..84171bea14c5 100644 --- a/devtools/client/debugger/new/debugger.css +++ b/devtools/client/debugger/new/debugger.css @@ -829,7 +829,7 @@ html .arrow.expanded svg { } .theme-dark .managed-tree .tree .node.focused { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); padding-bottom: 2px; } @@ -2199,7 +2199,7 @@ html[dir="rtl"] .editor-mount { } .editor-wrapper .highlight-lines { - background: var(--theme-selection-background-semitransparent); + background: var(--theme-selection-background-hover); } .coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line, diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js index d2a449481b4d..71a62b0fa45f 100644 --- a/devtools/client/inspector/markup/views/markup-container.js +++ b/devtools/client/inspector/markup/views/markup-container.js @@ -624,17 +624,15 @@ MarkupContainer.prototype = { this._hovered = value; if (value) { if (!this.selected) { - this.tagState.classList.add("theme-bg-darker"); + this.tagState.classList.add("tag-hover"); } if (this.closeTagLine) { - this.closeTagLine.querySelector(".tag-state").classList.add( - "theme-bg-darker"); + this.closeTagLine.querySelector(".tag-state").classList.add("tag-hover"); } } else { - this.tagState.classList.remove("theme-bg-darker"); + this.tagState.classList.remove("tag-hover"); if (this.closeTagLine) { - this.closeTagLine.querySelector(".tag-state").classList.remove( - "theme-bg-darker"); + this.closeTagLine.querySelector(".tag-state").classList.remove("tag-hover"); } } }, diff --git a/devtools/client/jsonview/css/toolbar.css b/devtools/client/jsonview/css/toolbar.css index 7efe85e44b2c..7dbedf031c53 100644 --- a/devtools/client/jsonview/css/toolbar.css +++ b/devtools/client/jsonview/css/toolbar.css @@ -38,6 +38,6 @@ } .toolbar .btn:not([disabled]):hover:active { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); } diff --git a/devtools/client/netmonitor/src/assets/styles/netmonitor.css b/devtools/client/netmonitor/src/assets/styles/netmonitor.css index cda03ac63921..b1b4cc618272 100644 --- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css +++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css @@ -742,7 +742,7 @@ body, } .request-list-item:not(.selected):hover { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); } .request-list-item.fromCache > .requests-list-column:not(.requests-list-waterfall) { diff --git a/devtools/client/shared/components/tree/tree-view.css b/devtools/client/shared/components/tree/tree-view.css index ff56bc1c60c9..a6a19bd62438 100644 --- a/devtools/client/shared/components/tree/tree-view.css +++ b/devtools/client/shared/components/tree/tree-view.css @@ -182,7 +182,7 @@ .theme-light .treeTable .treeRow:hover, .theme-dark .treeTable .treeRow:hover { - background-color: var(--theme-selection-background-semitransparent) !important; + background-color: var(--theme-selection-background-hover) !important; } .theme-firebug .treeTable .treeRow:hover { diff --git a/devtools/client/shared/widgets/cubic-bezier.css b/devtools/client/shared/widgets/cubic-bezier.css index 7a808dc86222..27c96f73c62b 100644 --- a/devtools/client/shared/widgets/cubic-bezier.css +++ b/devtools/client/shared/widgets/cubic-bezier.css @@ -212,6 +212,6 @@ .cubic-bezier-container .active-preset canvas, .cubic-bezier-container .active-preset:hover canvas { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); border-color: var(--theme-selection-background); } diff --git a/devtools/client/themes/animationinspector.css b/devtools/client/themes/animationinspector.css index 39a8f1c7842c..db12fa31393f 100644 --- a/devtools/client/themes/animationinspector.css +++ b/devtools/client/themes/animationinspector.css @@ -377,7 +377,8 @@ body { } .animation-timeline .animation.selected { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); + z-index: -1; } .animation-timeline .animation:last-child { diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css index 50c53e8cf8f7..95abea02224b 100644 --- a/devtools/client/themes/common.css +++ b/devtools/client/themes/common.css @@ -342,7 +342,7 @@ checkbox:-moz-focusring { .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active, .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); } .devtools-toolbarbutton:not([disabled])[label][checked=true], diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css index 3b57a2cea5a3..2665864a9b54 100644 --- a/devtools/client/themes/dark-theme.css +++ b/devtools/client/themes/dark-theme.css @@ -27,10 +27,6 @@ body { color: var(--theme-selection-color); } -.theme-bg-darker { - background-color: var(--theme-selection-background-semitransparent); -} - .theme-selected, .CodeMirror-hint-active { background-color: var(--theme-selection-background); @@ -58,7 +54,6 @@ body { color: var(--theme-highlight-blue); } - .theme-comment, .cm-s-mozilla .cm-meta, .cm-s-mozilla .cm-hr, diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css index 25e5ee5f7507..eb99c1f5b416 100644 --- a/devtools/client/themes/light-theme.css +++ b/devtools/client/themes/light-theme.css @@ -27,10 +27,6 @@ body { color: var(--theme-selection-color); } -.theme-bg-darker { - background: var(--theme-selection-background-semitransparent); -} - .theme-selected, .CodeMirror-hint-active { background-color: var(--theme-selection-background); diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index 823681cc6800..ee5fca8de247 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -175,6 +175,11 @@ ul.children + .tag-line::before { z-index: 0; } +.tag-line .tag-hover:not(.theme-selected) { + background: var(--theme-selection-background-hover); + z-index: -1; +} + .expander { display: inline-block; margin-left: -14px; diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css index e5db9735d8ea..5ab07f2bc8b4 100644 --- a/devtools/client/themes/tooltips.css +++ b/devtools/client/themes/tooltips.css @@ -396,7 +396,7 @@ } .stack-frame-call:hover { - background-color: var(--theme-selection-background-semitransparent); + background-color: var(--theme-selection-background-hover); } .stack-frame-async { diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css index 4f42b57af7e5..56788d839e14 100644 --- a/devtools/client/themes/variables.css +++ b/devtools/client/themes/variables.css @@ -25,8 +25,8 @@ --theme-toolbar-background-alt: #f5f5f5; --theme-toolbar-hover: rgba(170, 170, 170, .2); --theme-toolbar-hover-active: rgba(170, 170, 170, .4); - --theme-selection-background: #4c9ed9; - --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15); + --theme-selection-background: var(--blue-55); + --theme-selection-background-hover: #F0F9FE; --theme-selection-color: #f5f7fa; --theme-splitter-color: #dde1e4; --theme-comment: #696969; @@ -93,8 +93,8 @@ --theme-toolbar-background-alt: #2F343E; --theme-toolbar-hover: rgba(110, 120, 130, 0.1); --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2); - --theme-selection-background: #5675B9; - --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5); + --theme-selection-background: #204E8A; + --theme-selection-background-hover: #353B48; --theme-selection-color: #f5f7fa; --theme-splitter-color: #454d5d; --theme-comment: #757873; @@ -159,7 +159,7 @@ --theme-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent); --theme-toolbar-tab-selected-background: rgb(253, 253, 253); --theme-selection-background: #3399ff; - --theme-selection-background-semitransparent: rgba(128,128,128,0.2); + --theme-selection-background-hover: rgba(128,128,128,0.2); --theme-selection-color: white; --theme-splitter-color: #bfbfbf; --theme-comment: darkgreen; diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css index bf38d00fc01e..4e55e233bac0 100644 --- a/devtools/client/themes/webconsole.css +++ b/devtools/client/themes/webconsole.css @@ -630,7 +630,7 @@ a.learn-more-link.webconsole-learn-more-link { padding: 0 1px; -moz-box-align: stretch; --toolbarbutton-checked-color: var(--theme-body-color); - --toolbarbutton-checked-background: var(--theme-selection-background-semitransparent); + --toolbarbutton-checked-background: var(--theme-selection-background-hover); } .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {