[css value tracing] Use arrow icon exclusively

The mix of icons is confusing, and the arrow icon alone looks much
nicer.

Drive-by: Outline and format the view function.

Bug: 396080529
Change-Id: Ib7c1f3bb716784b1bfc20f747d46587f6eed0b27
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6333508
Reviewed-by: Eric Leese <[email protected]>
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/panels/elements/CSSValueTraceView.ts

@@ -30,47 +30,62 @@ export type View = (
     target: HTMLElement,
     ) => void;
 
+function defaultView(input: ViewInput, _: unknown, target: HTMLElement): void {
+  const [firstEvaluation, ...intermediateEvaluations] = input.evaluations;
+  render(
+      // clang-format off
+    html`
+      <div class="css-value-trace monospace">
+        ${input.substitutions.map(
+          line =>
+            html`<span class="trace-line-icon" aria-label="is equal to">↳</span
+              ><span class="trace-line">${line}</span>`,
+        )}
+        ${firstEvaluation && intermediateEvaluations.length === 0
+          ? html`<span class="trace-line-icon" aria-label="is equal to">↳</span
+              ><span class="trace-line">${firstEvaluation}</span>`
+          : html`<details
+              @toggle=${input.onToggle}
+              ?hidden=${!firstEvaluation ||
+              intermediateEvaluations.length === 0}
+            >
+              <summary>
+                <span class="trace-line-icon" aria-label="is equal to">↳</span
+                ><devtools-icon class="marker"></devtools-icon
+                ><span class="trace-line">${firstEvaluation}</span>
+              </summary>
+              <div>
+                ${intermediateEvaluations.map(
+                  evaluation =>
+                    html`<span class="trace-line-icon" aria-label="is equal to"
+                        >↳</span
+                      ><span class="trace-line">${evaluation}</span>`,
+                )}
+              </div>
+            </details>`}
+        ${!input.finalResult
+          ? ''
+          : html`<span class="trace-line-icon" aria-label="is equal to">↳</span
+              ><span class="trace-line">${input.finalResult}</span>`}
+      </div>
+    `,
+      // clang-format on
+      target,
+  );
+}
+
 export class CSSValueTraceView extends UI.Widget.VBox {
   #view: View;
   #finalResult: Node[]|undefined = undefined;
   #evaluations: Node[][] = [];
   #substitutions: Node[][] = [];
 
-  constructor(
-      view: View = (input, _, target):
-          void => {
-            const substitutionIcon = html`<span class=trace-line-icon aria-label="resolved to">\u21B3</span>`;
-            const evalIcon = html`<span class=trace-line-icon aria-label="is equal to">\u003D</span>`;
-            const [firstEvaluation, ...intermediateEvaluations] = input.evaluations;
-            render(
-                // clang-format off
-        html`
-<div class="css-value-trace monospace">
-  ${input.substitutions.map(line => html`${substitutionIcon}<span class="trace-line">${line}</span>`)}
-  ${
-    firstEvaluation && intermediateEvaluations.length === 0
-      ? html`${evalIcon}<span class="trace-line">${firstEvaluation}</span>`
-      : html`<details
-                  @toggle=${input.onToggle}
-                  ?hidden=${!firstEvaluation || intermediateEvaluations.length === 0}>
-    <summary>
-       ${evalIcon}<devtools-icon class=marker></devtools-icon><span class="trace-line">${firstEvaluation}</span>
-    </summary>
-    <div>
-      ${intermediateEvaluations.map(evaluation => html`${evalIcon}<span class="trace-line">${evaluation}</span>`)}
-    </div>
-  </details>`
-  }
-  ${!input.finalResult ? '' : html`${evalIcon}<span class="trace-line">${input.finalResult}</span>`}
-</div>
-`,
-                // clang-format on
-                target,
-            );
-          },
-  ) {
+  constructor(view: View = defaultView) {
     super(true);
-    this.registerRequiredCSS(cssValueTraceViewStyles, stylePropertiesTreeOutlineStyles);
+    this.registerRequiredCSS(
+        cssValueTraceViewStyles,
+        stylePropertiesTreeOutlineStyles,
+    );
     this.#view = view;
     this.requestUpdate();
   }

front_end/panels/elements/cssValueTraceView.css

@@ -5,7 +5,7 @@
  */
 
 .css-value-trace {
-  --cell-width: 2em;
+  --cell-width: 1.5em;
 
   display: grid;
   grid-template-columns: var(--cell-width) 1fr;
@@ -15,7 +15,6 @@
     grid-column-start: 1;
     width: var(--sys-size-9);
     height: var(--sys-size-9);
-    font-size: var(--sys-size-9);
     text-align: center;
     color: var(--icon-default);
     padding-top: var(--sys-size-4);