chrome-devtools-frontend 1.0.947377 → 1.0.948295

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -174,11 +174,16 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.allowCredentialsValueFromHeader));
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         this.appendColumnTitle(header, i18nString(UIStrings.resourceAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError:
+        this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidValue));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
+        break;
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
         this.appendColumnTitle(header, i18nString(UIStrings.disallowedRequestMethod));
@@ -207,9 +212,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowPrivateNetwork|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowPrivateNetwork>(issueCode);
+                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
     }
 
     this.affectedResources.appendChild(header);
@@ -251,6 +254,9 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       case Protocol.Network.CorsError.InvalidAllowCredentials:
       case Protocol.Network.CorsError.PreflightInvalidAllowCredentials:
         return 'Access-Control-Allow-Credentials';
+      case Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork:
+      case Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork:
+        return 'Access-Control-Allow-Private-Network';
       case Protocol.Network.CorsError.RedirectContainsCredentials:
       case Protocol.Network.CorsError.PreflightDisallowedRedirect:
         return 'Location';
@@ -362,13 +368,21 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);
         this.appendIssueDetailCell(element, details.resourceIPAddressSpace ?? '');
         this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
         this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError: {
+        element.appendChild(this.createRequestCell(details.request, opts));
+        this.appendStatus(element, details.isWarning);
+        element.appendChild(this.createRequestCell(details.request, {...opts, linkToPreflight: true, highlightHeader}));
+        this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
+        this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
+        this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
+        break;
+      }
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);
@@ -435,9 +449,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowPrivateNetwork|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowPrivateNetwork>(issueCode);
+                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
         break;
     }
 

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -16,6 +16,7 @@ import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
 import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import type {RequestTimeRange} from './RequestTimingView.js';
 import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
+import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const BAR_SPACING = 1;
 
