Reenable CoverageListView test

The test flakily failed on a small difference of the screenshot,
with what looks like a focus outline (sometimes missing).
Therefore, explicitly focus the widget before screenshotting.

A first run on the bots doesn't show its flakiness (while a previous
run without the fix did) so hopefully this was the culprit.

Drive-by: add a scope to the css file

Fixed: 450209400
Change-Id: I4067fda553f9a0e01ef1625b1090384e67017e2c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7234133
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>
Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>

Author: ktran

front_end/panels/coverage/CoverageListView.test.ts

@@ -31,8 +31,7 @@ function makeItem(
 }
 
 describeWithEnvironment('CoverageListView', () => {
-  // Consistently failing, skip while we're fixing it
-  it.skip('[crbug.com/450209400] basic rendering', async () => {
+  it('basic rendering', async () => {
     const view = new Coverage.CoverageListView.CoverageListView();
     renderWidgetInVbox(view);
     view.coverageInfo = [
@@ -46,6 +45,7 @@ describeWithEnvironment('CoverageListView', () => {
           50),
     ];
     await view.updateComplete;
+    view.focus();
 
     await assertScreenshot('coverage/basic.png');
   });

front_end/panels/coverage/coverageListView.css

@@ -4,80 +4,82 @@
  * found in the LICENSE file.
  */
 
-.data-grid {
-  border: none;
-}
-
-.data-grid td .url-outer {
-  width: 100%;
-  display: inline-flex;
-  justify-content: flex-start;
-}
-
-.data-grid td .url-outer .filter-highlight {
-  font-weight: bold;
-}
-
-.data-grid td .url-prefix {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-.data-grid td .url-suffix {
-  flex: none;
-}
+ @scope to (devtools-widget > *) {
+  .data-grid {
+    border: none;
+  }
 
-.data-grid td .bar {
-  display: inline-block;
-  height: 8px;
-  border: 1px solid transparent;
-}
+  .data-grid td .url-outer {
+    width: 100%;
+    display: inline-flex;
+    justify-content: flex-start;
+  }
 
-.data-grid td .bar-unused-size {
-  background-color: var(--app-color-coverage-unused);
-}
+  .data-grid td .url-outer .filter-highlight {
+    font-weight: bold;
+  }
 
-.data-grid td .bar-used-size {
-  background-color: var(--app-color-coverage-used);
-}
+  .data-grid td .url-prefix {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
 
-.data-grid td .percent-value {
-  width: 7ex;
-  display: inline-block;
-  color: var(--sys-color-on-surface-subtle);
-}
+  .data-grid td .url-suffix {
+    flex: none;
+  }
 
-@media (forced-colors: active) {
-  .data-grid td .bar-container {
-    forced-color-adjust: none;
+  .data-grid td .bar {
+    display: inline-block;
+    height: 8px;
+    border: 1px solid transparent;
   }
 
   .data-grid td .bar-unused-size {
-    background-color: ButtonText;
+    background-color: var(--app-color-coverage-unused);
   }
 
   .data-grid td .bar-used-size {
-    background-color: ButtonFace;
+    background-color: var(--app-color-coverage-used);
   }
 
-  .data-grid td .bar {
-    border-color: ButtonText;
+  .data-grid td .percent-value {
+    width: 7ex;
+    display: inline-block;
+    color: var(--sys-color-on-surface-subtle);
   }
 
-  .data-grid .selected td .bar {
-    border-top-color: HighlightText;
-    border-bottom-color: HighlightText;
-  }
+  @media (forced-colors: active) {
+    .data-grid td .bar-container {
+      forced-color-adjust: none;
+    }
 
-  .data-grid .selected td .bar:last-child {
-    border-right-color: HighlightText;
-  }
+    .data-grid td .bar-unused-size {
+      background-color: ButtonText;
+    }
 
-  .data-grid .selected td .bar:first-child {
-    border-left-color: HighlightText;
-  }
+    .data-grid td .bar-used-size {
+      background-color: ButtonFace;
+    }
+
+    .data-grid td .bar {
+      border-color: ButtonText;
+    }
+
+    .data-grid .selected td .bar {
+      border-top-color: HighlightText;
+      border-bottom-color: HighlightText;
+    }
+
+    .data-grid .selected td .bar:last-child {
+      border-right-color: HighlightText;
+    }
+
+    .data-grid .selected td .bar:first-child {
+      border-left-color: HighlightText;
+    }
 
-  .data-grid:focus tr.selected span.percent-value {
-    color: HighlightText;
+    .data-grid:focus tr.selected span.percent-value {
+      color: HighlightText;
+    }
   }
 }