[GM3Restyling] Hide layers information if nothing can be shown

This changes the layers panel to only show the empty state if nothing
can be shown yet.

Before: https://i.imgur.com/jC0gqBa.png
After: https://i.imgur.com/VvoIxie.png
Fixed: 400383914
Change-Id: I0ea7d8438d86dc8a000b09582739368a4ac9b171
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6415488
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/layers/LayersPanel.ts

@@ -77,9 +77,11 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
 
     this.rightSplitWidget = new UI.SplitWidget.SplitWidget(false, true, 'layer-details-split-view-state');
     this.splitWidget().setMainWidget(this.rightSplitWidget);
+    this.splitWidget().hideSidebar();
 
     this.layers3DView = new LayerViewer.Layers3DView.Layers3DView(this.layerViewHost);
     this.rightSplitWidget.setMainWidget(this.layers3DView);
+    this.rightSplitWidget.hideSidebar();
     this.layers3DView.addEventListener(
         LayerViewer.Layers3DView.Events.PAINT_PROFILER_REQUESTED, this.onPaintProfileRequested, this);
     this.layers3DView.addEventListener(LayerViewer.Layers3DView.Events.SCALE_CHANGED, this.onScaleChanged, this);
@@ -155,6 +157,8 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
 
   update(): void {
     if (this.model) {
+      this.splitWidget().showBoth();
+      this.rightSplitWidget.showBoth();
       this.layerViewHost.setLayerTree(this.model.layerTree());
       const resourceModel = this.model.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceModel) {

test/e2e/helpers/layers-helpers.ts

@@ -16,7 +16,6 @@ export async function getCurrentUrl() {
 
 export function veImpressionForLayersPanel() {
   return veImpression('Panel', 'layers', [
-    veImpression('Pane', 'sidebar'),
     veImpression(
         'Pane', 'layers-3d-view',
         [
@@ -31,7 +30,5 @@ export function veImpressionForLayersPanel() {
               ]),
           veImpression('Canvas', 'layers'),
         ]),
-    veImpression('Pane', 'layers-details', [veImpression('Section', 'empty-view')]),
-    veImpression('PanelTabHeader', 'details'),
   ]);
 }