@@ -271,6 +272,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
       show: (popover: UI.GlassPane.GlassPane): Promise<true> => {
         const content =
             RequestTimingView.createTimingTable((request as SDK.NetworkRequest.NetworkRequest), this.calculator);
+        popover.registerCSSFiles([networkingTimingTableStyles]);
         popover.contentElement.appendChild(content);
         return Promise.resolve(true);
       },

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -217,7 +218,8 @@ export class CPUProfileFlameChart extends
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, _shouldJump: boolean, jumpBackwards?: boolean): void {
-    const matcher = createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
+    const matcher =
+        Platform.StringUtilities.createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
 
     const selectedEntryIndex: number = this.searchResultIndex !== -1 ? this.searchResults[this.searchResultIndex] : -1;
     this.searchResults = [];

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -28,6 +28,7 @@
  */
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 
 import type * as SDK from '../../core/sdk/sdk.js';
@@ -528,7 +529,7 @@ export class ProfileDataGridTree implements UI.SearchableView.Searchable {
       equalTo = true;
     }
 
-    const matcher = createPlainTextSearchRegex(query, 'i');
+    const matcher = Platform.StringUtilities.createPlainTextSearchRegex(query, 'i');
 
     function matchesQuery(profileDataGridNode: ProfileDataGridNode): boolean {
       profileDataGridNode.searchMatchedSelfColumn = false;

package/front_end/panels/settings/components/SyncSection.ts

@@ -92,7 +92,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <a href="${link}" class="link" target="_blank"
+        ${i18nString(UIStrings.syncDisabled)} <a href=${link} class="link" target="_blank"
           @click=${(e: Event): void => openSettingsTab(link, e)}
           @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
@@ -104,7 +104,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href="${link}" class="link" target="_blank"
+        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href=${link} class="link" target="_blank"
           @click=${(e: Event): void => openSettingsTab(link, e)}
           @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -356,9 +356,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <input
           class="input-field"
           type="text"
-          @input="${handleInputChange}"
-          .value="${value}"
-          placeholder="${placeholder}"
+          @input=${handleInputChange}
+          .value=${value}
+          placeholder=${placeholder}
         />
       </label>
     `;
@@ -376,22 +376,22 @@ export class UserAgentClientHintsForm extends HTMLElement {
     };
     return LitHtml.html`
       <span class="full-row label">${i18nString(UIStrings.platformLabel)}</span>
-      <div class="full-row brand-row" aria-label="${i18nString(UIStrings.platformProperties)}" role="group">
+      <div class="full-row brand-row" aria-label=${i18nString(UIStrings.platformProperties)} role="group">
         <input
           class="input-field half-row"
           type="text"
-          @input="${handlePlatformNameChange}"
-          .value="${platform}"
-          placeholder="${i18nString(UIStrings.platformPlaceholder)}"
-          aria-label="${i18nString(UIStrings.platformLabel)}"
+          @input=${handlePlatformNameChange}
+          .value=${platform}
+          placeholder=${i18nString(UIStrings.platformPlaceholder)}
+          aria-label=${i18nString(UIStrings.platformLabel)}
         />
         <input
           class="input-field half-row"
           type="text"
-          @input="${handlePlatformVersionChange}"
-          .value="${platformVersion}"
-          placeholder="${i18nString(UIStrings.platformVersion)}"
-          aria-label="${i18nString(UIStrings.platformVersion)}"
+          @input=${handlePlatformVersionChange}
+          .value=${platformVersion}
+          placeholder=${i18nString(UIStrings.platformVersion)}
+          aria-label=${i18nString(UIStrings.platformVersion)}
         />
       </div>
     `;
@@ -409,20 +409,20 @@ export class UserAgentClientHintsForm extends HTMLElement {
     };
     const mobileCheckboxInput = this.showMobileCheckbox ? LitHtml.html`
       <label class="mobile-checkbox-container">
-        <input type="checkbox" @input="${handleMobileChange}" .checked="${mobile}" />
+        <input type="checkbox" @input=${handleMobileChange} .checked=${mobile} />
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
                                                           LitHtml.html``;
     return LitHtml.html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
-      <div class="full-row brand-row" aria-label="${i18nString(UIStrings.deviceProperties)}" role="group">
+      <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">
         <input
           class="input-field ${this.showMobileCheckbox ? 'device-model-input' : 'full-row'}"
           type="text"
-          @input="${handleDeviceModelChange}"
-          .value="${model}"
-          placeholder="${i18nString(UIStrings.deviceModel)}"
+          @input=${handleDeviceModelChange}
+          .value=${model}
+          placeholder=${i18nString(UIStrings.deviceModel)}
         />
         ${mobileCheckboxInput}
       </div>
@@ -459,41 +459,41 @@ export class UserAgentClientHintsForm extends HTMLElement {
         this.handleBrandInputChange(value, index, 'brandVersion');
       };
       return LitHtml.html`
-        <div class="full-row brand-row" aria-label="${i18nString(UIStrings.brandProperties)}" role="group">
+        <div class="full-row brand-row" aria-label=${i18nString(UIStrings.brandProperties)} role="group">
           <input
             class="input-field brand-name-input"
             type="text"
-            @input="${handleBrandBrowserChange}"
-            .value="${brand}"
+            @input=${handleBrandBrowserChange}
+            .value=${brand}
             id="brand-${index + 1}-input"
-            placeholder="${i18nString(UIStrings.brandName)}"
-            aria-label="${i18nString(UIStrings.brandNameAriaLabel, {
+            placeholder=${i18nString(UIStrings.brandName)}
+            aria-label=${i18nString(UIStrings.brandNameAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           />
           <input
             class="input-field"
             type="text"
-            @input="${handleBrandVersionChange}"
-            .value="${version}"
-            placeholder="${i18nString(UIStrings.version)}"
-            aria-label="${i18nString(UIStrings.brandVersionAriaLabel, {
+            @input=${handleBrandVersionChange}
+            .value=${version}
+            placeholder=${i18nString(UIStrings.version)}
+            aria-label=${i18nString(UIStrings.brandVersionAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           />
           <${IconButton.Icon.Icon.litTagName}
             .data=${
           {color: 'var(--client-hints-form-icon-color)', iconName: 'trash_bin_icon', width: '10px', height: '14px'} as
           IconButton.Icon.IconData}
-            title="${i18nString(UIStrings.deleteTooltip)}"
+            title=${i18nString(UIStrings.deleteTooltip)}
             class="delete-icon"
             tabindex="0"
             role="button"
-            @click="${handleDeleteClick}"
-            @keypress="${handleKeyPress}"
-            aria-label="${i18nString(UIStrings.brandDeleteAriaLabel, {
+            @click=${handleDeleteClick}
+            @keypress=${handleKeyPress}
+            aria-label=${i18nString(UIStrings.brandDeleteAriaLabel, {
         PH1: index + 1,
-      })}"
+      })}
           >
           </${IconButton.Icon.Icon.litTagName}>
         </div>
@@ -507,9 +507,9 @@ export class UserAgentClientHintsForm extends HTMLElement {
         role="button"
         tabindex="0"
         id="add-brand-button"
-        aria-label="${i18nString(UIStrings.addBrand)}"
-        @click="${this.handleAddBrandClick}"
-        @keypress="${this.handleAddBrandKeyPress}"
+        aria-label=${i18nString(UIStrings.addBrand)}
+        @click=${this.handleAddBrandClick}
+        @keypress=${this.handleAddBrandKeyPress}
       >
         <${IconButton.Icon.Icon.litTagName}
           aria-hidden="true"
@@ -547,16 +547,16 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <div
           class="tree-title"
           role="button"
-          @click="${this.handleTreeClick}"
+          @click=${this.handleTreeClick}
           tabindex="0"
-          @keydown="${this.handleTreeExpand}"
-          aria-expanded="${this.isFormOpened}"
+          @keydown=${this.handleTreeExpand}
+          aria-expanded=${this.isFormOpened}
           aria-controls="form-container"
-          @disabled="${this.isFormDisabled}"
-          aria-disabled="${this.isFormDisabled}"
+          @disabled=${this.isFormDisabled}
+          aria-disabled=${this.isFormDisabled}
         >
           <${IconButton.Icon.Icon.litTagName}
-            class="${this.isFormOpened ? '' : 'rotate-icon'}"
+            class=${this.isFormOpened ? '' : 'rotate-icon'}
             .data=${
         {color: 'var(--client-hints-form-icon-color)', iconName: 'chromeSelect', width: '20px'} as
         IconButton.Icon.IconData}
@@ -568,8 +568,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
            href="https://web.dev/user-agent-client-hints/"
            target="_blank"
            class="info-link"
-           @keypress="${this.handleLinkPress}"
-           aria-label="${i18nString(UIStrings.userAgentClientHintsInfo)}"
+           @keypress=${this.handleLinkPress}
+           aria-label=${i18nString(UIStrings.userAgentClientHintsInfo)}
           >
             <${IconButton.Icon.Icon.litTagName}
               .data=${
@@ -582,7 +582,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <form
           id="form-container"
           class="form-container ${this.isFormOpened ? '' : 'hide-container'}"
-          @submit="${this.handleSubmit}"
+          @submit=${this.handleSubmit}
         >
           ${brandSection}
           ${fullBrowserInput}
@@ -591,7 +591,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
           ${deviceModelSection}
           ${submitButton}
         </form>
-        <div aria-live="polite" aria-label="${this.brandsModifiedAriaMessage}"></div>
+        <div aria-live="polite" aria-label=${this.brandsModifiedAriaMessage}></div>
       </section>
     `;
     // clang-format off

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -284,7 +284,8 @@ export class TimelineTreeView extends UI.Widget.VBox implements UI.SearchableVie
         new UI.Toolbar.ToolbarInput(i18nString(UIStrings.filter), this.getToolbarInputAccessiblePlaceHolder());
     textFilterUI.addEventListener(UI.Toolbar.ToolbarInput.Event.TextChanged, () => {
       const searchQuery = textFilterUI.value();
-      this.textFilterInternal.setRegExp(searchQuery ? createPlainTextSearchRegex(searchQuery, 'i') : null);
+      this.textFilterInternal.setRegExp(
+          searchQuery ? Platform.StringUtilities.createPlainTextSearchRegex(searchQuery, 'i') : null);
       this.refreshTree();
     }, this);
     this.textFilterUI = textFilterUI;

package/front_end/ui/components/diff_view/DiffView.ts

@@ -191,7 +191,7 @@ class DiffRenderer {
 
   private render(rows: readonly Row[]): LitHtml.TemplateResult {
     return LitHtml.html`
-      <div class="diff-listing" aria-label="${i18nString(UIStrings.changesDiffViewer)}">
+      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)}>
         ${rows.map(row => this.renderRow(row))}
       </div>`;
   }
@@ -213,7 +213,7 @@ class DiffRenderer {
     return LitHtml.html`
       <div class="diff-line-number" aria-hidden="true">${baseNumber}</div>
       <div class="diff-line-number" aria-hidden="true">${curNumber}</div>
-      <div class="${markerClass}" aria-hidden="true">${marker}</div>
+      <div class=${markerClass} aria-hidden="true">${marker}</div>
       <div class="diff-line-content diff-line-${row.type}" data-line-number=${curNumber}>${screenReaderText}${
         this.renderRowContent(row)}</div>`;
   }
@@ -230,10 +230,10 @@ class DiffRenderer {
     for (const token of row.tokens) {
       const tokenContent: (LitHtml.TemplateResult|string)[] = [];
       doc.highlightRange(pos, pos + token.text.length, (text, style) => {
-        tokenContent.push(style ? LitHtml.html`<span class="${style}">${text}</span>` : text);
+        tokenContent.push(style ? LitHtml.html`<span class=${style}>${text}</span>` : text);
       });
       content.push(
-          token.className ? LitHtml.html`<span class="${token.className}">${tokenContent}</span>` :
+          token.className ? LitHtml.html`<span class=${token.className}>${tokenContent}</span>` :
                             LitHtml.html`${tokenContent}`);
       pos += token.text.length;
     }

package/front_end/ui/components/helpers/component-server-setup.ts

@@ -3,28 +3,17 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../../core/common/common.js';
-import * as Root from '../../../core/root/root.js';
 import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
 
-import {CSS_RESOURCES_TO_LOAD_INTO_RUNTIME} from './get-stylesheet.js';
-
 /**
  * Houses any setup required to run the component docs server. Currently this is
  * only populating the runtime CSS cache but may be extended in the future.
  */
-export async function setup(resourcesPrefix = ''): Promise<void> {
+export async function setup(): Promise<void> {
   const setting = {
     get() {
       return 'default';
     },
   } as Common.Settings.Setting<string>;
   ThemeSupport.ThemeSupport.instance({forceNew: true, setting});
-
-  const allPromises = CSS_RESOURCES_TO_LOAD_INTO_RUNTIME.map(resourcePath => {
-    return fetch(resourcesPrefix + '/front_end/' + resourcePath).then(response => response.text()).then(cssText => {
-      Root.Runtime.cachedResources.set(resourcePath, cssText);
-    });
-  });
-
-  await Promise.all(allPromises);
 }

package/front_end/ui/components/helpers/helpers.ts

@@ -6,7 +6,6 @@ import * as ComponentServerSetup from './component-server-setup.js';
 import * as CustomElements from './custom-elements.js';
 import * as Directives from './directives.js';
 import * as GetRootNode from './get-root-node.js';
-import * as LegacyGetStylesheet from './get-stylesheet.js';
 import * as ScheduledRender from './scheduled-render.js';
 import * as SetCSSProperty from './set-css-property.js';
 
@@ -15,7 +14,6 @@ export {
   CustomElements,
   Directives,
   GetRootNode,
-  LegacyGetStylesheet,
   ScheduledRender,
   SetCSSProperty,
 };

package/front_end/ui/components/icon_button/IconButton.ts

@@ -80,7 +80,7 @@ export class IconButton extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
-      <button class="${buttonClasses}" @click=${this.onClickHandler} aria-label="${LitHtml.Directives.ifDefined(this.#accessibleName)}">
+      <button class=${buttonClasses} @click=${this.onClickHandler} aria-label=${LitHtml.Directives.ifDefined(this.#accessibleName)}>
       ${(!this.#compact && this.#leadingText) ? LitHtml.html`<span class="icon-button-title">${this.#leadingText}</span>` : LitHtml.nothing}
       ${filteredGroups.map(counter =>
       LitHtml.html`

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -192,8 +192,8 @@ export class IssueCounter extends HTMLElement {
     };
     LitHtml.render(
         LitHtml.html`
-        <icon-button .data=${data as IconButton.IconButton.IconButtonData} .accessibleName="${
-            this.#accessibleName}"></icon-button>
+        <icon-button .data=${data as IconButton.IconButton.IconButtonData} .accessibleName=${
+            this.#accessibleName}></icon-button>
         `,
         this.#shadow, {host: this});
     this.#tooltipCallback?.();

package/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts

@@ -212,7 +212,7 @@ export class LinearMemoryViewer extends HTMLElement {
     };
     return html`
     <div class="row">
-      <span class="${LitHtml.Directives.classMap(classMap)}">${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
+      <span class=${LitHtml.Directives.classMap(classMap)}>${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
       <span class="divider"></span>
       ${this.renderByteValues(startIndex, endIndex)}
       <span class="divider"></span>
@@ -237,7 +237,7 @@ export class LinearMemoryViewer extends HTMLElement {
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
       const actualIndex = i + this.#memoryOffset;
       const onSelectedByte = isSelectableCell ? this.onSelectedByte.bind(this, actualIndex) : '';
-      cells.push(html`<span class="${LitHtml.Directives.classMap(classMap)}" @click=${onSelectedByte}>${byteValue}</span>`);
+      cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${byteValue}</span>`);
     }
     return html`${cells}`;
   }
@@ -253,7 +253,7 @@ export class LinearMemoryViewer extends HTMLElement {
       const isSelectableCell = i < this.#memory.length;
       const value = isSelectableCell ? html`${this.toAscii(this.#memory[i])}` : '';
       const onSelectedByte = isSelectableCell ? this.onSelectedByte.bind(this, i + this.#memoryOffset) : '';
-      cells.push(html`<span class="${LitHtml.Directives.classMap(classMap)}" @click=${onSelectedByte}>${value}</span>`);
+      cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${value}</span>`);
     }
     return html`${cells}`;
   }

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -105,13 +105,13 @@ const tokenRenderers = new Map<string, (token: any) => LitHtml.TemplateResult>([
   ['space', (): LitHtml.TemplateResult => html``],
   [
     'link',
-    (token): LitHtml.TemplateResult => html`<${MarkdownLink.litTagName} .data="${
-        {key: token.href, title: token.text} as MarkdownLinkData}"></${MarkdownLink.litTagName}>`,
+    (token): LitHtml.TemplateResult => html`<${MarkdownLink.litTagName} .data=${
+        {key: token.href, title: token.text} as MarkdownLinkData}></${MarkdownLink.litTagName}>`,
   ],
   [
     'image',
-    (token): LitHtml.TemplateResult => html`<${MarkdownImage.litTagName} .data="${
-        {key: token.href, title: token.text} as MarkdownImageData}"></${MarkdownImage.litTagName}>`,
+    (token): LitHtml.TemplateResult => html`<${MarkdownImage.litTagName} .data=${
+        {key: token.href, title: token.text} as MarkdownImageData}></${MarkdownImage.litTagName}>`,
   ],
 ]);
 

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -0,0 +1,98 @@
+// Copyright (c) 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Root from '../../../core/root/root.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+import * as IconButton from '../icon_button/icon_button.js';
+
+import previewToggleStyles from './previewToggle.css.js';
+
+const {render, html, nothing} = LitHtml;
+
+export interface PreviewToggleData {
+  name: string;
+  helperText: string|null;
+  feedbackURL: string|null;
+  experiment: Root.Runtime.ExperimentName;
+  onChangeCallback?: (checked: boolean) => void;
+}
+
+const UIStrings = {
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  previewTextFeedbackLink: 'Send us your feedback.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PreviewToggle.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class PreviewToggle extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-preview-toggle`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  #name = '';
+  #helperText: string|null = null;
+  #feedbackURL: string|null = null;
+  #experiment: string = '';
+  #onChangeCallback?: (checked: boolean) => void;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [previewToggleStyles];
+  }
+
+  set data(data: PreviewToggleData) {
+    this.#name = data.name;
+    this.#helperText = data.helperText;
+    this.#feedbackURL = data.feedbackURL;
+    this.#experiment = data.experiment;
+    this.#onChangeCallback = data.onChangeCallback;
+    this.render();
+  }
+
+  private render(): void {
+    const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(
+      html`
+      <div class="experiment-preview">
+        <input type="checkbox" ?checked=${checked} @change=${this.checkboxChanged} aria-label=${this.#name}/>
+        <${IconButton.Icon.Icon.litTagName} .data=${{
+          iconName: 'ic_preview_feature',
+          width: '16px',
+          height: '16px',
+          color: 'var(--color-text-secondary)',
+        } as IconButton.Icon.IconData}>
+        </${IconButton.Icon.Icon.litTagName}>${this.#name}
+      </div>
+      <div class="helper">
+        ${this.#helperText && this.#feedbackURL
+          ? html`<p>${this.#helperText} <x-link href=${this.#feedbackURL}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>`
+          : nothing}
+      </div>`,
+      this.#shadow,
+      {
+        host: this,
+      });
+    // clang-format on
+  }
+
+  private checkboxChanged(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    Root.Runtime.experiments.setEnabled(this.#experiment, checked);
+    this.#onChangeCallback?.(checked);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-preview-toggle', PreviewToggle);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-preview-toggle': PreviewToggle;
+  }
+}

package/front_end/ui/components/panel_feedback/panel_feedback.ts

@@ -4,3 +4,4 @@
 
 export * as FeedbackButton from './FeedbackButton.js';
 export * as PanelFeedback from './PanelFeedback.js';
+export * as PreviewToggle from './PreviewToggle.js';

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: block;
+}
+
+.experiment-preview {
+  display: flex;
+  align-items: center;
+}
+
+.helper {
+  text-align: center;
+  font-style: italic;
+}
+
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--color-primary);
+  text-decoration-line: underline;
+}