Closed Bug 1470781 Opened 4 years ago Closed 2 months ago

Add filter input for stylesheets list

Categories

(DevTools :: Style Editor, enhancement, P3)

60 Branch
enhancement

Tracking

(relnote-firefox 102+, firefox102 fixed)

RESOLVED FIXED
102 Branch
Tracking Status
relnote-firefox --- 102+
firefox102 --- fixed

People

(Reporter: peter.kehl, Assigned: nchevobbe)

References

Details

Attachments

(2 files)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180516032328

Steps to reproduce:

Open 'Style Editor' tab (mouseover says "Stylesheet Editor"). Either
 * one for Chrome via menu Tools > Web Developer > Browser Toolbox (or Ctrl+Alt+Shift+I), or
 * one for web content, via F12 > Style Editor (or Shift+F7).

It lists CSS files on the left, in no obvious order. Please
 * sort them by name (or even customizable ordering), and
 * add a file name filter (substring matcher)
Severity: normal → enhancement
Component: Untriaged → Style Editor
OS: Unspecified → All
Product: Firefox → DevTools
Hardware: Unspecified → All
Priority: -- → P3

Let's focus on filtering at the moment.

Stylesheets are sorted by their order in the document, which does have an impact on which rule might be applied. This is not really hinted anywhere in the UI, but changing that would require more work (maybe having a source tree, like in the debugger would be better).

Summary: Style Editor should sort or filter files by name → Add filter input for stylesheets list

The patch adds a filter input in the xhtml file, which will filter the list
of stylesheets displayed on the left side, based on the stylesheet full path.
If the active stylesheet is filtered-out, the first visible one gets selected.
If all the stylesheet are filtered-out, a label is displayed indicating that
the search doesn't match any stylesheet.

The splitview CSS already had rules for this behaviour, so we're reusing what's
already there, re-adding the placeholder for the "all filtered" message.

This had an impact on keyboard navigation; the list is sorted by ordinal property,
which drives a MozBoxOrdinalGroup style property (similar to order on a flex item).
The navigation used to simply get the active ordinal, and move to the next one.
Now, the "next" ordinal could be hidden, so we change the behavior to move the focus
to the next (or previous), visible item in the list.

A test is added to check that everything works as intended.

Depends on D144686

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Duplicate of this bug: 1574147
Blocks: 1766975
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f52a98377722
[devtools] Add filter input for stylesheets list. r=jdescottes,fluent-reviewers.

I'm investigating the test failures

Flags: needinfo?(nchevobbe)

For some reason, the new test added in the previous patch has an impact on this test:
when checking the disk cache, there's a mochi.test:8888/tests.json entry, and
since the test was only checking if there was an entry with the mochi.test:8888 entry,
it was failing.
I wasn't able to understand why we have this entry in the cache, but it reveals
that the test check is a bit too broad, since what we cares about is simply to
know if the fetched stylesheet was added in the disk cache.
So here we're doing just that, checking that the fetched stylesheet wasn't added
to the disk cache.

Depends on D144723

Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c6d0be45b88c
[devtools] Add filter input for stylesheets list. r=jdescottes,fluent-reviewers.
https://hg.mozilla.org/integration/autoland/rev/1c7305c88a56
[devtools] Make check in browser_styleeditor_private_perwindowpb.js more specific. r=jdescottes.
Regressions: 1767587
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 102 Branch

Nicolas, should we add this feature to our Nightly release notes? Thanks

Flags: needinfo?(nchevobbe)

(In reply to Pascal Chevrel:pascalc from comment #10)

Nicolas, should we add this feature to our Nightly release notes? Thanks

I think it's a feature that a lot of people using userChrome/userContent file have waited for and so it seems worth a mention in the release note.

(In reply to Pascal Chevrel:pascalc from comment #10)

Nicolas, should we add this feature to our Nightly release notes? Thanks

yes, I guess it's a nice addition that's worth mentioning :)

Flags: needinfo?(nchevobbe)

Note added to our Nightly release notes with this wording:

You can now filter style sheets in the Style Editor tab of our developer tools

relnote-firefox: --- → ?
You need to log in before you can comment on or make changes to this bug.