RPP: Polish UI

- Reduce insight sidebar whitespace
- Drop transition on insight hover button.
- Make Magic pen animation smoother

Change-Id: I6a1cc2d83e73db66472d945bd51960c5417da547
Bug: 395797366
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6395296
Auto-Submit: Paul Irish <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: paulirish

front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -9,7 +9,7 @@
   position: relative;
   width: auto;
   height: auto;
-  margin: var(--sys-size-6) 0;
+  margin: var(--sys-size-5) 0;
   border-radius: var(--sys-shape-corner-extra-small);
   overflow: hidden;
   border: var(--sys-size-1) solid var(--sys-color-divider);
@@ -26,7 +26,7 @@
   }
 
   header {
-    padding: var(--sys-size-5) var(--sys-size-6);
+    padding: var(--sys-size-5) var(--sys-size-4);
 
     h3 {
       font: var(--sys-typescale-body4-medium);
@@ -52,18 +52,13 @@
   border-radius: var(--sys-shape-corner-full);
   background: var(--sys-color-cdt-base-container);
   opacity: 0%;
-  transition: opacity 0.2s ease;
 
   /* Ensure that the icon appears when the user hovers, or focuses the header */
   .insight:hover &,
   header:focus-within & {
     opacity: 100%;
   }
 
-  devtools-button {
-    transition: transform 0.2s ease;
-  }
-
   &.active devtools-button {
     transform: rotate(180deg);
   }
@@ -76,7 +71,7 @@
 }
 
 .insight-body {
-  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-6);
+  padding: 0 var(--sys-size-4) var(--sys-size-5);
 
   .list-title {
     margin-top: var(--sys-size-4);

front_end/panels/timeline/components/sidebarSingleInsightSet.css

@@ -6,7 +6,7 @@
 
 :host {
   display: block;
-  padding: 5px 10px;
+  padding: 5px 8px;
 }
 
 .metrics {

front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -35,7 +35,7 @@
   gap: var(--sys-size-4);
   pointer-events: auto;
   transition:
-    width var(--sys-motion-duration-long2) var(--sys-motion-easing-emphasized);
+    all var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized);
 
   &.only-pen-wrapper {
     /* when the button wrapper is not hovered, set the max width to only fit the pen icon */
@@ -45,7 +45,7 @@
   }
 
   * {
-    /* Make up for the padding in a hovered button to only see the pen icon when it is not hovered */
+    /* When unhovered, shift the contents left you don't see the border of the .ai-label-button  */
     transform: translateX(-2px);
   }
 }
@@ -59,11 +59,10 @@
 .ai-label-button-wrapper:focus,
 .ai-label-button-wrapper:focus-within,
 .ai-label-button-wrapper:hover {
-  width: fit-content;
+  width: auto;
   height: var(--sys-size-13);
   padding: var(--sys-size-3) var(--sys-size-5);
-  overflow: hidden;
-  top: -4px;
+  transform: translateY(-9px); /* -9px is the original -3px minus 6px (coming from the padding adjustment) */
 
   * {
     transform: translateX(0);

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3655,6 +3655,7 @@ export const knownContextValues = new Set([
   'timeline.toggle-insight.cls-culprits',
   'timeline.toggle-insight.document-latency',
   'timeline.toggle-insight.dom-size',
+  'timeline.toggle-insight.duplicated-javascript',
   'timeline.toggle-insight.font-display',
   'timeline.toggle-insight.forced-reflow',
   'timeline.toggle-insight.image-delivery',