chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/utils/utils.test.ts

@@ -205,8 +205,8 @@ describeWithEnvironment('panels/utils', () => {
       const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
       const imagePreview = iconElement.querySelector('.image-network-icon-preview') as HTMLImageElement;
 
-      assert.isTrue(iconElement instanceof HTMLDivElement);
-      assert.isTrue(imagePreview instanceof HTMLImageElement);
+      assert.instanceOf(iconElement, HTMLDivElement);
+      assert.instanceOf(imagePreview, HTMLImageElement);
     });
 
     it('mime win: show document icon for fetch-html', async () => {

package/front_end/panels/web_audio/AudioContextSelector.ts

@@ -92,8 +92,7 @@ export class AudioContextSelector extends Common.ObjectWrapper.ObjectWrapper<Eve
 
   createElementForItem(item: Protocol.WebAudio.BaseAudioContext): Element {
     const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        element, {cssFile: [audioContextSelectorStyles], delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [audioContextSelectorStyles]});
     const title = shadowRoot.createChild('div', 'title');
     UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(item), 100));
     return element;

package/front_end/panels/webauthn/WebauthnPane.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
@@ -131,7 +131,7 @@ describeWithMockConnection('WebAuthn pane', () => {
         assert.fail('Expected dataGrid to be truthy');
         return;
       }
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       let emptyNode = dataGrid.rootNode().children[0];
       assert.isOk(emptyNode);
       assert.deepEqual(emptyNode.data, {});
@@ -151,7 +151,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential appeared and the empty row was removed.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       const credentialNode = dataGrid.rootNode().children[0];
       assert.isOk(credentialNode);
       assert.strictEqual(credentialNode.data, credential);
@@ -159,7 +159,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       // Remove the credential.
       const removeCredential = sinon.stub(model, 'removeCredential').resolves();
       dataGrid.element.querySelectorAll('devtools-button')[1].click();
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       emptyNode = dataGrid.rootNode().children[0];
       assert.isOk(emptyNode);
       assert.deepEqual(emptyNode.data, {});
@@ -202,7 +202,7 @@ describeWithMockConnection('WebAuthn pane', () => {
         assert.fail('Expected dataGrid to be truthy');
         return;
       }
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       const credentialNode = dataGrid.rootNode().children[0];
       assert.isOk(credentialNode);
       assert.strictEqual(credentialNode.data, credential);
@@ -222,7 +222,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential was updated.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       assert.strictEqual(credentialNode.data, updatedCredential1);
 
       // The credential can also be updated through the CREDENTIAL_UPDATED
@@ -241,7 +241,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential was updated.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       assert.strictEqual(credentialNode.data, updatedCredential2);
 
       // Updating a different credential should not affect the existing one.
@@ -259,7 +259,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential was unchanged.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       assert.strictEqual(credentialNode.data, updatedCredential2);
     });
 
@@ -295,7 +295,7 @@ describeWithMockConnection('WebAuthn pane', () => {
         assert.fail('Expected dataGrid to be truthy');
         return;
       }
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       const credentialNode = dataGrid.rootNode().children[0];
       assert.isOk(credentialNode);
       assert.strictEqual(credentialNode.data, credential);
@@ -305,14 +305,58 @@ describeWithMockConnection('WebAuthn pane', () => {
         authenticatorId,
         credentialId: 'another credential',
       });
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
 
       // Delete the credential. It should be removed from the list.
       model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_DELETED, {
         authenticatorId,
         credentialId: credential.credentialId,
       });
