[cleanup] Improve ergonomics for importing Lit functions.

Instead of the cumbersome

```
import * as Lit from '../../ui/lit/lit.js';

// ...

const {render, html} = Lit;
```

you can now simply use

```
import {render, html} from '../../ui/lit/lit.js';
```

directly.

Bug: 301364727
Change-Id: If3441bd120dbce8902caab17bc4bf1703ed77270
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6216537
Commit-Queue: Nikolay Vitkov <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>

Author: bmeurer

front_end/entrypoints/main/MainImpl.ts

@@ -32,8 +32,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import '../../ui/legacy/legacy.js';
-
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -57,13 +55,11 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
-import * as Lit from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ExecutionContextSelector} from './ExecutionContextSelector.js';
 
-const {html, render} = Lit;
-
 const UIStrings = {
   /**
    *@description Title of item in main

front_end/panels/application/preloading/PreloadingView.ts

@@ -17,16 +17,14 @@ import type * as SplitView from '../../../ui/components/split_view/split_view.js
 // eslint-disable-next-line rulesdir/es-modules-import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
 import type * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    *@description DropDown title for filtering preloading attempts by rule set
@@ -228,7 +226,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     };
 
     // clang-format off
-    Lit.render(
+    render(
         html`
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: max(100vh-200px, 0px)">
           <div slot="main" class="overflow-auto" style="height: 100%">
@@ -377,7 +375,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     toolbar.appendToolbarItem(this.ruleSetSelector.item());
 
     this.preloadingGrid.addEventListener('select', this.onPreloadingGridCellFocused.bind(this));
-    Lit.render(
+    render(
         html`
         <devtools-split-view .horizontal=${true} style="--min-sidebar-size: 0px">
           <div slot="main" class="overflow-auto" style="height: 100%">

front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -8,7 +8,7 @@ import '../../../ui/components/panel_introduction_steps/panel_introduction_steps
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, render} from '../../../ui/lit/lit.js';
 
 import cssOverviewStartViewStylesRaw from './cssOverviewStartView.css.js';
 
@@ -46,8 +46,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/components/CSSOverviewStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {render, html} = Lit;
-
 const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback' as Platform.DevToolsPath.UrlString;
 const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview' as Platform.DevToolsPath.UrlString;
 export class OverviewStartRequestedEvent extends Event {

front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -11,12 +11,10 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 
 import developerResourcesListViewStyles from './developerResourcesListView.css.js';
 
-const {render, html, nothing} = Lit;
-
 const UIStrings = {
   /**
    *@description Text for the status of something

front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -6,16 +6,14 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, nothing, render} from '../../../ui/lit/lit.js';
 
 import accessibilityTreeNodeStylesRaw from './accessibilityTreeNode.css.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const accessibilityTreeNodeStyles = new CSSStyleSheet();
 accessibilityTreeNodeStyles.replaceSync(accessibilityTreeNodeStylesRaw.cssContent);
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    *@description Ignored node element text content in Accessibility Tree View of the Elements panel
@@ -85,12 +83,12 @@ export class AccessibilityTreeNode extends HTMLElement {
         ({name, value}) => isPrintable(value.type) ?
             html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
                 value.value}</span>` :
-            Lit.nothing);
+            nothing);
     const content =
         this.#ignored ? html`<span>${i18nString(UIStrings.ignored)}</span>` : html`${role}&nbsp;${name}${properties}`;
     await RenderCoordinator.write(`Accessibility node ${this.#id} render`, () => {
       // clang-format off
-      Lit.render(
+      render(
         html`<div class='container'>${content}</div>`,
         this.#shadow,
         {host: this});

front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -5,7 +5,7 @@
 import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, render} from '../../../ui/lit/lit.js';
 
 import cssHintDetailsViewStylesRaw from './cssHintDetailsView.css.js';
 
@@ -22,8 +22,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {render, html, Directives} = Lit;
-
 interface Hint {
   getMessage(): string;
   getPossibleFixMessage(): string|null;

front_end/panels/elements/components/CSSPropertyDocsView.ts

@@ -7,7 +7,7 @@ import '../../../ui/legacy/legacy.js';
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Input from '../../../ui/components/input/input.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, nothing, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import CSSPropertyDocsViewStylesRaw from './cssPropertyDocsView.css.js';
@@ -29,8 +29,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSPropertyDocsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {render, html} = Lit;
-
 interface CSSProperty {
   name: string;
   description?: string;
@@ -70,7 +68,7 @@ export class CSSPropertyDocsView extends HTMLElement {
           <div id="description">
             ${description}
           </div>
-        ` : Lit.nothing}
+        ` : nothing}
         ${link ? html`
           <div class="docs-popup-section footer">
             <x-link
@@ -85,7 +83,7 @@ export class CSSPropertyDocsView extends HTMLElement {
               ${i18nString(UIStrings.dontShow)}
             </label>
           </div>
-        ` : Lit.nothing}
+        ` : nothing}
       </div>
     `, this.#shadow, {
         host: this,

front_end/panels/elements/components/ComputedStyleProperty.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import computedStylePropertyStylesRaw from './computedStyleProperty.css.js';
@@ -11,8 +11,6 @@ import computedStylePropertyStylesRaw from './computedStyleProperty.css.js';
 const computedStylePropertyStyles = new CSSStyleSheet();
 computedStylePropertyStyles.replaceSync(computedStylePropertyStylesRaw.cssContent);
 
-const {render, html} = Lit;
-
 export class NavigateToSourceEvent extends Event {
   static readonly eventName = 'onnavigatetosource';
   constructor() {

front_end/panels/elements/components/ComputedStyleTrace.ts

@@ -3,16 +3,14 @@
 // found in the LICENSE file.
 
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, render} from '../../../ui/lit/lit.js';
 
 import computedStyleTraceStylesRaw from './computedStyleTrace.css.js';
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const computedStyleTraceStyles = new CSSStyleSheet();
 computedStyleTraceStyles.replaceSync(computedStyleTraceStylesRaw.cssContent);
 
-const {render, html} = Lit;
-
 export interface ComputedStyleTraceData {
   selector: string;
   active: boolean;

front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -5,7 +5,7 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsTreeExpandButtonStylesRaw from './elementsTreeExpandButton.css.js';
@@ -14,8 +14,6 @@ import elementsTreeExpandButtonStylesRaw from './elementsTreeExpandButton.css.js
 const elementsTreeExpandButtonStyles = new CSSStyleSheet();
 elementsTreeExpandButtonStyles.replaceSync(elementsTreeExpandButtonStylesRaw.cssContent);
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    *@description Aria label for a button expanding collapsed subtree
@@ -50,7 +48,7 @@ export class ElementsTreeExpandButton extends HTMLElement {
     // clang-format off
     // This button's innerText will be tested by e2e test and blink layout tests.
     // It can't have any other characters like '\n' or space, otherwise it will break tests.
-    Lit.render(html`<button
+    render(html`<button
         class="expand-button"
         tabindex="-1"
         aria-label=${i18nString(UIStrings.expand)}