[GM3Restyling] Update swatch popover helper and CSSPlugin

Both open the color picker in different environments (GlassPane, and Codemirror Tooltips).

Screenshots: https://imgur.com/a/js6wjcU
Bug: 406706611
Change-Id: I14e78949c6246dada6897604e9d1f5c6169d398e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6400616
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/sources/CSSPlugin.ts

@@ -245,7 +245,7 @@ type ActiveTooltip = {
 function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
   return {
     pos: active.pos,
-    arrow: true,
+    arrow: false,
     create(view): CodeMirror.TooltipView {
       let text = active.text;
       let widget: UI.Widget.VBox, addListener: (handler: (event: {data: string}) => void) => void;
@@ -365,7 +365,7 @@ decorations:
 });
 
 function cssSwatches(): CodeMirror.Extension {
-  return [cssSwatchPlugin, cssTooltipState];
+  return [cssSwatchPlugin, cssTooltipState, theme];
 }
 
 function getNumberAt(node: CodeMirror.SyntaxNode): {from: number, to: number}|null {
@@ -487,3 +487,12 @@ export class CSSPlugin extends Plugin implements SDK.TargetManager.SDKModelObser
     }
   }
 }
+
+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)',
+  },
+});

front_end/ui/legacy/components/inline_editor/SwatchPopoverHelper.ts

@@ -25,7 +25,7 @@ export class SwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrapper<Even
     super();
     this.popover = new UI.GlassPane.GlassPane();
     this.popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-    this.popover.setMarginBehavior(UI.GlassPane.MarginBehavior.ARROW);
+    this.popover.setMarginBehavior(UI.GlassPane.MarginBehavior.DEFAULT_MARGIN);
     this.popover.element.addEventListener('mousedown', e => e.consume(), false);
 
     this.hideProxy = this.hide.bind(this, true);

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

@@ -6,10 +6,12 @@
 
 .widget {
   display: flex;
-  background: var(--sys-color-cdt-base-container);
-  box-shadow: var(--drop-shadow);
-  border-radius: 2px;
   overflow: auto;
   user-select: text;
+  font: var(--sys-typescale-body4-regular);
   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);
 }