[GM3Restyling] Layers panel empty states update

Before: https://imgur.com/a/vmiGVqU
After: https://imgur.com/a/ZcsJ7r4
Bug: 325443331
Change-Id: I9b5e82602e6b8323ac3c970a72c0edae5ab9af0a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6262906
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/layer_viewer/Layers3DView.ts

@@ -52,15 +52,19 @@ const UIStrings = {
   /**
    *@description Text of a DOM element in DView of the Layers panel
    */
-  layerInformationIsNotYet: 'Layer information is not yet available.',
+  noLayerInformation: 'No layers detected yet',
+  /**
+   *@description Text of a DOM element in DView of the Layers panel that explains the panel
+   */
+  layerExplanation: 'On this page you will be able to view and inspect document layers.',
   /**
    *@description Accessibility label for canvas view in Layers tool
    */
   dLayersView: '3D Layers View',
   /**
    *@description Text in DView of the Layers panel
    */
-  cantDisplayLayers: 'Can\'t display layers,',
+  cantDisplayLayers: 'Can\'t display layers',
   /**
    *@description Text in DView of the Layers panel
    */
@@ -106,7 +110,7 @@ const imageForTexture = new Map<WebGLTexture, HTMLImageElement>();
 
 export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements LayerView {
-  private readonly failBanner: UI.Widget.VBox;
+  private failBanner: UI.EmptyWidget.EmptyWidget;
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;
   private canvasElement: HTMLCanvasElement;
@@ -141,9 +145,8 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     this.element.setAttribute('jslog', `${VisualLogging.pane('layers-3d-view')}`);
 
     this.contentElement.classList.add('layers-3d-view');
-    this.failBanner = new UI.Widget.VBox();
-    this.failBanner.element.classList.add('full-widget-dimmed-banner');
-    UI.UIUtils.createTextChild(this.failBanner.element, i18nString(UIStrings.layerInformationIsNotYet));
+    this.failBanner = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noLayerInformation), i18nString(UIStrings.layerExplanation));
 
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
@@ -763,8 +766,8 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     }
     const gl = this.initGLIfNecessary();
     if (!gl) {
-      this.failBanner.element.removeChildren();
-      this.failBanner.element.appendChild(this.webglDisabledBanner());
+      this.failBanner.detach();
+      this.failBanner = this.webglDisabledBanner();
       this.failBanner.show(this.contentElement);
       return;
     }
@@ -783,14 +786,13 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     this.drawViewportAndChrome();
   }
 
-  private webglDisabledBanner(): Node {
-    const fragment = this.contentElement.ownerDocument.createDocumentFragment();
-    fragment.createChild('div').textContent = i18nString(UIStrings.cantDisplayLayers);
-    fragment.createChild('div').textContent = i18nString(UIStrings.webglSupportIsDisabledInYour);
-    fragment.appendChild(i18n.i18n.getFormatLocalizedString(
+  private webglDisabledBanner(): UI.EmptyWidget.EmptyWidget {
+    const emptyWidget = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.cantDisplayLayers), i18nString(UIStrings.webglSupportIsDisabledInYour));
+    emptyWidget.contentElement.appendChild(i18n.i18n.getFormatLocalizedString(
         str_, UIStrings.checkSForPossibleReasons,
         {PH1: UI.XLink.XLink.create('about:gpu', undefined, undefined, undefined, 'about-gpu')}));
-    return fragment;
+    return emptyWidget;
   }
 
   private selectionFromEventPoint(event: Event): Selection|null {

front_end/panels/layer_viewer/layers3DView.css

@@ -7,6 +7,12 @@
 .layers-3d-view {
   overflow: hidden;
   user-select: none;
+
+  > .empty-view-scroller{
+    inset: 0;
+    position: absolute;
+    background-color: var(--sys-color-cdt-base-container);
+  }
 }
 
 devtools-toolbar {