[UIEngineering] Enable no-unscoped-styles-in-views eslint rule

The changes are:
* Enabled the eslint rule and used `UI.Widget.widgetScoped` for all the views.
* Updated all the view styles that styled the widget container either via `.widget` class or `:host` to use `:scope` (as `.widget` and `:host` do not apply when they are inside the `@scope`d rule with the `.widget` parent).
* Updated the `widgetScoped` to have an inclusive limit so that we can still style `<devtools-widget>` elements from parents (but not the children of `<devtools-widget>`).

Bug: 431945418
Change-Id: If5259ca59779885d7038d8e22ace5891335d38b8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6765265
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

eslint.config.mjs

@@ -664,6 +664,7 @@ export default defineConfig([
       ],
       'rulesdir/enforce-ui-strings-as-const': 'error',
       'rulesdir/no-new-lit-element-components': 'error',
+      'rulesdir/no-unscoped-styles-in-views': 'error',
     },
   },
   {

front_end/models/persistence/EditFileSystemView.ts

@@ -97,7 +97,7 @@ export type View = (input: EditFileSystemViewInput, output: object, target: HTML
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-      <style>${editFileSystemViewStyles}</style>
+      <style>${UI.Widget.widgetScoped(editFileSystemViewStyles)}</style>
       <div class="excluded-folder-header">
         <span>${i18nString(UIStrings.url)}</span>
         <span class="excluded-folder-url">${input.fileSystemPath}</span>

front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -56,7 +56,7 @@ export type View = (input: WorkspaceSettingsTabInput, output: object, target: HT
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-    <style>${workspaceSettingsTabStyles}</style>
+    <style>${UI.Widget.widgetScoped(workspaceSettingsTabStyles)}</style>
     <div class="settings-card-container-wrapper" jslog=${VisualLogging.pane('workspace')}>
       <div class="settings-card-container">
         <devtools-card heading=${i18nString(UIStrings.workspace)}>

front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -74,7 +74,7 @@ export const SELECT_WORKSPACE_DIALOG_DEFAULT_VIEW = (input: ViewInput, _output:
   const hasFolders = input.folders.length > 0;
   render(
     html`
-      <style>${selectWorkspaceDialogStyles}</style>
+      <style>${UI.Widget.widgetScoped(selectWorkspaceDialogStyles)}</style>
       <h2 class="dialog-header">${lockedString(UIStringsNotTranslate.selectFolder)}</h2>
       <div class="main-content">
         <div class="select-project-root">${lockedString(UIStringsNotTranslate.selectProjectRoot)}</div>

front_end/panels/ai_assistance/components/ExploreWidget.ts

@@ -67,7 +67,7 @@ export const DEFAULT_VIEW = (
   render(
     html`
       <style>
-        ${exploreWidgetStyles}
+        ${UI.Widget.widgetScoped(exploreWidgetStyles)}
       </style>
       <div class="ai-assistance-explore-container">
         <div class="header">

front_end/panels/ai_assistance/components/UserActionRow.ts

@@ -115,8 +115,8 @@ export interface UserActionRowWidgetParams {
 export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput, target: HTMLElement): void => {
   // clang-format off
   Lit.render(html`
-    <style>${Input.textInputStyles}</style>
-    <style>${userActionRowStyles}</style>
+    <style>${UI.Widget.widgetScoped(Input.textInputStyles)}</style>
+    <style>${UI.Widget.widgetScoped(userActionRowStyles)}</style>
     <div class="ai-assistance-feedback-row">
       <div class="rate-buttons">
         ${input.showRateButtons ? html`

front_end/panels/ai_assistance/selectWorkspaceDialog.css

@@ -4,10 +4,10 @@
  * found in the LICENSE file.
  */
 
- .widget.dialog-container {
+:scope {
   width: 100%;
   box-shadow: none;
- }
+}
 
 .dialog-header {
   margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-5);

front_end/panels/application/components/SharedStorageAccessGrid.ts

@@ -90,7 +90,7 @@ export type View = (input: ViewInput, output: object, target: HTMLElement) => vo
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
-    <style>${sharedStorageAccessGridStyles}</style>
+    <style>${UI.Widget.widgetScoped(sharedStorageAccessGridStyles)}</style>
     ${input.events.length === 0
       ? html`
         <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>

front_end/panels/application/components/sharedStorageAccessGrid.css

@@ -3,7 +3,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.widget {
+:scope {
   padding: 20px;
   height: 100%;
   display: flex;

front_end/panels/autofill/AutofillView.ts

@@ -221,8 +221,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       render(html`
-        <style>${autofillViewStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
+        <style>${UI.Widget.widgetScoped(autofillViewStyles)}</style>
+        <style>${UI.Widget.widgetScoped(UI.inspectorCommonStyles)}</style>
         <main>
           <div class="top-left-corner">
             <devtools-checkbox
@@ -257,8 +257,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
   // Disabled until https://crbug.com/1079231 is fixed.
   // clang-format off
     render(html`
-      <style>${autofillViewStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
+      <style>${UI.Widget.widgetScoped(autofillViewStyles)}</style>
+      <style>${UI.Widget.widgetScoped(UI.inspectorCommonStyles)}</style>
       <main>
         <div class="content-container" jslog=${VisualLogging.pane('autofill')}>
           <div class="right-to-left" role="region" aria-label=${i18nString(UIStrings.addressPreview)}>