[GM3Restyling] Use tokens for outline views update

Bug: 325443114
Change-Id: I82da08d090bf2a00ba041f220ce323363a78264a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6218360
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/elements/elementsTreeOutline.css

@@ -122,7 +122,7 @@
   content: "\A0\A0";
   color: transparent;
   text-shadow: none;
-  margin: -3px 2px 0 -3px;
+  margin: -3px var(--sys-size-2) 0 -3px;
   background-color: var(--icon-default);
 }
 

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-y-auto');
+    this.sidebarPaneStack.widget().element.classList.add('y-overflow-only');
     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

@@ -62,11 +62,11 @@ details > summary::before {
   mask-image: var(--image-file-arrow-collapse);
   background-color: var(--icon-default);
   content: "";
-  height: 16px;
-  min-width: 16px;
-  max-width: 16px;
-  margin-top: -2px;
-  margin-left: -4px;
+  height: var(--sys-size-8);
+  min-width: var(--sys-size-8);
+  max-width: var(--sys-size-8);
+  margin-top: calc(-1 * var(--sys-size-2));
+  margin-left: calc(-1 * var(--sys-size-3));
   overflow: hidden;
 }
 

front_end/panels/sources/sourcesPanel.css

@@ -66,6 +66,11 @@
   display: flex;
 }
 
+.y-overflow-only {
+  overflow: hidden auto;
+  background-color: var(--sys-color-cdt-base-container);
+}
+
 .cursor-auto {
   cursor: auto;
 }

front_end/ui/legacy/inspectorCommon.css

@@ -196,11 +196,6 @@ iframe.fill {
   background-color: var(--sys-color-cdt-base-container);
 }
 
-.overflow-y-auto {
-  overflow: hidden auto;
-  background-color: var(--sys-color-cdt-base-container);
-}
-
 iframe.widget {
   position: absolute;
   width: 100%;

front_end/ui/legacy/treeoutline.css

@@ -118,9 +118,9 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
   background-color: var(--icon-default);
   content: "\A0\A0";
   text-shadow: none;
-  margin-top: -2px;
-  height: 16px;
-  width: 16px;
+  margin-top: calc(-1 * var(--sys-size-2));
+  height: var(--sys-size-8);
+  width: var(--sys-size-8);
 }
 
 .tree-outline li:not(.parent)::before {