[GM3Restyling] Update rest of outline views

Also adjust micro buttton

Bug: 325443114
Change-Id: If1672f7fa785785079d507b5b99a9e2911c20b50
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6213550
Auto-Submit: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/accessibility/axBreadcrumbs.css

@@ -79,10 +79,6 @@
   background-color: var(--sys-color-tonal-container);
 }
 
-.ax-breadcrumbs .ax-node.parent.inspected:focus::before {
-  background-color: var(--sys-color-on-tonal-container);
-}
-
 .ax-breadcrumbs .ax-node.inspected:focus {
   background-color: var(--sys-color-tonal-container);
   color: var(--sys-color-on-tonal-container);

front_end/panels/elements/elementsTreeOutline.css

@@ -116,20 +116,18 @@
 .elements-disclosure li.parent:not(.always-parent)::before {
   box-sizing: border-box;
   user-select: none;
-  mask-image: var(--image-file-triangle-right);
+  mask-image: var(--image-file-arrow-collapse);
   height: 14px;
   width: 14px;
   content: "\A0\A0";
   color: transparent;
   text-shadow: none;
-  margin-left: -3px;
+  margin: -3px 2px 0 -3px;
   background-color: var(--icon-default);
-  transition: transform 200ms;
 }
 
 .elements-disclosure li.parent.expanded::before {
-  transform: rotate(90deg);
-  margin-top: -2px;
+  mask-image: var(--image-file-arrow-drop-down);
 }
 
 .elements-disclosure li .selection {

front_end/panels/event_listeners/EventListenersView.ts

@@ -304,7 +304,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       const deleteButton = new Buttons.Button.Button();
       deleteButton.data = {
         variant: Buttons.Button.Variant.ICON,
-        size: Buttons.Button.Size.SMALL,
+        size: Buttons.Button.Size.MICRO,
         iconName: 'bin',
         jslogContext: 'delete-event-listener',
       };

front_end/panels/issues/issuesTree.css

@@ -33,12 +33,11 @@
 }
 
 .issues li.parent::before {
-  margin-top: 10px;
+  margin-top: 7px;
 }
 
 .issues .affected-resources li.parent::before {
-  margin-top: 3px;
-  margin-right: 0;
+  margin-top: 0;
 }
 
 .issue-category,

front_end/panels/sources/SourcesPanel.ts

@@ -1190,7 +1190,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     vbox.setMinimumAndPreferredSizes(minToolbarWidth, 25, minToolbarWidth, 100);
     this.sidebarPaneStack = UI.ViewManager.ViewManager.instance().createStackLocation(
         this.revealDebuggerSidebar.bind(this), undefined, 'debug');
-    this.sidebarPaneStack.widget().element.classList.add('overflow-auto');
+    this.sidebarPaneStack.widget().element.classList.add('overflow-y-auto');
     this.sidebarPaneStack.widget().show(vbox.element);
     this.sidebarPaneStack.widget().element.appendChild(this.debuggerPausedMessage.element());
     this.sidebarPaneStack.appendApplicableItems('sources.sidebar-top');

front_end/panels/sources/components/breakpointsView.css

@@ -59,19 +59,19 @@ details > summary:hover {
 details > summary::before {
   display: block;
   user-select: none;
-  mask-image: var(--image-file-triangle-right);
+  mask-image: var(--image-file-arrow-collapse);
   background-color: var(--icon-default);
   content: "";
-  height: 14px;
-  min-width: 14px;
-  max-width: 14px;
+  height: 16px;
+  min-width: 16px;
+  max-width: 16px;
+  margin-top: -2px;
   margin-left: -4px;
   overflow: hidden;
-  transition: transform 200ms;
 }
 
 details[open] > summary::before {
-  transform: rotate(90deg);
+  mask-image: var(--image-file-arrow-drop-down);
 }
 
 .group-header {

front_end/ui/components/buttons/button.css

@@ -82,6 +82,14 @@ button {
       --icon-size: var(--sys-size-8);
     }
 
+    &.micro {
+      --button-height: var(--sys-size-8);
+      --button-width: var(--sys-size-8);
+      --icon-size: var(--sys-size-8);
+
+      border-radius: var(--sys-shape-corner-extra-small);
+    }
+
     &.toggled devtools-icon {
       color: var(--toggle-color); /* stylelint-disable-line plugin/use_theme_colors */
 
@@ -168,24 +176,6 @@ button {
     devtools-icon {
       color: var(--icon-primary);
     }
-
-    &.micro {
-      --button-height: var(--sys-size-7);
-
-      padding: 0 var(--sys-size-5);
-      font-size: var(--sys-typescale-body4-size);
-      font-weight: var(--ref-typeface-weight-medium);
-      line-height: var(--sys-typescale-body4-line-height);
-
-      &:not(.icon):has(devtools-icon) {
-        padding-left: var(--sys-size-3);
-      }
-
-      &:not(.icon) devtools-icon {
-        height: var(--sys-size-6);
-        width: var(--sys-size-6);
-      }
-    }
   }
 
   &:disabled {

front_end/ui/components/tree_outline/treeOutline.css

@@ -33,15 +33,16 @@ li {
 .arrow-icon {
   display: block;
   user-select: none;
-  mask-image: var(--image-file-triangle-right);
+  mask-image: var(--image-file-arrow-collapse);
   background-color: var(--icon-default);
+  margin-top: -2px;
+  margin-right: 3px;
   content: "";
   text-shadow: none;
   height: 14px;
   width: 14px;
   overflow: hidden;
   flex: none;
-  transition: transform 200ms;
 }
 
 ul {
@@ -58,7 +59,7 @@ li:not(.parent) > .arrow-and-key-wrapper > .arrow-icon {
 }
 
 li.parent.expanded > .arrow-and-key-wrapper > .arrow-icon {
-  transform: rotate(90deg);
+  mask-image: var(--image-file-arrow-drop-down);
 }
 
 li.is-top-level {

front_end/ui/legacy/checkboxTextLabel.css

@@ -34,6 +34,7 @@ input.inside-datagrid {
 .dt-checkbox-text {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 
   input:disabled ~ & {
     opacity: 38%;

front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -17,11 +17,10 @@
 
 .object-properties-section li {
   user-select: text;
-}
 
-.object-properties-section li::before {
-  top: -1px;
-  margin-right: 2px;
+  &::before {
+    margin-right: 2px;
+  }
 }
 
 .object-properties-section li.editing-sub-part {