1470781 - Add filter input for stylesheets list

Status: RESOLVED FIXED

(DevTools :: Style Editor, enhancement, P3)

Description

[Peter Kehl]

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)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

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).

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1470781 - [devtools] Add filter input for stylesheets list. r=jdescottes.

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

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f52a98377722
[devtools] Add filter input for stylesheets list. r=jdescottes,fluent-reviewers.

Comment 5

[Cristina Cozmuta (:CrissCozmuta)]

Backed out for causing devtools failures. CLOSED TREE

Backout link : https://hg.mozilla.org/integration/autoland/rev/162b06f558fba96669ee4b1671133a01203f315b

Push with failures : https://treeherder.mozilla.org/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Crunnable&revision=9a28a5613dbd15e4ee5ccab74a2a0983dbbc24fe&selectedTaskRun=IzU_jJ5LTBixBoA6ZjoLaw.0

Link to failure log :
https://treeherder.mozilla.org/logviewer?job_id=376433724&repo=autoland&lineNumber=25619
https://treeherder.mozilla.org/logviewer?job_id=376432611&repo=autoland&lineNumber=3275
https://treeherder.mozilla.org/logviewer?job_id=376434105&repo=autoland&lineNumber=9430

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

I'm investigating the test failures

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1470781 - [devtools] Make check in browser_styleeditor_private_perwindowpb.js more specific. r=jdescottes.

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

Comment 8

[Pulsebot]

Pushed by [e-mail]:
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.

Comment 9

[Sandor Molnar]

https://hg.mozilla.org/mozilla-central/rev/c6d0be45b88c
https://hg.mozilla.org/mozilla-central/rev/1c7305c88a56

Comment 10

[Pascal Chevrel:pascalc]

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

Comment 11

[Danny Colin [:sdk]]

(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.

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

(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 :)

Comment 13

[Pascal Chevrel:pascalc]

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