chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -137,19 +137,20 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     UI.ARIAUtils.setLabel(inputElement, i18nString(UIStrings.urlBreakpoint));
     this.addListElement(inputElementContainer, this.#list.element.firstChild as Element | null);
 
-    function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
+    const commit = (_element: Element, newText: string): void => {
       this.removeListElement(inputElementContainer);
-      if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(text, true);
-        this.setBreakpoint(text);
-      }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, true);
+      this.setBreakpoint(newText);
       this.update();
-    }
+    };
+
+    const cancel = (): void => {
+      this.removeListElement(inputElementContainer);
+      this.update();
+    };
 
-    const config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config as UI.InplaceEditor.Config<any>);
+    const config = new UI.InplaceEditor.Config(commit, cancel, undefined);
+    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
   }
 
   heightForItem(_item: string): number {
@@ -336,40 +337,42 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       element.classList.add('hidden');
     }
 
-    function finishEditing(this: XHRBreakpointsSidebarPane, accept: boolean, e: Element, text: string): void {
+    const commit = (inputElement: Element, newText: string, _oldText: string|null, element?: Element): void => {
       this.removeListElement(inputElement);
-      if (accept) {
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
-        this.removeBreakpoint(breakKeyword);
-        let enabled = true;
-        if (element) {
-          const breakpointEntryElement = containerToBreakpointEntry.get(element);
-          const checkboxElement =
-              breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
-          if (checkboxElement) {
-            enabled = checkboxElement.checked;
-          }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().removeXHRBreakpoint(breakKeyword);
+      this.removeBreakpoint(breakKeyword);
+      let enabled = true;
+      if (element) {
+        const breakpointEntryElement = containerToBreakpointEntry.get(element);
+        const checkboxElement =
+            breakpointEntryElement ? breakpointEntryToCheckbox.get(breakpointEntryElement) : undefined;
+        if (checkboxElement) {
+          enabled = checkboxElement.checked;
         }
-        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(text, enabled);
-        this.setBreakpoint(text);
-        this.#list.selectItem(text);
-      } else if (element) {
+      }
+      SDK.DOMDebuggerModel.DOMDebuggerManager.instance().addXHRBreakpoint(newText, enabled);
+      this.setBreakpoint(newText);
+      this.#list.selectItem(newText);
+      this.focus();
+    };
+
+    const cancel = (inputElement: Element, element?: Element): void => {
+      this.removeListElement(inputElement);
+      if (element) {
         element.classList.remove('hidden');
       }
       this.focus();
-    }
+    };
 
-    const config = new UI.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config as UI.InplaceEditor.Config<any>);
+    const config = new UI.InplaceEditor.Config(commit, cancel, element);
+    UI.InplaceEditor.InplaceEditor.startEditing(inputElement, config);
   }
 
   flavorChanged(_object: Object|null): void {
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const isEmpty = this.#breakpoints.length === 0;
     this.#list.element.classList.toggle('hidden', isEmpty);
     this.#emptyElement.classList.toggle('hidden', !isEmpty);

package/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css

@@ -44,6 +44,6 @@
   z-index: -1;
 }
 
-.source-code[is="dt-checkbox"] {
+dt-checkbox.source-code {
   max-width: 100%;
 }

package/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css

@@ -40,7 +40,7 @@
   background-color: var(--sys-color-tonal-container);
 }
 
