1955220 - walker.js PSEUDO_SELECTORS array is outdated (e.g. missing ::details-content, :focus-visible, :focus-within, …)

Status: ASSIGNED

(DevTools :: Style Editor, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

In the styleeditor, if you type details::, the autocomplete should have the ::details-content pseudo element

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

The list for autocomplete is defined in https://searchfox.org/mozilla-release/rev/62f34235d373482fc8c3c6a07f3a60c3e224d642/devtools/server/actors/inspector/walker.js#135-166

// The possible completions to a ':' with added score to give certain values
// some preference.
const PSEUDO_SELECTORS = [
  [":active", 1],
  [":hover", 1],
  [":focus", 1],
  [":visited", 0],
  [":link", 0],
  [":first-letter", 0],
  [":first-child", 2],
  [":before", 2],
  [":after", 2],
  [":lang(", 0],
  [":not(", 3],
  [":first-of-type", 0],
  [":last-of-type", 0],
  [":only-of-type", 0],
  [":only-child", 2],
  [":nth-child(", 3],
  [":nth-last-child(", 0],
  [":nth-of-type(", 0],
  [":nth-last-of-type(", 0],
  [":last-child", 2],
  [":root", 0],
  [":empty", 0],
  [":target", 0],
  [":enabled", 0],
  [":disabled", 0],
  [":checked", 1],
  ["::selection", 0],
  ["::marker", 0],
];

For pseudo elements, we could probably use InspectorUtils.getCSSPseudoElementNames() instead.
Then I feel like the "score" is pretty arbitrary, I'd rather have the suggestions sorted alphabetically

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

Then I feel like the "score" is pretty arbitrary, I'd rather have the suggestions sorted alphabetically

The score might be removed in Bug 1327973, where we'll display the suggestion in alphabetical order

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

For pseudo classes, we'd need to create a InspectorUtils.getCSSPseudoClassNames(), which would expose this list defined in stylo: https://searchfox.org/mozilla-central/rev/fccab99f5b400b33b9ad16e7f066a5020119fbdc/servo/components/style/gecko/non_ts_pseudo_class_list.rs#28-106

macro_rules! apply_non_ts_list {
    ($apply_macro:ident) => {
        $apply_macro! {
            [
                ("-moz-table-border-nonzero", MozTableBorderNonzero, _, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-select-list-box", MozSelectListBox, _, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("link", Link, UNVISITED, _),
                ("any-link", AnyLink, VISITED_OR_UNVISITED, _),
                ("visited", Visited, VISITED, _),
                ("active", Active, ACTIVE, _),
                ("autofill", Autofill, AUTOFILL, _),
                ("checked", Checked, CHECKED, _),
                ("defined", Defined, DEFINED, _),
                ("disabled", Disabled, DISABLED, _),
                ("enabled", Enabled, ENABLED, _),
                ("focus", Focus, FOCUS, _),
                ("focus-within", FocusWithin, FOCUS_WITHIN, _),
                ("focus-visible", FocusVisible, FOCUSRING, _),
                ("has-slotted", HasSlotted, HAS_SLOTTED, _),
                ("hover", Hover, HOVER, _),
                ("-moz-drag-over", MozDragOver, DRAGOVER, _),
                ("target", Target, URLTARGET, _),
                ("indeterminate", Indeterminate, INDETERMINATE, _),
                ("-moz-inert", MozInert, INERT, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-devtools-highlighted", MozDevtoolsHighlighted, DEVTOOLS_HIGHLIGHTED, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-styleeditor-transitioning", MozStyleeditorTransitioning, STYLEEDITOR_TRANSITIONING, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("fullscreen", Fullscreen, FULLSCREEN, _),
                ("modal", Modal, MODAL, _),
                ("open", Open, OPEN, _),
                ("-moz-topmost-modal", MozTopmostModal, TOPMOST_MODAL, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-broken", MozBroken, BROKEN, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME),
                ("-moz-has-dir-attr", MozHasDirAttr, HAS_DIR_ATTR, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-dir-attr-ltr", MozDirAttrLTR, HAS_DIR_ATTR_LTR, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-dir-attr-rtl", MozDirAttrRTL, HAS_DIR_ATTR_RTL, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-dir-attr-like-auto", MozDirAttrLikeAuto, HAS_DIR_ATTR_LIKE_AUTO, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),

                ("-moz-autofill-preview", MozAutofillPreview, AUTOFILL_PREVIEW, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME),
                ("-moz-value-empty", MozValueEmpty, VALUE_EMPTY, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-revealed", MozRevealed, REVEALED, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),

                ("-moz-math-increment-script-level", MozMathIncrementScriptLevel, INCREMENT_SCRIPT_LEVEL, _),

                ("required", Required, REQUIRED, _),
                ("popover-open", PopoverOpen, POPOVER_OPEN, _),
                ("optional", Optional, OPTIONAL_, _),
                ("valid", Valid, VALID, _),
                ("invalid", Invalid, INVALID, _),
                ("in-range", InRange, INRANGE, _),
                ("out-of-range", OutOfRange, OUTOFRANGE, _),
                ("default", Default, DEFAULT, _),
                ("placeholder-shown", PlaceholderShown, PLACEHOLDER_SHOWN, _),
                ("read-only", ReadOnly, READONLY, _),
                ("read-write", ReadWrite, READWRITE, _),
                ("user-valid", UserValid, USER_VALID, _),
                ("user-invalid", UserInvalid, USER_INVALID, _),
                ("-moz-meter-optimum", MozMeterOptimum, OPTIMUM, _),
                ("-moz-meter-sub-optimum", MozMeterSubOptimum, SUB_OPTIMUM, _),
                ("-moz-meter-sub-sub-optimum", MozMeterSubSubOptimum, SUB_SUB_OPTIMUM, _),

                ("-moz-first-node", MozFirstNode, _, _),
                ("-moz-last-node", MozLastNode, _, _),
                ("-moz-only-whitespace", MozOnlyWhitespace, _, _),
                ("-moz-native-anonymous", MozNativeAnonymous, _, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-placeholder", MozPlaceholder, _, _),

                // NOTE(emilio): Pseudo-classes below only depend on document state, and thus
                // conceptually they should probably be media queries instead.
                //
                // However that has a set of trade-offs that might not be worth making. In
                // particular, such media queries would prevent documents that match them from
                // sharing user-agent stylesheets with documents that don't. Also, changes between
                // media query results are more expensive than document state changes. So for now
                // making them pseudo-classes is probably the right trade-off.
                ("-moz-is-html", MozIsHTML, _, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
                ("-moz-window-inactive", MozWindowInactive, _, _),
            ]
        }
    }
}

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1955220 - [devtools] Retrieve pseudo elements and classes for CSS autocompletion via InspectorUtils methods. r=#devtools.

The PSEUDO_SELECTORS array was hardcoded and wasn't updated in a long time,
missing some of the newer classes.
In order to make the list up-to-date, we can first get the list of
pseudo classes through the InspectorUtils method.