From 2cd600fbac3c65c635eeda7efb8bc1a15d59b87f Mon Sep 17 00:00:00 2001 From: Darren Hobin Date: Sun, 24 Sep 2017 10:59:43 -0400 Subject: [PATCH] Bug 1399948 - Part 2: Implement photon styles for breadcrumbs. r=bgrins MozReview-Commit-ID: IQX8uDsSapO --HG-- rename : devtools/client/themes/images/firebug/breadcrumbs-divider.svg => devtools/client/themes/images/breadcrumbs-divider.svg extra : rebase_source : 16884623659f0ede21b1697a8f03cf6ebf0ee283 --- devtools/client/jar.mn | 2 +- devtools/client/themes/breadcrumbs.css | 136 +++--------------- .../{firebug => }/breadcrumbs-divider.svg | 0 3 files changed, 19 insertions(+), 119 deletions(-) rename devtools/client/themes/images/{firebug => }/breadcrumbs-divider.svg (100%) diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 1f34e2f476d0..50e1e9b3fd92 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -115,6 +115,7 @@ devtools.jar: skin/toolbox.css (themes/toolbox.css) skin/tooltips.css (themes/tooltips.css) skin/images/add.svg (themes/images/add.svg) + skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg) skin/images/filters.svg (themes/images/filters.svg) skin/images/filter-swatch.svg (themes/images/filter-swatch.svg) skin/images/grid.svg (themes/images/grid.svg) @@ -273,7 +274,6 @@ devtools.jar: skin/images/firebug/play.svg (themes/images/firebug/play.svg) skin/images/firebug/rewind.svg (themes/images/firebug/rewind.svg) skin/images/firebug/disable.svg (themes/images/firebug/disable.svg) - skin/images/firebug/breadcrumbs-divider.svg (themes/images/firebug/breadcrumbs-divider.svg) skin/images/firebug/breakpoint.svg (themes/images/firebug/breakpoint.svg) skin/images/firebug/tool-options.svg (themes/images/firebug/tool-options.svg) skin/images/firebug/debugger-step-in.svg (themes/images/firebug/debugger-step-in.svg) diff --git a/devtools/client/themes/breadcrumbs.css b/devtools/client/themes/breadcrumbs.css index 0677fe91304f..8bf147a5e1e0 100644 --- a/devtools/client/themes/breadcrumbs.css +++ b/devtools/client/themes/breadcrumbs.css @@ -87,15 +87,10 @@ .breadcrumbs-widget-item { background-color: transparent; - -moz-appearance: none; - min-height: 24px; - min-width: 65px; - margin: 0; - padding: 0 8px 0 20px; border: none; - outline: none; - color: hsl(210,30%,85%); - position: relative; + margin-inline-start: 10px; + margin-inline-end: 1px; + padding: 0 0 2px 0; } .breadcrumbs-widget-item > .button-box { @@ -108,32 +103,10 @@ border-width: 0; } -.breadcrumbs-widget-item::before { - content: ""; - position: absolute; - top: 1px; - offset-inline-start: 0; - width: 12px; - height: 22px; - background-repeat: no-repeat; - /* Given the 1/2 aspect ratio of the separator pseudo-element and the 45deg angle of - the arrow shape, we need the arrow edges to be at this position from the start of - the gradient line. */ - --position: 66.5%; - /* The color of the thin line in the arrow-shaped separator between 2 unselected - crumbs. There is no theme variable for this, this used to be an image. */ - --line-color: #ACACAC; - --background-color: var(--theme-body-background); -} - #debugger-toolbar .breadcrumbs-widget-item::before { --background-color: var(--theme-toolbar-background); } -.theme-dark .breadcrumbs-widget-item::before { - --line-color: #6E6E6E; -} - .breadcrumbs-widget-item:first-child::before { /* The first crumb does not need any separator before itself */ content: unset; @@ -143,68 +116,6 @@ transform: scaleX(-1); } -.breadcrumbs-widget-item:not([checked])::before { - background-color: var(--background-color); - background-image: - linear-gradient(45deg, - var(--background-color) 30%, - transparent), - linear-gradient(-45deg, - transparent, - var(--background-color) 70%, - var(--background-color)), - linear-gradient(45deg, - transparent var(--position), - var(--line-color) var(--position), - var(--line-color) calc(var(--position) + 1px), - transparent 0), - linear-gradient(-45deg, - transparent calc(100% - var(--position)), - var(--line-color) calc(100% - var(--position)), - var(--line-color) calc(calc(100% - var(--position)) + 1px), - transparent 0); - background-size: - 100% 50%, - 100% 50%, - 100%, - 100%; - background-position: - left bottom, - left top, - left top, - left top; -} - -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item::before { - background-color: var(--theme-selection-background); - background-image: - linear-gradient(45deg, - transparent var(--position), - var(--background-color) 0), - linear-gradient(-45deg, - var(--background-color) calc(100% - var(--position)), - transparent 0); - background-size: unset; -} - -.breadcrumbs-widget-item[checked]::before { - background-image: - linear-gradient(45deg, - transparent var(--position), - var(--theme-selection-background) 0), - linear-gradient(-45deg, - var(--theme-selection-background) calc(100% - var(--position)), - var(--background-color) 0); -} - -.breadcrumbs-widget-item[checked] { - background-color: var(--theme-selection-background); -} - -.breadcrumbs-widget-item:first-child { - background-image: none; -} - /* RTL support: move the images that were on the left to the right, * and move images that were on the right to the left. */ @@ -217,11 +128,23 @@ background-position: center right; } -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, +.breadcrumbs-widget-item:not(:first-child)::before { + content: url(chrome://devtools/skin/images/breadcrumbs-divider.svg); + background: none; + position: relative; + left: -3px; + margin: 0 4px 0 -1px; + top: -1px; +} + +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id { + color: var(--theme-highlight-purple); +} + .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { - color: var(--theme-selection-color); + color: var(--theme-highlight-blue); } .theme-dark .breadcrumbs-widget-item { @@ -244,34 +167,16 @@ color: var(--theme-highlight-lightorange); } -.theme-dark .breadcrumbs-widget-item:not([checked]):hover label { - color: white; -} - -.theme-light .breadcrumbs-widget-item:not([checked]):hover label { - color: black; -} - /* Firebug theme support for breadcrumbs widget. */ .theme-firebug .breadcrumbs-widget-item { - margin-inline-start: 10px; - margin-inline-end: 1px; - background-image: none; border: 1px solid transparent; - color: #141414; border-radius: 2px; - min-width: 0; - min-height: 0; padding: 0; - font-size: var(--theme-toolbar-font-size); } .theme-firebug .breadcrumbs-widget-item:hover { border-color: rgba(0, 0, 0, 0.2); - background: transparent linear-gradient( - rgba(255, 255, 255, 0.4), - rgba(255, 255, 255, 0.2)) no-repeat; box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset, 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 2px rgba(0, 0, 0, 0.05); @@ -287,13 +192,8 @@ } .theme-firebug .breadcrumbs-widget-item:not(:first-child)::before { - content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg); - background: none; - position: relative; - left: -3px; margin: 0 0 0 -5px; - padding: 0; - width: 5px; + top: 0; } /* Breadcrumbs Separators (reset selection styles) */ diff --git a/devtools/client/themes/images/firebug/breadcrumbs-divider.svg b/devtools/client/themes/images/breadcrumbs-divider.svg similarity index 100% rename from devtools/client/themes/images/firebug/breadcrumbs-divider.svg rename to devtools/client/themes/images/breadcrumbs-divider.svg