-.breakpoint-entry [is="dt-checkbox"] {
+.breakpoint-entry dt-checkbox {
   max-width: 100%;
 }
 

package/front_end/panels/console/ConsoleViewMessage.test.ts

@@ -16,10 +16,35 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Console from './console.js';
 // The css files aren't exported by the bundle, so we need to import it directly.
 // eslint-disable-next-line rulesdir/es_modules_import
 import consoleViewStyles from './consoleView.css.js';
 
+describe('ConsoleViewMessage', () => {
+  describe('concatErrorDescriptionAndIssueSummary', () => {
+    const {concatErrorDescriptionAndIssueSummary} = Console.ConsoleViewMessage;
+
+    it('correctly appends the issue summary in case of single line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.',
+      );
+    });
+
+    it('correctly inserts the issue summary in case of multi-line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch\n  at (index):25:5',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.\n  at (index):25:5',
+      );
+    });
+  });
+});
+
 describeWithMockConnection('ConsoleViewMessage', () => {
   describe('anchor rendering', () => {
     it('links to the top frame for normal console message', () => {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -221,6 +221,24 @@ export const getMessageForElement = (element: Element): ConsoleViewMessage|undef
   return elementToMessage.get(element);
 };
 
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export const concatErrorDescriptionAndIssueSummary = (description: string, issueSummary: string): string => {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+};
+
 // This value reflects the 18px min-height of .console-message, plus the
 // 1px border of .console-message-wrapper. Keep in sync with consoleView.css.
 const defaultConsoleRowHeight = 19;
@@ -1704,6 +1722,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     }
 
+    const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
+    if (typeof issueSummary === 'string') {
+      string = concatErrorDescriptionAndIssueSummary(string, issueSummary);
+    }
+
     const linkInfos = parseSourcePositionsFromErrorStack(runtimeModel, string);
     if (!linkInfos?.length) {
       return null;

package/front_end/panels/coverage/CoverageListView.ts

@@ -195,7 +195,7 @@ export class CoverageListView extends UI.Widget.VBox {
     this.setDefaultFocusedChild(dataGridWidget);
   }
 
-  update(coverageInfo: URLCoverageInfo[]): void {
+  override update(coverageInfo: URLCoverageInfo[] = []): void {
     let hadUpdates = false;
     const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size()), 0);
     const rootNode = this.dataGrid.rootNode();

package/front_end/panels/coverage/CoverageView.ts

@@ -542,10 +542,10 @@ export class CoverageView extends UI.Widget.VBox {
       const used = total - unused;
       const percentUsed = total ? Math.round(100 * used / total) : 0;
       return i18nString(UIStrings.sOfSSUsedSoFarSUnused, {
-        PH1: Platform.NumberUtilities.bytesToString(used),
-        PH2: Platform.NumberUtilities.bytesToString(total),
+        PH1: i18n.ByteUtilities.bytesToString(used),
+        PH2: i18n.ByteUtilities.bytesToString(total),
         PH3: percentUsed,
-        PH4: Platform.NumberUtilities.bytesToString(unused),
+        PH4: i18n.ByteUtilities.bytesToString(unused),
       });
     }
   }

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -145,7 +145,7 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     }
   }
 
-  update(items: Iterable<SDK.PageResourceLoader.PageResource>): void {
+  override update(items: Iterable<SDK.PageResourceLoader.PageResource> = []): void {
     let hadUpdates = false;
     const rootNode = this.dataGrid.rootNode();
     for (const item of items) {

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -157,7 +157,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([classesPaneWidgetStyles]);
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -51,6 +51,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
         cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onComputedStyleChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onComputedStyleChanged, this),
         cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onComputedStyleChanged, this),
+        cssModel.addEventListener(SDK.CSSModel.Events.ComputedStyleUpdated, this.onComputedStyleChanged, this),
         domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameResized, this),
       ];
@@ -59,6 +60,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
 
   private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>|null): void {
     delete this.computedStylePromise;
+    // If the event contains `nodeId` and that's not the same as this node's id
+    // we don't emit the COMPUTED_STYLE_CHANGED event.
+    if (event?.data && 'nodeId' in event.data && event.data.nodeId !== this.nodeInternal?.id) {
+      return;
+    }
+
     this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED, event?.data ?? null);
   }
 
@@ -125,8 +132,8 @@ export const enum Events {
 }
 
 export type ComputedStyleChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|
