930045 - Make 'customizing' selectors more specific

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[Mike de Boer [:mikedeboer]]

For example, 

```css
#main-window[customizing] .customization-target
```

could become

```css
#nav-bar[customizing="true"] > #nav-bar-customization-target
```

(beware, this seemingly simple change is not implementable with just copy-paste)

Comment 1

[:Gijs (he/him)]

(In reply to Mike de Boer [:mikedeboer] from comment #1)
> #nav-bar[customizing="true"] > #nav-bar-customization-target
>
> (beware, this seemingly simple change is not implementable with just
> copy-paste)

Why not? What happens?

Comment 2

[Mike de Boer [:mikedeboer]]

(In reply to :Gijs Kruitbosch from comment #1)
> Why not? What happens?

No clue, this selector does not seem to match (at least, not according to the DOM inspector), thus styles are not applied.
This indicates that other selector(s) take precedence and null this out. Unlikely, but this is what I've observed.

Comment 3

[:Gijs (he/him)]

(In reply to Mike de Boer [:mikedeboer] from comment #2)
> (In reply to :Gijs Kruitbosch from comment #1)
> > Why not? What happens?
> 
> No clue, this selector does not seem to match (at least, not according to
> the DOM inspector), thus styles are not applied.
> This indicates that other selector(s) take precedence and null this out.

Err, no, the CSS rule view displays all matching rules, irrespective of whether they get overridden by later ones.

It's because there isn't a - between 'customization' and 'target' in the id, unlike the class. My mistake in my original suggestion (but then, I assumed that there was consistency). We should probably just make that consistency happen and update any rules currently using #nav-bar-customizationtarget (0 on Windows AFAICT, but maybe there are others elsewhere?)

Comment 4

[:Gijs (he/him)]

Attachment: make [customizing] selectors more specific,

This wfm

Comment 5

[Mike de Boer [:mikedeboer]]

Gijs, can you closely examine the the moment after the enter customization mode animation finishes and after the exit customization mode animation finishes? I notice two distinct 'jumps' at the right and left edges of the window - next to the Menu Panel button, for example.

Comment 6

[:Gijs (he/him)]

(In reply to Mike de Boer [:mikedeboer] from comment #5)
> Gijs, can you closely examine the the moment after the enter customization
> mode animation finishes and after the exit customization mode animation
> finishes? I notice two distinct 'jumps' at the right and left edges of the
> window - next to the Menu Panel button, for example.

Not right now, but it'd make sense that you see those, as the toolbar attributes get set later than the transition. So either I should leave those alone in this patch, or we should set the attributes at the same time as the transition.

Comment 7

[Mike de Boer [:mikedeboer]]

(In reply to :Gijs Kruitbosch from comment #6)
> Not right now, but it'd make sense that you see those, as the toolbar
> attributes get set later than the transition. So either I should leave those
> alone in this patch, or we should set the attributes at the same time as the
> transition.

One of the two... I'd opt for the solution that has the most positive effect on the animations.

Comment 8

[:Gijs (he/him)]

Attachment: make [customizing] selectors more specific,

I've opted to leave those refactorings out of this for noww.

Comment 9

[Mike de Boer [:mikedeboer]]

Comment on attachment 823251 [details] [diff] [review]
make [customizing] selectors more specific,

Review of attachment 823251 [details] [diff] [review]:
-----------------------------------------------------------------

Looking mighty-fine!

Comment 10

[:Gijs (he/him)]

https://hg.mozilla.org/projects/ux/rev/fcf3103a14f8

Comment 11

[:Gijs (he/him)]

https://hg.mozilla.org/mozilla-central/rev/fcf3103a14f8