Bug 1399948 - Part 2: Implement photon styles for breadcrumbs. r=bgrins
authorDarren Hobin <darrenhobin@live.com>
Sun, 24 Sep 2017 10:59:43 -0400
changeset 384053 b8c11514db364abd3e1ee099d55f1106e48e3bfc
parent 383980 32fa20aaa56cfb063433ff46f202e99eb35043d7
child 384054 f693bf1345f941592b1ce19514a2bbf00e6ef06a
push id32619
push userarchaeopteryx@coole-files.de
push dateTue, 03 Oct 2017 09:41:33 +0000
treeherdermozilla-central@14841c4d8a97 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1399948
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1399948 - Part 2: Implement photon styles for breadcrumbs. r=bgrins MozReview-Commit-ID: IQX8uDsSapO
devtools/client/jar.mn
devtools/client/themes/breadcrumbs.css
devtools/client/themes/images/breadcrumbs-divider.svg
devtools/client/themes/images/firebug/breadcrumbs-divider.svg
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -110,16 +110,17 @@ devtools.jar:
     skin/devtools-browser.css (themes/devtools-browser.css)
     skin/dark-theme.css (themes/dark-theme.css)
     skin/light-theme.css (themes/light-theme.css)
     skin/firebug-theme.css (themes/firebug-theme.css)
     skin/toolbars.css (themes/toolbars.css)
     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)
     skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/images/controls.png (themes/images/controls.png)
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
@@ -268,17 +269,16 @@ devtools.jar:
     skin/images/firebug/twisty-open-firebug.svg (themes/images/firebug/twisty-open-firebug.svg)
     skin/images/firebug/arrow-down.svg (themes/images/firebug/arrow-down.svg)
     skin/images/firebug/arrow-up.svg (themes/images/firebug/arrow-up.svg)
     skin/images/firebug/close.svg (themes/images/firebug/close.svg)
     skin/images/firebug/pause.svg (themes/images/firebug/pause.svg)
     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)
     skin/images/firebug/debugger-step-out.svg (themes/images/firebug/debugger-step-out.svg)
     skin/images/firebug/debugger-step-over.svg (themes/images/firebug/debugger-step-over.svg)
     skin/images/firebug/pane-collapse.svg (themes/images/firebug/pane-collapse.svg)
     skin/images/firebug/pane-expand.svg (themes/images/firebug/pane-expand.svg)
     skin/images/firebug/dock-undock.svg (themes/images/firebug/dock-undock.svg)
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -82,151 +82,74 @@
 .scrollbutton-up > .toolbarbutton-icon:dir(rtl),
 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr):not(:dir(rtl)),
 .scrollbutton-down > .toolbarbutton-icon:dir(ltr) {
   transform: scaleX(-1);
 }
 
 .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 {
   border: none;
   padding-top: 0;
   padding-bottom: 0;
 }
 
 :root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box {
   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;
 }
 
 .breadcrumbs-widget-item:dir(rtl)::before {
   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.
  */
 .breadcrumbs-widget-item:dir(rtl) {
   padding: 0 20px 0 8px;
 }
 
 .breadcrumbs-widget-item:dir(rtl),
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:dir(rtl) {
   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 {
   color: var(--theme-selection-color);
 }
 
 .theme-light .breadcrumbs-widget-item {
   color: var(--theme-body-color);
@@ -239,66 +162,43 @@
 .breadcrumbs-widget-item-classes {
   color: var(--theme-content-color1);
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
   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);
 }
 
 .theme-firebug .breadcrumbs-widget-item > .button-box {
   padding-left: 0;
   padding-right: 0;
 }
 
 .theme-firebug .breadcrumbs-widget-item:first-child {
   margin: 0;
 }
 
 .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) */
 .theme-firebug .breadcrumbs-widget-item[checked],
 .theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 .theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 .theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 .theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
rename from devtools/client/themes/images/firebug/breadcrumbs-divider.svg
rename to devtools/client/themes/images/breadcrumbs-divider.svg