[GM3Restyling] Update Popover Helper usages

Screenshot: https://imgur.com/a/J3ewzJ2
Bug: 406664599
Change-Id: I6d90f444824158af688f6d233a68d77f0e2cff5b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6396865
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/elements/ElementsTreeOutline.ts

@@ -232,7 +232,6 @@ export class ElementsTreeOutline extends
         };
       }, 'elements.issue');
       this.#popupHelper.setTimeout(300);
-      this.#popupHelper.setHasPadding(true);
     }
   }
 

front_end/panels/elements/ImagePreviewPopover.ts

@@ -24,7 +24,6 @@ export class ImagePreviewPopover {
     this.getDOMNode = getDOMNode;
     this.popover =
         new UI.PopoverHelper.PopoverHelper(container, this.handleRequest.bind(this), 'elements.image-preview');
-    this.popover.setHasPadding(true);
     this.popover.setTimeout(0, 100);
   }
 

front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -50,13 +50,15 @@ export class CSSHintDetailsView extends HTMLElement {
           ${this.#authoringHint.getPossibleFixMessage() ? html`
               <div class="hint-popup-possible-fix">
                   ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
-                  ${link ? html`
-                      <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
-                          ${i18nString(UIStrings.learnMore)}
-                      </x-link>
-                  `: ''}
               </div>
           ` : ''}
+          ${link ? html`
+                      <div class="footer">
+                        <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
+                            ${i18nString(UIStrings.learnMore)}
+                        </x-link>
+                      </div>
+                  `: ''}
         </div>
       `, this.#shadow, {
         host: this,

front_end/panels/elements/components/cssHintDetailsView.css

@@ -6,8 +6,6 @@
 
 .hint-popup-wrapper {
   max-width: 232px;
-  font-size: 12px;
-  line-height: 1.4;
 }
 
 code {
@@ -30,3 +28,7 @@ code {
 .unbreakable-text {
   white-space: nowrap;
 }
+
+.footer {
+  margin-top: var(--sys-size-5);
+}

front_end/panels/network/NetworkLogViewColumns.ts

@@ -267,7 +267,6 @@ export class NetworkLogViewColumns {
 
     this.popoverHelper = new UI.PopoverHelper.PopoverHelper(
         this.networkLogView.element, this.getPopoverRequest.bind(this), 'network.initiator-stacktrace');
-    this.popoverHelper.setHasPadding(true);
     this.popoverHelper.setTimeout(300, 300);
     this.dataGridInternal = new DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>(({
       displayName: (i18nString(UIStrings.networkLog) as string),

front_end/panels/network/NetworkWaterfallColumn.ts

@@ -76,7 +76,6 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
 
     this.popoverHelper =
         new UI.PopoverHelper.PopoverHelper(this.element, this.getPopoverRequest.bind(this), 'network.timing');
-    this.popoverHelper.setHasPadding(true);
     this.popoverHelper.setTimeout(300, 300);
 
     this.nodes = [];

front_end/panels/profiler/HeapSnapshotView.ts

@@ -475,7 +475,6 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     this.popoverHelper = new UI.PopoverHelper.PopoverHelper(
         this.element, this.getPopoverRequest.bind(this), 'profiler.heap-snapshot-object');
     this.popoverHelper.setDisableOnClick(true);
-    this.popoverHelper.setHasPadding(true);
     this.element.addEventListener('scroll', this.popoverHelper.hidePopover.bind(this.popoverHelper), true);
 
     this.currentPerspectiveIndex = 0;

front_end/panels/protocol_monitor/JSONEditor.ts

@@ -238,7 +238,6 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
         this.contentElement, event => this.#handlePopoverDescriptions(event), 'protocol-monitor.hint');
     this.#hintPopoverHelper.setDisableOnClick(true);
     this.#hintPopoverHelper.setTimeout(300);
-    this.#hintPopoverHelper.setHasPadding(true);
     const targetManager = SDK.TargetManager.TargetManager.instance();
     targetManager.addEventListener(
         SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, this.#handleAvailableTargetsChanged, this);
@@ -468,7 +467,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const replyArgs = elementData.replyArgs;
     let popupContent = '';
     // replyArgs and type cannot get into conflict because replyArgs is attached to a command and type to a parameter
-    if (replyArgs) {
+    if (replyArgs && replyArgs.length > 0) {
       popupContent = tail + `Returns: ${replyArgs}<br>`;
     } else if (type) {
       popupContent = tail + `<br>Type: ${type}<br>`;
@@ -480,7 +479,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       box: hintElement.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
         const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView({
-          getMessage: () => `<code><span>${head}</span></code>`,
+          getMessage: () => `<span>${head}</span>`,
           getPossibleFixMessage: () => popupContent,
           getLearnMoreLink: () =>
               `https://chromedevtools.github.io/devtools-protocol/tot/${this.command.split('.')[0]}/`,

front_end/panels/sources/DebuggerPlugin.ts

@@ -397,7 +397,6 @@ export class DebuggerPlugin extends Plugin {
         new UI.PopoverHelper.PopoverHelper(editor, this.getPopoverRequest.bind(this), 'sources.object-properties');
     this.popoverHelper.setDisableOnClick(true);
     this.popoverHelper.setTimeout(250, 250);
-    this.popoverHelper.setHasPadding(true);
   }
 
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {

front_end/panels/sources/UISourceCodeFrame.ts

@@ -86,10 +86,8 @@ export class UISourceCodeFrame extends
 
     this.errorPopoverHelper = new UI.PopoverHelper.PopoverHelper(
         this.textEditor.editor.contentDOM, this.getErrorPopoverContent.bind(this), 'sources.error');
-    this.errorPopoverHelper.setHasPadding(true);
 
     this.errorPopoverHelper.setTimeout(100, 100);
-
     this.initializeUISourceCode();
   }