-                                        SDK.CSSModel.StyleSheetChangedEvent|void|SDK.CSSModel.PseudoStateForcedEvent|
-                                        null;
+                                        SDK.CSSModel.StyleSheetChangedEvent|SDK.CSSModel.PseudoStateForcedEvent|
+                                        SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
 
 export type EventTypes = {
   [Events.COMPUTED_STYLE_CHANGED]: ComputedStyleChangedEvent,

package/front_end/panels/elements/ComputedStyleWidget.test.ts

@@ -0,0 +1,72 @@
+// Copyright 2023 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 SDK from '../../core/sdk/sdk.js';
+import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as Elements from './elements.js';
+
+describeWithMockConnection('ComputedStyleWidget', () => {
+  let target: SDK.Target.Target;
+  let view: Elements.ComputedStyleWidget.ComputedStyleWidget;
+  let trackComputedStyleUpdatesForNodeSpy: sinon.SinonSpy;
+
+  beforeEach(() => {
+    stubNoopSettings();
+    target = createTarget();
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, null);
+    trackComputedStyleUpdatesForNodeSpy =
+        sinon.spy(SDK.CSSModel.CSSModel.prototype, 'trackComputedStyleUpdatesForNode');
+
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+    sinon.stub(Elements.ComputedStyleModel.ComputedStyleModel.prototype, 'cssModel').returns(cssModel);
+  });
+
+  afterEach(() => {
+    view.detach();
+  });
+
+  it('tracks computed style updates for the node when the widget is shown', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, node.id);
+  });
+
+  it('tracks computed style updates for the node when the selected node is changed', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, node.id);
+    const newNode = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, newNode);
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, newNode.id);
+  });
+
+  it('removes tracking computed style updates for the node when the widget is hidden', () => {
+    const model = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(model);
+    const node = new SDK.DOMModel.DOMNode(model);
+    UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, node);
+    view = new Elements.ComputedStyleWidget.ComputedStyleWidget();
+    view.markAsRoot();
+    view.show(document.body);
+    view.hideWidget();
+
+    sinon.assert.calledWith(trackComputedStyleUpdatesForNodeSpy, undefined);
+  });
+});

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -291,6 +291,10 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     fontsWidget.show(this.contentElement);
   }
 
+  #handleNodeChange(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
+    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(event.data?.id);
+  }
+
   override onResize(): void {
     const isNarrow = this.contentElement.offsetWidth < 260;
     this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
@@ -299,6 +303,14 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   override wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([computedStyleSidebarPaneStyles]);
+
+    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(this.computedStyleModel.node()?.id);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleNodeChange, this);
+  }
+
+  override willHide(): void {
+    void this.computedStyleModel.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.#handleNodeChange, this);
   }
 
   override async doUpdate(): Promise<void> {

package/front_end/panels/elements/ElementStatePaneWidget.test.ts

@@ -29,6 +29,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     'in-range',
     'out-of-range',
     'visited',
+    'link',
     'checked',
     'indeterminate',
     'placeholder-shown',
@@ -72,7 +73,9 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     for (const pseudoClass of pseudoClasses) {
       const div = view.contentElement.querySelector(`#${pseudoClass}`);
       assert.instanceOf(div, HTMLDivElement);
-      assert.strictEqual(!div.hidden, expectedPseudoClasses.includes(div.id), `Wrong state for ${div.id}`);
+      const shouldShow = expectedPseudoClasses.includes(pseudoClass);
+      assert.strictEqual(
+          !div.hidden, shouldShow, `Checkbox for ${pseudoClass} should be ${shouldShow ? 'shown' : 'hidden'}`);
     }
   };
 
@@ -153,15 +156,13 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     await assertExpectedPseudoClasses(
         'input',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
           'autofill',
         ],
@@ -171,14 +172,14 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for button', async () => {
     await assertExpectedPseudoClasses(
         'button',
-        ['enabled', 'disabled', 'valid', 'invalid', 'read-only'],
+        ['disabled', 'valid', 'invalid', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for fieldset', async () => {
     await assertExpectedPseudoClasses(
         'fieldset',
-        ['enabled', 'disabled', 'valid', 'invalid', 'read-only'],
+        ['disabled', 'valid', 'invalid', 'read-write'],
     );
   });
 
@@ -186,45 +187,82 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     await assertExpectedPseudoClasses(
         'textarea',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
         ],
     );
