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>
This commit is contained in:
Eric Leese
2025-01-10 07:59:18 -08:00
committed by Devtools-frontend LUCI CQ
parent ec4c0fcc20
commit be9c8f491f
2 changed files with 16 additions and 19 deletions
@@ -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'],
@@ -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();
}