-      assert.strictEqual(dataGrid.rootNode().children.length, 0);
+      assert.lengthOf(dataGrid.rootNode().children, 0);
+    });
+
+    it('disables "internal" if an internal authenticator exists', async () => {
+      const authenticatorId = 'authenticator-1' as Protocol.WebAuthn.AuthenticatorId;
+      let panel = new Webauthn.WebauthnPane.WebauthnPaneImpl();
+      let transport = panel.transportSelect;
+      if (!transport) {
+        assert.fail('Transport select is not present');
+      }
+      let internalTransportIndex = -1;
+      for (let i = 0; i < transport.options.length; ++i) {
+        if (transport.options[i].value === Protocol.WebAuthn.AuthenticatorTransport.Internal) {
+          internalTransportIndex = i;
+          break;
+        }
+      }
+      assert.notEqual(internalTransportIndex, -1);
+      assert.isFalse(transport.options[internalTransportIndex].disabled);
+
+      // Add an internal authenticator.
+      transport.selectedIndex = internalTransportIndex;
+      const addAuthenticator = sinon.stub(model, 'addAuthenticator').resolves(authenticatorId);
+      panel.addAuthenticatorButton?.click();
+      await new Promise(resolve => setTimeout(resolve, 0));
+      assert.strictEqual(addAuthenticator.called, inScope);
+      if (!inScope) {
+        return;
+      }
+
+      // The "internal" option should have been disabled, and another option selected.
+      assert.notEqual(transport.selectedIndex, internalTransportIndex);
+      assert.isTrue(transport.options[internalTransportIndex].disabled);
+
+      // Restoring the authenticator when loading the panel again should also cause "internal" to be disabled.
+      panel = new Webauthn.WebauthnPane.WebauthnPaneImpl();
+      transport = panel.transportSelect;
+      if (!transport) {
+        assert.fail('Transport select is not present');
+      }
+      assert.isTrue(transport.options[internalTransportIndex].disabled);
+
+      // Removing the internal authenticator should re-enable the option.
+      panel.removeAuthenticator(authenticatorId);
+      assert.isFalse(transport.options[internalTransportIndex].disabled);
     });
   };
 

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -251,7 +251,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #newAuthenticatorSection: HTMLElement|undefined;
   #newAuthenticatorForm: HTMLElement|undefined;
   #protocolSelect: HTMLSelectElement|undefined;
-  #transportSelect: HTMLSelectElement|undefined;
+  transportSelect: HTMLSelectElement|undefined;
   #residentKeyCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   residentKeyCheckbox: HTMLInputElement|undefined;
   #userVerificationCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
@@ -481,23 +481,43 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   }
 
   #updateEnabledTransportOptions(enabledOptions: Protocol.WebAuthn.AuthenticatorTransport[]): void {
-    if (!this.#transportSelect) {
+    if (!this.transportSelect) {
       return;
     }
 
-    const prevValue = this.#transportSelect.value;
-    this.#transportSelect.removeChildren();
+    const prevValue = this.transportSelect.value;
+    this.transportSelect.removeChildren();
 
     for (const option of enabledOptions) {
-      this.#transportSelect.appendChild(UI.UIUtils.createOption(option, option, option));
+      this.transportSelect.appendChild(UI.UIUtils.createOption(option, option, option));
     }
 
     // Make sure the currently selected value stays the same.
-    this.#transportSelect.value = prevValue;
+    this.transportSelect.value = prevValue;
     // If the new set does not include the previous value.
-    if (!this.#transportSelect.value) {
+    if (!this.transportSelect.value) {
       // Select the first available value.
-      this.#transportSelect.selectedIndex = 0;
+      this.transportSelect.selectedIndex = 0;
+    }
+    this.#updateInternalTransportAvailability();
+  }
+
+  #updateInternalTransportAvailability(): void {
+    if (!this.transportSelect?.options) {
+      return;
+    }
+    const hasInternal = Boolean(this.#availableAuthenticatorSetting.get().find(
+        authenticator => authenticator.transport === Protocol.WebAuthn.AuthenticatorTransport.Internal));
+    for (let i = 0; i < this.transportSelect.options.length; ++i) {
+      const option = this.transportSelect.options[i];
+      if (option.value === Protocol.WebAuthn.AuthenticatorTransport.Internal) {
+        option.disabled = hasInternal;
+        // This relies on "internal" never being the first or only element.
+        if (i === this.transportSelect.selectedIndex) {
+          --this.transportSelect.selectedIndex;
+        }
+        break;
+      }
     }
   }
 
@@ -518,8 +538,6 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         Protocol.WebAuthn.AuthenticatorTransport.Usb,
         Protocol.WebAuthn.AuthenticatorTransport.Ble,
         Protocol.WebAuthn.AuthenticatorTransport.Nfc,
