Bug 936421 - Update the breadcrumbs as per Shorlander's new designs. OVERRIDE HOOK;r=pbrosset

browser/devtools/inspector/breadcrumbs.js

@@ -12,6 +12,9 @@ const ENSURE_SELECTION_VISIBLE_DELAY = 50; // ms
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
+const ELLIPSIS = Services.prefs.getComplexValue("intl.ellipsis", Ci.nsIPrefLocalizedString).data;
+const MAX_LABEL_LENGTH = 40;
 
 let promise = require("sdk/core/promise");
 
@@ -72,6 +75,17 @@ HTMLBreadcrumbs.prototype = {
   _init: function BC__init()
   {
     this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
+
+    // These separators are used for CSS purposes only, and are positioned
+    // off screen, but displayed with -moz-element.
+    this.separators = this.chromeDoc.createElement("box");
+    this.separators.className = "breadcrumb-separator-container";
+    this.separators.innerHTML =
+                      "<box id='breadcrumb-separator-before'></box>" +
+                      "<box id='breadcrumb-separator-after'></box>" +
+                      "<box id='breadcrumb-separator-normal'></box>";
+    this.container.parentNode.appendChild(this.separators);
+
     this.container.addEventListener("mousedown", this, true);
     this.container.addEventListener("keypress", this, true);
 
@@ -184,16 +198,15 @@ HTMLBreadcrumbs.prototype = {
     let pseudosLabel = this.chromeDoc.createElement("label");
     pseudosLabel.className = "breadcrumbs-widget-item-pseudo-classes plain";
 
-    tagLabel.textContent = aNode.tagName.toLowerCase();
+    let tagText = aNode.tagName.toLowerCase();
-    idLabel.textContent = aNode.id ? ("#" + aNode.id) : "";
+    let idText = aNode.id ? ("#" + aNode.id) : "";
+    let classesText = "";
 
     if (aNode.className) {
-      let classesText = "";
       let classList = aNode.className.split(/\s+/);
       for (let i = 0; i < classList.length; i++) {
         classesText += "." + classList[i];
       }
-      classesLabel.textContent = classesText;
     }
 
     // XXX: Until we have pseudoclass lock in the node.
@@ -201,6 +214,26 @@ HTMLBreadcrumbs.prototype = {
 
     }
 
+    // Figure out which element (if any) needs ellipsing.
+    // Substring for that element, then clear out any extras
+    // (except for pseudo elements).
+    let maxTagLength = MAX_LABEL_LENGTH;
+    let maxIdLength = MAX_LABEL_LENGTH - tagText.length;
+    let maxClassLength = MAX_LABEL_LENGTH - tagText.length - idText.length;
+
+    if (tagText.length > maxTagLength) {
+       tagText = tagText.substr(0, maxTagLength) + ELLIPSIS;
+       idText = classesText = "";
+    } else if (idText.length > maxIdLength) {
+       idText = idText.substr(0, maxIdLength) + ELLIPSIS;
+       classesText = "";
+    } else if (classesText.length > maxClassLength) {
+      classesText = classesText.substr(0, maxClassLength) + ELLIPSIS;
+    }
+
+    tagLabel.textContent = tagText;
+    idLabel.textContent = idText;
+    classesLabel.textContent = classesText;
     pseudosLabel.textContent = aNode.pseudoClassLocks.join("");
 
     fragment.appendChild(tagLabel);
@@ -360,6 +393,10 @@ HTMLBreadcrumbs.prototype = {
     this.container.removeEventListener("mousedown", this, true);
     this.container.removeEventListener("keypress", this, true);
     this.container = null;
+
+    this.separators.remove();
+    this.separators = null;
+
     this.nodeHierarchy = null;
   },
 

browser/devtools/shared/widgets/BreadcrumbsWidget.jsm

@@ -46,6 +46,17 @@ this.BreadcrumbsWidget = function BreadcrumbsWidget(aNode) {
   this._list.addEventListener("underflow", this._onUnderflow.bind(this), false);
   this._list.addEventListener("overflow", this._onOverflow.bind(this), false);
 
+
+  // These separators are used for CSS purposes only, and are positioned
+  // off screen, but displayed with -moz-element.
+  this._separators = this.document.createElement("box");
+  this._separators.className = "breadcrumb-separator-container";
+  this._separators.innerHTML =
+                    "<box id='breadcrumb-separator-before'></box>" +
+                    "<box id='breadcrumb-separator-after'></box>" +
+                    "<box id='breadcrumb-separator-normal'></box>";
+  this._parent.appendChild(this._separators);
+
   // This widget emits events that can be handled in a MenuContainer.
   EventEmitter.decorate(this);
 

browser/themes/linux/jar.mn

@@ -178,31 +178,9 @@ browser.jar:
   skin/classic/browser/devtools/editor-error.png       (devtools/editor-error.png)
   skin/classic/browser/devtools/editor-breakpoint.png  (devtools/editor-breakpoint.png)
   skin/classic/browser/devtools/editor-debug-location.png (devtools/editor-debug-location.png)
-  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
+  skin/classic/browser/devtools/breadcrumbs-divider@2x.png      (../shared/devtools/images/breadcrumbs-divider@2x.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png    (../shared/devtools/images/breadcrumbs-scrollbutton.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
   skin/classic/browser/devtools/splitview.css         (devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css       (devtools/styleeditor.css)
 * skin/classic/browser/devtools/shadereditor.css      (devtools/shadereditor.css)

browser/themes/osx/jar.mn

@@ -285,31 +285,9 @@ browser.jar:
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
   skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
   skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
-  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
+  skin/classic/browser/devtools/breadcrumbs-divider@2x.png      (../shared/devtools/images/breadcrumbs-divider@2x.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png    (../shared/devtools/images/breadcrumbs-scrollbutton.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
   skin/classic/browser/devtools/splitview.css               (devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css             (devtools/styleeditor.css)
 * skin/classic/browser/devtools/shadereditor.css            (devtools/shadereditor.css)

browser/themes/shared/devtools/debugger.inc.css

@@ -103,10 +103,6 @@
 
 /* Breadcrumbs stack frames view */
 
-.breadcrumbs-widget-item {
-  max-width: none;
-}
-
 .dbg-stackframe-details {
   -moz-padding-start: 4px;
 }

browser/themes/shared/devtools/widgets.inc.css

@@ -20,6 +20,8 @@
 
 .breadcrumbs-widget-container {
   -moz-margin-end: 3px;
+  max-height: 25px; /* Set max-height for proper sizing on linux */
+  height: 25px; /* Set height to prevent starting small waiting for content */
   /* A fake 1px-shadow is included in the border-images of the
      breadcrumbs-widget-items, to match toolbar-buttons style.
      This negative margin compensates the extra row of pixels created
@@ -27,77 +29,41 @@
   margin-bottom: -1px;
 }
 
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
 .scrollbutton-up,
 .scrollbutton-down {
   -moz-appearance: none;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  background: transparent;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset,
+  box-shadow: none;
-              0 0 0 1px hsla(210,16%,76%,.15) inset,
+  border: none;
-              0 1px 0 hsla(210,16%,76%,.15);
+  list-style-image: none;
-  border: 1px solid hsla(210,8%,5%,.45);
+  margin: 0;
-  margin: 0 0 1px;
+  padding: 0;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset,
-              0 1px 3px hsla(210,8%,5%,.25) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border-color: hsla(210,8%,5%,.6);
 }
 
 .scrollbutton-up > .toolbarbutton-icon,
 .scrollbutton-down > .toolbarbutton-icon {
   -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
+  width: 7px;
-  -moz-image-region: rect(0px,7px,16px,0px);
+  height: 16px;
-  margin: 0 5px;
+  background-size: 14px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+  background-image: url("breadcrumbs-scrollbutton.png");
+  list-style-image: none;
+  margin: 0 8px;
+  padding: 0;
+}
+
+@media (min-resolution: 2dppx) {
+  .scrollbutton-up > .toolbarbutton-icon,
+  .scrollbutton-down > .toolbarbutton-icon {
+    background-image: url("breadcrumbs-scrollbutton@2x.png");
+  }
 }
 
 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
+  background-position: -7px center;
 }
 
 .scrollbutton-up[disabled] > .toolbarbutton-icon,
@@ -105,165 +71,150 @@
   opacity: 0.5;
 }
 
+
+/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
+.scrollbutton-up:-moz-locale-dir(ltr),
+.scrollbutton-down:-moz-locale-dir(rtl) {
+  border-right: solid 1px rgba(255, 255, 255, .1);
+  border-left: solid 1px transparent;
+  box-shadow: 3px 0px 3px -3px #181d20;
+}
+
+.scrollbutton-down:-moz-locale-dir(ltr),
+.scrollbutton-up:-moz-locale-dir(rtl) {
+  border-right: solid 1px transparent;
+  border-left: solid 1px rgba(255, 255, 255, .1);
+  box-shadow: -3px 0px 3px -3px #181d20;
+}
+
+.scrollbutton-up[disabled],
+.scrollbutton-down[disabled] {
+  box-shadow: none;
+  border-color: transparent;
+}
+
 .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
 .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
   transform: scaleX(-1);
 }
 
+/* The breadcrumb separator elements are used as background images with
+ * -moz-element, so we position them offscreen since we don't care about
+ * seeing the original elements.
+ */
+.breadcrumb-separator-container {
+  position: fixed;
+  top: -1000px;
+  left: -1000px;
+}
+
+#breadcrumb-separator-before,
+#breadcrumb-separator-after,
+#breadcrumb-separator-normal {
+  width: 12px;
+  height: 25px;
+  overflow: hidden;
+}
+
+#breadcrumb-separator-before,
+#breadcrumb-separator-after:after {
+  background: #1d4f73;
+}
+
+#breadcrumb-separator-after,
+#breadcrumb-separator-before:after {
+  background: #343c45;
+}
+
+/* This chevron arrow cannot be replicated easily in CSS, so we are using
+ * a background image for it (still keeping it in a separate element so
+ * we can handle RTL support with a CSS transform).
+ */
+#breadcrumb-separator-normal {
+  background: url(breadcrumbs-divider@2x.png) no-repeat center right;
+  background-size: 12px 24px;
+}
+
+/* Fake a triangle by rotating a rectangle inside the elements */
+#breadcrumb-separator-before:after,
+#breadcrumb-separator-after:after {
+  content: "";
+  display: block;
+  width: 25px;
+  height: 25px;
+  transform: translateX(-18px) rotate(45deg);
+  -moz-box-sizing: border-box;
+}
+
 .breadcrumbs-widget-item {
   background-color: transparent;
   -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
   min-height: 25px;
-  border-style: solid;
+  min-width: 65px;
-  border-width: 1px 13px 2px 13px;
+  margin: 0;
-  margin: 0 -11px 0 0;
+  padding: 0 8px 0 20px;
-  padding: 0 9px;
+  border: none;
   outline: none;
   color: hsl(210,30%,85%);
 }
 
-.breadcrumbs-widget-item:-moz-focusring > label {
+.breadcrumbs-widget-item:not([checked]) {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+  background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
 }
 
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
-  color: hsl(208,100%,60%);
+  background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
 }
 
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
+.breadcrumbs-widget-item[checked] {
-  color: hsl(205,100%,70%);
+  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
+  background-color: #1d4f73;
 }
 
+.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:-moz-locale-dir(rtl) {
+  padding: 0 20px 0 8px;
+}
+
+.breadcrumbs-widget-item:-moz-locale-dir(rtl),
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+  background-position: center right;
+}
+
+#breadcrumb-separator-before:-moz-locale-dir(rtl),
+#breadcrumb-separator-after:-moz-locale-dir(rtl),
+#breadcrumb-separator-normal:-moz-locale-dir(rtl) {
+  transform:  scaleX(-1);
+}
+
+#breadcrumb-separator-before:-moz-locale-dir(rtl):after,
+#breadcrumb-separator-after:-moz-locale-dir(rtl):after {
+  transform: translateX(-5px) rotate(45deg);
+}
+
+.breadcrumbs-widget-item:not([checked]):hover label {
+  color: white;
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
+  color: #f5f7fa;
 }
 
 .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item-classes {
-  color: #8d99a6;
+  color: #b6babf;
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
+  color: #d99b28;
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
 }
 
 /* SimpleListWidget */

browser/themes/windows/jar.mn

@@ -207,31 +207,9 @@ browser.jar:
 *       skin/classic/browser/devtools/webconsole.css                (devtools/webconsole.css)
         skin/classic/browser/devtools/webconsole_networkpanel.css   (devtools/webconsole_networkpanel.css)
         skin/classic/browser/devtools/webconsole.png                (devtools/webconsole.png)
-        skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
+        skin/classic/browser/devtools/breadcrumbs-divider@2x.png    (../shared/devtools/images/breadcrumbs-divider@2x.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
+        skin/classic/browser/devtools/breadcrumbs-scrollbutton.png  (../shared/devtools/images/breadcrumbs-scrollbutton.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
+        skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
         skin/classic/browser/devtools/splitview.css                 (devtools/splitview.css)
         skin/classic/browser/devtools/styleeditor.css               (devtools/styleeditor.css)
 *       skin/classic/browser/devtools/shadereditor.css              (devtools/shadereditor.css)
@@ -533,31 +511,9 @@ browser.jar:
 *       skin/classic/aero/browser/devtools/webconsole.css                  (devtools/webconsole.css)
         skin/classic/aero/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
         skin/classic/aero/browser/devtools/webconsole.png                  (devtools/webconsole.png)
-        skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
+        skin/classic/aero/browser/devtools/breadcrumbs-divider@2x.png      (../shared/devtools/images/breadcrumbs-divider@2x.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
+        skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton.png    (../shared/devtools/images/breadcrumbs-scrollbutton.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
+        skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
         skin/classic/aero/browser/devtools/splitview.css             (devtools/splitview.css)
         skin/classic/aero/browser/devtools/styleeditor.css           (devtools/styleeditor.css)
 *       skin/classic/aero/browser/devtools/shadereditor.css          (devtools/shadereditor.css)