Reduce tooltip/popover paddings and adjust border radius

Fixed: 408140891
Change-Id: Ifcf600bbb6b40dee4dc75da7f83fd7ab48b2b1d6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6429844
Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>
Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>

Author: ktran

front_end/panels/sources/CSSPlugin.ts

@@ -493,7 +493,6 @@ const theme = CodeMirror.EditorView.baseTheme({
   '.cm-tooltip.cm-tooltip-swatchEdit': {
     'box-shadow': 'var(--sys-elevation-level2)',
     'background-color': 'var(--sys-color-base-container-elevated)',
-    'border-radius': 'var(--sys-shape-corner-small)',
-    padding: 'var(--sys-size-6) var(--sys-size-8)',
+    'border-radius': 'var(--sys-shape-corner-extra-small)',
   },
 });

front_end/ui/legacy/components/inline_editor/swatchPopover.css

@@ -12,6 +12,5 @@
   line-height: 11px;
   box-shadow: var(--sys-elevation-level2);
   background-color: var(--sys-color-base-container-elevated);
-  border-radius: var(--sys-shape-corner-small);
-  padding: var(--sys-size-6) var(--sys-size-8);
+  border-radius: var(--sys-shape-corner-extra-small);
 }

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

@@ -4,6 +4,11 @@
  * found in the LICENSE file.
  */
 
+.widget:has(.object-popover-tree) {
+  padding: 0;
+  border-radius: var(--sys-shape-corner-extra-small);
+}
+
 .object-popover-content {
   display: flex;
   position: relative;
@@ -19,6 +24,7 @@
   font-weight: bold;
   padding-left: 18px;
   padding-bottom: 2px;
+  padding-top: var(--sys-size-3);
   flex-shrink: 0;
 }
 

front_end/ui/legacy/popover.css

@@ -11,7 +11,7 @@
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-base-container-elevated);
   border-radius: var(--sys-shape-corner-small);
-  padding: var(--sys-size-6) var(--sys-size-8);
+  padding: var(--sys-size-4);
 }
 
 .squiggles-content {