+    await assertExpectedPseudoClasses(
+        'textarea',
+        [
+          'disabled',
+          'valid',
+          'invalid',
+          'user-valid',
+          'user-invalid',
+          'required',
+          'read-write',
+          'placeholder-shown',
+        ],
+        false, ['readonly', '']);
+    await assertExpectedPseudoClasses(
+        'textarea',
+        [
+          'enabled',
+          'valid',
+          'invalid',
+          'user-valid',
+          'user-invalid',
+          'required',
+          'read-write',
+          'placeholder-shown',
+        ],
+        false, ['disabled', '']);
+    await assertExpectedPseudoClasses(
+        'textarea',
+        [
+          'disabled',
+          'valid',
+          'invalid',
+          'user-valid',
+          'user-invalid',
+          'optional',
+          'read-only',
+          'placeholder-shown',
+        ],
+        false, ['required', '']);
   });
 
   it('Shows the specific pseudo-classes for select', async () => {
     await assertExpectedPseudoClasses(
         'select',
-        ['enabled', 'disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'optional', 'read-only'],
+        ['disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for option', async () => {
     await assertExpectedPseudoClasses(
         'option',
-        ['enabled', 'disabled', 'checked', 'read-only'],
+        ['disabled', 'checked', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for optgroup', async () => {
     await assertExpectedPseudoClasses(
         'optgroup',
-        ['enabled', 'disabled', 'read-only'],
+        ['disabled', 'read-write'],
     );
   });
 
   it('Shows the specific pseudo-classes for FormAssociated', async () => {
     await assertExpectedPseudoClasses(
         'CustomFormAssociatedElement',
-        ['enabled', 'disabled', 'valid', 'invalid'],
+        ['disabled', 'valid', 'invalid', 'read-write'],
         true,
     );
   });
@@ -232,55 +270,74 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for object, output and img', async () => {
     await assertExpectedPseudoClasses(
         'object',
-        ['valid', 'invalid'],
+        ['valid', 'invalid', 'read-write'],
     );
 
     await assertExpectedPseudoClasses(
         'output',
-        ['valid', 'invalid', 'read-only'],
+        ['valid', 'invalid', 'read-write'],
     );
 
     await assertExpectedPseudoClasses(
         'img',
-        ['valid', 'invalid'],
+        ['valid', 'invalid', 'read-write'],
     );
   });
   it('Shows the specific pseudo-classes for progress', async () => {
     await assertExpectedPseudoClasses(
         'progress',
-        ['read-only', 'indeterminate'],
+        ['read-write', 'indeterminate'],
     );
   });
 
   it('Shows the specific pseudo-classes for a and area with href', async () => {
     await assertExpectedPseudoClasses(
         'a',
-        ['visited'],
+        ['visited', 'link', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );
 
     await assertExpectedPseudoClasses(
-        'a',
-        ['visited'],
+        'area',
+        ['visited', 'link', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );
   });
 
+  it('Shows the specific pseudo-classes for a and area without href', async () => {
+    await assertExpectedPseudoClasses(
+        'a',
+        ['read-write'],
+    );
+
+    await assertExpectedPseudoClasses(
+        'area',
+        ['read-write'],
+    );
+  });
+
+  it('Shows the specific pseudo-classes for contenteditable div', async () => {
+    await assertExpectedPseudoClasses(
+        'div',
+        ['read-only'],
+        false,
+        ['contenteditable', ''],
+    );
+  });
+
   it('Shows the specific pseudo-classes for radio or checkbox inputs', async () => {
     await assertExpectedPseudoClasses(
         'input',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
           'autofill',
           'checked',
@@ -292,15 +349,13 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     await assertExpectedPseudoClasses(
         'input',
         [
-          'enabled',
           'disabled',
           'valid',
           'invalid',
           'user-valid',
           'user-invalid',
           'required',
-          'optional',
-          'read-write',
+          'read-only',
           'placeholder-shown',
           'autofill',
           'checked',
@@ -314,19 +369,19 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for datalist, label, legend and meter', async () => {
     await assertExpectedPseudoClasses(
         'datalist',
-        ['read-only'],
+        ['read-write'],
     );
     await assertExpectedPseudoClasses(
         'label',
-        ['read-only'],
+        ['read-write'],
     );
     await assertExpectedPseudoClasses(
         'legend',
-        ['read-only'],
+        ['read-write'],
     );
     await assertExpectedPseudoClasses(
         'meter',
-        ['read-only'],
+        ['read-write'],
     );
   });
 });