-        // TODO (crbug.com/1034663): Toggle cable as option depending on if cablev2 flag is on.
-        // Protocol.WebAuthn.AuthenticatorTransport.Cable,
         Protocol.WebAuthn.AuthenticatorTransport.Internal,
       ]);
     } else {
@@ -565,7 +583,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
     const protocolSelectTitle = UI.UIUtils.createLabel(i18nString(UIStrings.protocol), 'authenticator-option-label');
     protocolGroup.appendChild(protocolSelectTitle);
-    this.#protocolSelect = (protocolGroup.createChild('select', 'chrome-select') as HTMLSelectElement);
+    this.#protocolSelect = protocolGroup.createChild('select', 'chrome-select');
     this.#protocolSelect.setAttribute('jslog', `${VisualLogging.dropDown('protocol').track({change: true})}`);
     UI.ARIAUtils.bindLabelToControl(protocolSelectTitle, (this.#protocolSelect as Element));
     Object.values(PROTOCOL_AUTHENTICATOR_VALUES).sort().forEach((option: Protocol.WebAuthn.AuthenticatorProtocol) => {
@@ -580,9 +598,9 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
     const transportSelectTitle = UI.UIUtils.createLabel(i18nString(UIStrings.transport), 'authenticator-option-label');
     transportGroup.appendChild(transportSelectTitle);
-    this.#transportSelect = (transportGroup.createChild('select', 'chrome-select') as HTMLSelectElement);
-    this.#transportSelect.setAttribute('jslog', `${VisualLogging.dropDown('transport').track({change: true})}`);
-    UI.ARIAUtils.bindLabelToControl(transportSelectTitle, (this.#transportSelect as Element));
+    this.transportSelect = transportGroup.createChild('select', 'chrome-select');
+    this.transportSelect.setAttribute('jslog', `${VisualLogging.dropDown('transport').track({change: true})}`);
+    UI.ARIAUtils.bindLabelToControl(transportSelectTitle, (this.transportSelect as Element));
     // transportSelect will be populated in updateNewAuthenticatorSectionOptions.
 
     this.#residentKeyCheckboxLabel =
@@ -642,6 +660,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
       const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
       const prefersReducedMotion = mediaQueryList.matches;
       section.scrollIntoView({block: 'start', behavior: prefersReducedMotion ? 'auto' : 'smooth'});
+      this.#updateInternalTransportAvailability();
     }
   }
 
@@ -660,16 +679,16 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
     await this.#clearActiveAuthenticator();
     const activeButtonContainer = headerElement.createChild('div', 'active-button-container');
-    const activeLabel =
-        UI.UIUtils.createRadioLabel(`active-authenticator-${authenticatorId}`, i18nString(UIStrings.active));
-    activeLabel.radioElement.addEventListener('change', this.#setActiveAuthenticator.bind(this, authenticatorId));
+    const {label: activeLabel, radio: activeRadio} = UI.UIUtils.createRadioButton(
+        'active-authenticator', i18nString(UIStrings.active), 'webauthn.active-authenticator');
+    activeRadio.addEventListener('change', this.#setActiveAuthenticator.bind(this, authenticatorId));
+    activeRadio.checked = true;
     activeButtonContainer.appendChild(activeLabel);
-    (activeLabel.radioElement as HTMLInputElement).checked = true;
     this.#activeAuthId = authenticatorId;  // Newly added authenticator is automatically set as active.
 
     const removeButton = headerElement.createChild('button', 'text-button');
     removeButton.textContent = i18nString(UIStrings.remove);
-    removeButton.addEventListener('click', this.#removeAuthenticator.bind(this, authenticatorId));
+    removeButton.addEventListener('click', this.removeAuthenticator.bind(this, authenticatorId));
     removeButton.setAttribute('jslog', `${VisualLogging.action('webauthn.remove-authenticator').track({click: true})}`);
 
     const toolbar = new UI.Toolbar.Toolbar('edit-name-toolbar', titleElement);
@@ -677,7 +696,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     const saveName = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.saveName), 'checkmark', undefined, 'save-name');
     saveName.setVisible(false);
 
-    const nameField = (titleElement.createChild('input', 'authenticator-name-field') as HTMLInputElement);
+    const nameField = titleElement.createChild('input', 'authenticator-name-field');
     nameField.placeholder = i18nString(UIStrings.enterNewName);
     nameField.disabled = true;
     nameField.setAttribute('jslog', `${VisualLogging.textField('name').track({keydown: 'Enter', change: true})}`);
@@ -804,7 +823,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
   #handleSaveNameButton(
       titleElement: Element, nameField: HTMLInputElement, editName: UI.Toolbar.ToolbarItem,
-      saveName: UI.Toolbar.ToolbarItem, activeLabel: UI.UIUtils.DevToolsRadioButton): void {
+      saveName: UI.Toolbar.ToolbarItem, activeLabel: HTMLLabelElement): void {
     const name = nameField.value;
     if (!name) {
       return;
@@ -816,15 +835,15 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     this.#updateActiveLabelTitle(activeLabel, name);
   }
 
-  #updateActiveLabelTitle(activeLabel: UI.UIUtils.DevToolsRadioButton, authenticatorName: string): void {
+  #updateActiveLabelTitle(activeLabel: HTMLLabelElement, authenticatorName: string): void {
     UI.Tooltip.Tooltip.install(
-        activeLabel.radioElement, i18nString(UIStrings.setSAsTheActiveAuthenticator, {PH1: authenticatorName}));
+        activeLabel, i18nString(UIStrings.setSAsTheActiveAuthenticator, {PH1: authenticatorName}));
   }
 
   /**
    * Removes both the authenticator and its respective UI element.
    */
-  #removeAuthenticator(authenticatorId: Protocol.WebAuthn.AuthenticatorId): void {
+  removeAuthenticator(authenticatorId: Protocol.WebAuthn.AuthenticatorId): void {
     if (this.#authenticatorsView) {
       const child = this.#authenticatorsView.querySelector(`[data-authenticator-id=${CSS.escape(authenticatorId)}]`);
       if (child) {
@@ -854,11 +873,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         this.#activeAuthId = null;
       }
     }
+    this.#updateInternalTransportAvailability();
   }
 
   #createOptionsFromCurrentInputs(): Protocol.WebAuthn.VirtualAuthenticatorOptions {
     // TODO(crbug.com/1034663): Add optionality for isUserVerified param.
-    if (!this.#protocolSelect || !this.#transportSelect || !this.residentKeyCheckbox ||
+    if (!this.#protocolSelect || !this.transportSelect || !this.residentKeyCheckbox ||
         !this.#userVerificationCheckbox || !this.largeBlobCheckbox) {
       throw new Error('Unable to create options from current inputs');
     }
@@ -867,7 +887,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
       protocol: this.#protocolSelect.options[this.#protocolSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorProtocol,
       ctap2Version: Protocol.WebAuthn.Ctap2Version.Ctap2_1,
-      transport: this.#transportSelect.options[this.#transportSelect.selectedIndex].value as
+      transport: this.transportSelect.options[this.transportSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorTransport,
       hasResidentKey: this.residentKeyCheckbox.checked,
       hasUserVerification: this.#userVerificationCheckbox.checked,
@@ -899,7 +919,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #updateActiveButtons(): void {
     const authenticators = this.#authenticatorsView.getElementsByClassName('authenticator-section');
     Array.from(authenticators).forEach((authenticator: Element) => {
-      const button = (authenticator.querySelector('input.dt-radio-button') as HTMLInputElement);
+      const button = (authenticator.querySelector('input[type="radio"]') as HTMLInputElement);
       if (!button) {
         return;
       }

package/front_end/panels/webauthn/webauthnPane.css

@@ -69,11 +69,6 @@
   margin: 0;
 }
 
-.authenticator-field {
-  display: flex;
-  margin: auto;
-}
-
 .authenticator-section-header {
   display: flex;
   justify-content: space-between;
@@ -100,8 +95,6 @@
 }
 
 .authenticator-field-value {
-  padding: 5px 0;
-  display: inline-block;
   font-family: monospace;
 }
 
@@ -110,6 +103,7 @@
   top: 2px;
 }
 
+.authenticator-field,
 .authenticator-option {
   display: flex;
   padding-bottom: 10px;
@@ -124,8 +118,7 @@
 .authenticator-option-label {
   text-align: right;
   width: 200px;
-  display: inline-block;
-  padding: 0 10px 0 0;
+  padding-right: 10px;
 }
 
 td .text-button {

package/front_end/panels/whats_new/ReleaseNote.test.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import {
   deinitializeGlobalVars,
   initializeGlobalVars,
@@ -28,6 +28,7 @@ describe('Release Note', () => {
           header: 'Highlights from Chrome 100 update',
           markdownLinks: [],
           link: 'https://developers.google.com/web/tools/chrome-devtools/' as Platform.DevToolsPath.UrlString,
+          videoLinks: [],
         },
     );
 
@@ -41,7 +42,7 @@ describe('Release Note', () => {
       persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
       order: 1,
       async loadView() {
-        return WhatsNew.ReleaseNoteView.ReleaseNoteViewWrapper.instance();
+        return new WhatsNew.ReleaseNoteView.ReleaseNoteView();
       },
     });
 

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -6,17 +6,25 @@
 // be shown in Canary (e.g. make sure the release notes are accurate).
 // https://github.com/ChromeDevTools/devtools-frontend/wiki/Release-Notes
 
+import type * as Platform from '../../core/platform/platform.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 
 let registeredLinks = false;
 
-interface ReleaseNote {
+export interface ReleaseNote {
   version: number;
   header: string;
   markdownLinks: {key: string, link: string}[];
+  videoLinks: {description: string, link: Platform.DevToolsPath.UrlString, type?: VideoType}[];
   link: string;
 }
 
+export const enum VideoType {
+  WHATS_NEW = 'WhatsNew',
+  DEVTOOLS_TIPS = 'DevtoolsTips',
+  OTHER = 'Other',
+}
+
 export function setReleaseNoteForTest(testReleaseNote: ReleaseNote): void {
   releaseNote = testReleaseNote;
 }
@@ -32,21 +40,28 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 73,
-  header: 'Highlights from the Chrome 132 update',
+  version: 74,
+  header: 'What\'s new in DevTools 133',
   markdownLinks: [
     {
-      key: 'ai-assistance',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-132/#ai-assistance',
+      key: 'persistent-chat-history',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-133/#persistent-chat-history',
     },
     {
-      key: 'chat-history',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-132/#chat-history',
+      key: 'perf-nav',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-133/#perf-nav',
     },
     {
-      key: 'interaction-phases',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-132/#interaction-phases',
+      key: 'perf-image-delivery',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-133/#perf-image-delivery',
+    },
+  ],
+  videoLinks: [
+    {
+      description: 'Highlights of updates from Chrome 130-132',
+      link: 'https://www.youtube.com/watch?v=kzDUe-f4gac' as Platform.DevToolsPath.UrlString,
+      type: VideoType.WHATS_NEW,
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-132/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-133/',
 };

package/front_end/panels/whats_new/ReleaseNoteView.test.ts

@@ -0,0 +1,159 @@
+// Copyright 2024 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 Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
+import {
+  describeWithEnvironment,
+} from '../../testing/EnvironmentHelpers.js';
+import type * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as UI from '../../ui/legacy/legacy.js';
+
+import * as WhatsNew from './whats_new.js';
+
+const CONTENT1 = 'Something something topic-1.\n';
+const CONTENT2 = 'Something something topic-2.\n';
+
+describeWithEnvironment('Release Note View', () => {
+  before(() => {
+    WhatsNew.ReleaseNoteText.setReleaseNoteForTest(
+        {
+          version: 99,
+          header: 'What\'s new in DevTools 100',
+          markdownLinks: [
+            {
+              key: 'topic-1',
+              link: 'https://google.com.com/#topic-1',
+            },
+          ],
+          videoLinks: [
+            {
+              description: 'Highlight from the Chrome 132 update',
+              link: 'https://developer.chrome.com/blog/new-in-devtools-132/' as Platform.DevToolsPath.UrlString,
+              type: WhatsNew.ReleaseNoteText.VideoType.WHATS_NEW,
+            },
+            {
+              description: 'DevTools tips',
+              link: 'https://developer.chrome.com/blog/devtools-tips-39' as Platform.DevToolsPath.UrlString,
+              type: WhatsNew.ReleaseNoteText.VideoType.DEVTOOLS_TIPS,
+            },
+            {
+              description: 'Other',
+              link: 'https://developer.chrome.com/' as Platform.DevToolsPath.UrlString,
+              type: WhatsNew.ReleaseNoteText.VideoType.OTHER,
+            },
+          ],
+          link: 'https://google.com',
+        },
+    );
+  });
+
+  it('splits up markdown file content into separate sections', async () => {
+    const h1 = '### [Topic 1](topic-1)\n';
+    const h2 = '### [Topic 2](topic-2)\n';
+
+    const content = [h1, CONTENT1, h2, CONTENT2];
+    const notes = content.join('');
+
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(notes));
+    const splitContent = await WhatsNew.ReleaseNoteView.getMarkdownContent();
+    assert.lengthOf(splitContent, 2);
+
+    for (let i = 0; i < 2; ++i) {
+      assert.lengthOf(splitContent[i], 2);
+      assert.deepEqual(splitContent[i][0].type, 'heading');
+      assert.deepEqual(splitContent[i][1].type, 'paragraph');
+      assert.deepEqual(splitContent[i][0].raw, content[i * 2]);
+      assert.deepEqual(splitContent[i][1].raw, content[i * 2 + 1]);
+    }
+  });
+
+  it('groups nested markdown headers into one', async () => {
+    const h1 = '### [Topic 1](topic-1)\n';
+    const h2 = '#### [Topic 2](topic-2)\n';
+
+    const content = [h1, CONTENT1, h2, CONTENT2];
+    const notes = content.join('');
+
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(notes));
+    const splitContent = await WhatsNew.ReleaseNoteView.getMarkdownContent();
+    assert.lengthOf(splitContent, 1);
+    assert.lengthOf(splitContent[0], 4);
+
+    assert.deepEqual(splitContent[0][0].raw, h1);
+    assert.deepEqual(splitContent[0][1].raw, CONTENT1);
+    assert.deepEqual(splitContent[0][2].raw, h2);
+    assert.deepEqual(splitContent[0][3].raw, CONTENT2);
+  });
+
+  it('splits headerless paragraphs into its own section', async () => {
+    const h1 = '### [Topic 1](topic-1)\n';
+    const content = [CONTENT1, h1];
+    const notes = content.join('');
+
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(notes));
+    const splitContent = await WhatsNew.ReleaseNoteView.getMarkdownContent();
+    assert.lengthOf(splitContent, 2);
+    assert.lengthOf(splitContent[0], 1);
+    assert.lengthOf(splitContent[1], 1);
+
+    assert.deepEqual(splitContent[0][0].raw, CONTENT1);
+    assert.deepEqual(splitContent[1][0].raw, h1);
+  });
+
+  it('renders markdown content', async () => {
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(CONTENT1));
+    const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
+    await releaseNoteView.updateComplete;
+
+    const markdown = releaseNoteView.contentElement.querySelector('devtools-markdown-view');
+    assert.isNotNull(markdown);
+  });
+
+  it('renders button that links to blogpost', async () => {
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(''));
+    const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
+    await releaseNoteView.updateComplete;
+    const button = releaseNoteView.contentElement.querySelector<Buttons.Button.Button>('devtools-button');
+    assert.isNotNull(button);
+    const openInNewTabStub = sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'openInNewTab');
+
+    button.click();
+    assert.strictEqual(openInNewTabStub.callCount, 1);
+    assert.isTrue(
+        openInNewTabStub.firstCall.calledWith('https://google.com' as Platform.DevToolsPath.UrlString),
+        'openInNewTab was not called with the expected URL.');
+  });
+
+  it('renders video links with description text', async () => {
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(''));
+    const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
+    await releaseNoteView.updateComplete;
+    const videos = releaseNoteView.contentElement.querySelectorAll<UI.XLink.XLink>('.video-container > x-link');
+    assert.lengthOf(videos, 3);
+
+    const releaseNotes = WhatsNew.ReleaseNoteText.getReleaseNote();
+    const descriptions = Array.from(videos).map(n => n.innerText.trim());
+    const expectedDescriptions = releaseNotes.videoLinks.map(video => video.description);
+    assert.deepEqual(descriptions, expectedDescriptions);
+  });
+
+  it('renders expected thumbnails', async () => {
+    sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(''));
+    const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
+    await releaseNoteView.updateComplete;
+    const thumbnails = releaseNoteView.contentElement.querySelectorAll<HTMLImageElement>('.thumbnail');
+    assert.lengthOf(thumbnails, 3);
+
+    const thumbnailFilepaths = Array.from(thumbnails).map(n => n.src);
+    const expectedThumbnails = [
+      WhatsNew.ReleaseNoteView.WHATS_NEW_THUMBNAIL,
+      WhatsNew.ReleaseNoteView.DEVTOOLS_TIPS_THUMBNAIL,
+      WhatsNew.ReleaseNoteView.GENERAL_THUMBNAIL,
+    ];
+    const expectedFilepaths = expectedThumbnails.map(src => new URL(src, import.meta.url).toString());
+
+    assert.deepEqual(thumbnailFilepaths, expectedFilepaths);
+  });
+});