Backed out 3 changesets (bug 1921758, bug 1916650, bug 1916656) for causing failures at browser_inspector_breadcrumbs_keybinding.js. CLOSED TREE

Backed out changeset 446f010a8fba (bug 1916650)
Backed out changeset 08dc66cce1b1 (bug 1921758)
Backed out changeset a15a6ca0664a (bug 1916656)

devtools/client/inspector/breadcrumbs.js

@@ -681,13 +681,10 @@ HTMLBreadcrumbs.prototype = {
       this.currentIndex > -1 &&
       this.currentIndex < this.nodeHierarchy.length
     ) {
-      this.nodeHierarchy[this.currentIndex].button.setAttribute(
-        "aria-pressed",
-        "false"
-      );
+      this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
     }
     if (index > -1) {
-      this.nodeHierarchy[index].button.setAttribute("aria-pressed", "true");
+      this.nodeHierarchy[index].button.setAttribute("checked", "true");
     } else {
       // Unset active active descendant when all buttons are unselected.
       this.outer.removeAttribute("aria-activedescendant");

devtools/client/inspector/test/browser_inspector_breadcrumbs.js

@@ -82,10 +82,8 @@ add_task(async function () {
       );
     }
 
-    const pressedButton = container.querySelector(
-      `button[aria-pressed="true"]`
-    );
-    const labelId = pressedButton.querySelector(".breadcrumbs-widget-item-id");
+    const checkedButton = container.querySelector("button[checked]");
+    const labelId = checkedButton.querySelector(".breadcrumbs-widget-item-id");
     const id = inspector.selection.nodeFront.id;
     is(
       labelId.textContent,
@@ -93,7 +91,7 @@ add_task(async function () {
       "Node " + node.selector + ": selection matches"
     );
 
-    const labelTag = pressedButton.querySelector(
+    const labelTag = checkedButton.querySelector(
       ".breadcrumbs-widget-item-tag"
     );
     is(
@@ -103,7 +101,7 @@ add_task(async function () {
     );
 
     is(
-      pressedButton.getAttribute("title"),
+      checkedButton.getAttribute("title"),
       node.title,
       "Node " + node.selector + " has the expected tooltip"
     );
@@ -145,14 +143,14 @@ async function testComments(inspector, container) {
   info("Checking for comment elements");
 
   const breadcrumbs = inspector.breadcrumbs;
-  const pressedButtonIndex = 2;
-  const button = container.childNodes[pressedButtonIndex];
+  const checkedButtonIndex = 2;
+  const button = container.childNodes[checkedButtonIndex];
 
   let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
   button.click();
   await onBreadcrumbsUpdated;
 
-  is(breadcrumbs.currentIndex, pressedButtonIndex, "New button is selected");
+  is(breadcrumbs.currentIndex, checkedButtonIndex, "New button is selected");
   ok(
     breadcrumbs.outer.hasAttribute("aria-activedescendant"),
     "Active descendant must be set"
@@ -169,7 +167,7 @@ async function testComments(inspector, container) {
   is(
     breadcrumbs.currentIndex,
     -1,
-    "When comment is selected no breadcrumb should be pressed"
+    "When comment is selected no breadcrumb should be checked"
   );
   ok(
     !breadcrumbs.outer.hasAttribute("aria-activedescendant"),
@@ -183,7 +181,7 @@ async function testComments(inspector, container) {
 
   is(
     breadcrumbs.currentIndex,
-    pressedButtonIndex,
+    checkedButtonIndex,
     "Same button is selected again"
   );
   ok(

devtools/client/themes/breadcrumbs.css

@@ -3,14 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  :root {
-  --breadcrumb-id-class-color: light-dark(#909090, var(--theme-text-color-strong));
-  --breadcrumb-tag-color: light-dark(var(--theme-body-color), var(--theme-contrast-color));
+  --breadcrumb-id-class-color: #909090;
+ }
 
-  &[forced-colors-active] {
-    --breadcrumb-id-class-color: ButtonText;
-    --breadcrumb-tag-color: ButtonText;
-  }
-}
+ .theme-dark:root {
+  --breadcrumb-id-class-color: var(--theme-text-color-strong);
+ }
 
 /* Inspector HTMLBreadcrumbs */
 
@@ -87,58 +85,42 @@
 }
 
 .breadcrumbs-widget-item {
-  --separator-width: 8px;
-  --inline-padding: 6px;
-  background: none;
+  background-color: transparent;
   border: none;
-  padding: 0 var(--inline-padding);
-
-  &[aria-pressed="true"] {
-    color: var(--theme-highlight-blue);
-
-    .breadcrumbs-widget-item-id {
-      color: var(--theme-highlight-purple);
-    }
-
-    :is(
-      .breadcrumbs-widget-item-tag,
-      .breadcrumbs-widget-item-pseudo-classes,
-      .breadcrumbs-widget-item-classes
-    ) {
-      color: currentColor;
-    }
-
-    :root[forced-colors-active] & {
-      background-color: SelectedItem;
-      color: SelectedItemText;
-    }
-  }
+  margin-inline: 10px 1px;
+  padding: 0;
 }
 
-/* We display a separator before all items except the first one */
-.breadcrumbs-widget-item:not(:first-child) {
-  /* We don't want the separator to be part of the button visually, so
-     we'll move it "between" the items */
-  margin-inline-start: var(--separator-width);
-  padding-inline-start: 0;
-
-  &::before {
-    content: url(chrome://devtools/skin/images/breadcrumbs-divider.svg);
-    background: none;
-    display: inline-block;
-    text-align: center;
-    width: var(--separator-width);
-    /* move the separator "out" of the breadcrumb item */
-    margin-inline-start: calc(-1 * var(--separator-width));
-    /* and add margin after to simulate padding for the "inside" of the button */
-    margin-inline-end: var(--inline-padding);
-    -moz-context-properties: fill;
-    fill: var(--theme-icon-disabled-color);
-  }
+.breadcrumbs-widget-item:first-child::before {
+  /* The first crumb does not need any separator before itself */
+  content: unset;
 }
 
-.breadcrumbs-widget-item-tag {
-  color: var(--breadcrumb-tag-color);
+.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-highlight-blue);
+}
+
+.theme-dark .breadcrumbs-widget-item {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .breadcrumbs-widget-item {
+  color: var(--theme-body-color);
 }
 
 .breadcrumbs-widget-item-id,

devtools/client/themes/images/breadcrumbs-divider.svg

@@ -2,5 +2,17 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="5" height="7">
-  <path d="M.2 1045.562l4.6 3.3-4.6 3.3 2-3.3z" fill="context-fill" transform="translate(0 -1045.362)"/>
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#9a9aba"/>
+      <stop offset="1" stop-color="#a6a6c2"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#8e8eb2"/>
+      <stop offset="1" stop-color="#9a9aba"/>
+    </linearGradient>
+    <linearGradient x1="3.616" y1="3.893" x2="1.285" y2="-.757" id="d" href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .8684 0 1046.257)"/>
+    <linearGradient x1="2.232" y1="4.162" x2=".629" y2=".966" id="c" href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .8684 0 1046.257)"/>
+  </defs>
+  <path d="M.2 1045.562l4.6 3.3-4.6 3.3 2-3.3z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linejoin="round" transform="translate(0 -1045.362)"/>
 </svg>