From be9c8f491ff2a3d5e6518aff6233c559619aeb49 Mon Sep 17 00:00:00 2001
From: Eric Leese <leese@chromium.org>
Date: Fri, 10 Jan 2025 04:48:05 -0800
Subject: [PATCH] Display option to force :open pseudo class

Bug: 383157184
Change-Id: Ib12a89c8914fe4ff2761dfea823979b8966d4fed
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6164989
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Auto-Submit: Eric Leese <leese@chromium.org>
Commit-Queue: Eric Leese <leese@chromium.org>
---
 .../elements/ElementStatePaneWidget.test.ts   | 27 ++++++-------------
 .../panels/elements/ElementStatePaneWidget.ts |  8 ++++++
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/front_end/panels/elements/ElementStatePaneWidget.test.ts b/front_end/panels/elements/ElementStatePaneWidget.test.ts
index 6d4b62c588..f7d013202a 100644
--- a/front_end/panels/elements/ElementStatePaneWidget.test.ts
+++ b/front_end/panels/elements/ElementStatePaneWidget.test.ts
@@ -16,24 +16,10 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   let view: Elements.ElementStatePaneWidget.ElementStatePaneWidget;
 
   const pseudoClasses = [
-    'enabled',
-    'disabled',
-    'valid',
-    'invalid',
-    'user-valid',
-    'user-invalid',
-    'required',
-    'optional',
-    'read-only',
-    'read-write',
-    'in-range',
-    'out-of-range',
-    'visited',
-    'link',
-    'checked',
-    'indeterminate',
-    'placeholder-shown',
-    'autofill',
+    'enabled',       'disabled',          'valid',    'invalid',   'user-valid',
+    'user-invalid',  'required',          'optional', 'read-only', 'read-write',
+    'in-range',      'out-of-range',      'visited',  'link',      'checked',
+    'indeterminate', 'placeholder-shown', 'autofill', 'open',
   ];
 
   beforeEach(() => {
@@ -165,6 +151,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
           'read-only',
           'placeholder-shown',
           'autofill',
+          'open',
         ],
     );
   });
@@ -241,7 +228,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for select', async () => {
     await assertExpectedPseudoClasses(
         'select',
-        ['disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'read-write'],
+        ['disabled', 'valid', 'invalid', 'user-valid', 'user-invalid', 'required', 'read-write', 'open'],
     );
   });
 
@@ -342,6 +329,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
           'autofill',
           'checked',
           'indeterminate',
+          'open',
         ],
         false,
         ['type', 'checkbox'],
@@ -360,6 +348,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
           'autofill',
           'checked',
           'indeterminate',
+          'open',
         ],
         false,
         ['type', 'radio'],
diff --git a/front_end/panels/elements/ElementStatePaneWidget.ts b/front_end/panels/elements/ElementStatePaneWidget.ts
index d67dfe668c..08d7f95a62 100644
--- a/front_end/panels/elements/ElementStatePaneWidget.ts
+++ b/front_end/panels/elements/ElementStatePaneWidget.ts
@@ -64,6 +64,7 @@ enum SpecificPseudoStates {
   INDETERMINATE = 'indeterminate',
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
+  OPEN = 'open',
 }
 
 export class ElementStatePaneWidget extends UI.Widget.Widget {
@@ -218,6 +219,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.PLACEHOLDER_SHOWN, createElementStateCheckbox(SpecificPseudoStates.PLACEHOLDER_SHOWN));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.AUTOFILL, createElementStateCheckbox(SpecificPseudoStates.AUTOFILL));
+    this.specificPseudoStateDivs.set(SpecificPseudoStates.OPEN, createElementStateCheckbox(SpecificPseudoStates.OPEN));
 
     this.specificPseudoStateDivs.forEach(div => {
       elementSpecificContainer.appendChild(div);
@@ -415,6 +417,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
       hideSpecificCheckbox(SpecificPseudoStates.AUTOFILL, true);
     }
 
+    if (isElementOfTypes(node, ['input', 'select', 'dialog', 'details'])) {
+      hideSpecificCheckbox(SpecificPseudoStates.OPEN, false);
+    } else {
+      hideSpecificCheckbox(SpecificPseudoStates.OPEN, true);
+    }
+
     this.specificHeader.hidden = showedACheckbox ? false : true;
     this.updateElementSpecificStatesTableForTest();
   }