Please move pseudo elements in rules panel to the end

RESOLVED FIXED in Firefox 41

Status

DevTools
Inspector
P1
normal
RESOLVED FIXED
3 years ago
9 days ago

People

(Reporter: Sören Hentzschel, Assigned: pbro)

Tracking

(Depends on: 1 bug)

Trunk
Firefox 41
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox41 fixed)

Details

MozReview Requests

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Hi,

Firefox Nightly 41 shows the following block on every (!) element on top of the rules panel in the inspector:

*::-moz-progress-bar {
    display: inline-block !important;
    float: none !important;
    position: static !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    -moz-appearance: progresschunk;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 100, 180);
}

Now it's necessary to scroll to see the really important declarations or to increase the height of the dev tools and decrease the viewport of the website.

I suggest to move the pseudo elements to the end, not the beginning of the rules panel.
In my build from today, the pseudo elements block is collapsed by default, see https://www.evernote.com/l/AAFskWKoiPVK9rUUW-ygNlC9RplckHrfI0AB/image.png

You should be able to collapse / expand the block, and it should never be expanded when you first look at the inspector. If that's not the case this is a bug.
Flags: needinfo?(cadeyrn)
(In reply to Jeff Griffiths (:canuckistani) from comment #1)
> In my build from today, the pseudo elements block is collapsed by default,
> see https://www.evernote.com/l/AAFskWKoiPVK9rUUW-ygNlC9RplckHrfI0AB/image.png
> 
> You should be able to collapse / expand the block, and it should never be
> expanded when you first look at the inspector. If that's not the case this
> is a bug.

For me, it was expanded by default.

It seems it's controlled by the pref "devtools.inspector.show_pseudo_elements"[1].

The pref is changed based on whether you had it expanded in your last inspector session, but the default is "true", meaning expanded.

Should we change it then?

[1]: https://dxr.mozilla.org/mozilla-central/source/browser/devtools/styleinspector/rule-view.js#2287
Flags: needinfo?(cadeyrn) → needinfo?(jgriffiths)
(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #2)
...
> The pref is changed based on whether you had it expanded in your last
> inspector session, but the default is "true", meaning expanded.
> 
> Should we change it then?
> 
> [1]:
> https://dxr.mozilla.org/mozilla-central/source/browser/devtools/
> styleinspector/rule-view.js#2287

Thanks for digging into that. Yes, the default should be inverted.
Flags: needinfo?(jgriffiths)
Priority: -- → P1
Target Milestone: --- → Firefox 41
Patrick - I've flagged this as being pretty important for the next uplift, and it seems shallow?
Flags: needinfo?(pbrosset)
(Assignee)

Comment 5

3 years ago
(In reply to Sören Hentzschel from comment #0)
> Hi,
> 
> Firefox Nightly 41 shows the following block on every (!) element on top of
> the rules panel in the inspector:
> 
> *::-moz-progress-bar {
>     display: inline-block !important;
>     float: none !important;
>     position: static !important;
>     overflow: visible !important;
>     box-sizing: border-box !important;
>     -moz-appearance: progresschunk;
>     height: 100%;
>     width: 100%;
>     background-color: rgb(0, 100, 180);
> }
To be clear, that's only if you have the "show browser styles" option ON in the settings panel. Otherwise you'll only see the pseudo-elements rules you have defined in content (except in the browser toolbox).
I agree this takes unnecessary space by default though, but moving it to the bottom would make it impossible for people to find this section, so yeah, let's make it collapsed by default.
Flags: needinfo?(pbrosset)
(Assignee)

Updated

3 years ago
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
(Assignee)

Comment 6

3 years ago
Created attachment 8624077 [details]
MozReview Request: Bug 1174407 - Collapse pseudo-elements section in rule-view by default; r=bgrins

Bug 1174407 - Collapse pseudo-elements section in rule-view by default; r=bgrins

This changes the default value for the devtools.inspector.show_pseudo_elements pref
to false so that the pseudo-elements section in the rule-view is collapsed by
default.
This section may now contain a lot more rules, especially when showing browser styles
and so it's better to have it collapsed by default.

This required to fix 2 tests that assumed the section was expanded by default.
browser_ruleview_pseudo-element_01.js was also cleaned up a bit to be more compliant
with our eslint rules.
Attachment #8624077 - Flags: review?(bgrinstead)
(Assignee)

Comment 8

3 years ago
Comment on attachment 8624077 [details]
MozReview Request: Bug 1174407 - Collapse pseudo-elements section in rule-view by default; r=bgrins

Changing reviewer because I'm already asking Brian to review 2 other patches of mine.
Attachment #8624077 - Flags: review?(bgrinstead) → review?(mratcliffe)
Attachment #8624077 - Flags: review?(mratcliffe) → review+
Comment on attachment 8624077 [details]
MozReview Request: Bug 1174407 - Collapse pseudo-elements section in rule-view by default; r=bgrins

https://reviewboard.mozilla.org/r/11651/#review10091

Ship It!
https://hg.mozilla.org/mozilla-central/rev/2d6105c727c8
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox41: affected → fixed
Flags: in-testsuite+
Resolution: --- → FIXED

Updated

3 years ago
Depends on: 1185361

Updated

9 days ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.