1921634 - Extensions shortcuts CSS needs to be cleaned up and modernized

Status: RESOLVED FIXED

(Toolkit :: Add-ons Manager, task, P5)

Description

[Matt Mower]

Steps to reproduce:

This bug report was spun out of code review feedback in D217920. Styles in toolkit/mozapps/extensions/content/shortcuts.css need some cleanup and could take advantage of nesting. The below comments describe the changes to be made.

dao:

While you're adding a new rule, could you please nest all of the above in the top .shortcut.card rule? In case you're not familiar with CSS nesting, the selectors should become &:first-of-type, &:hover, &.focused-extension, and .card-heading-icon.

mdmower:

While I'm not opposed to this change request, are you sure this is the right changeset to introduce the change? It's a bit of a rabbit hole. For example, I could point out that the :first-of-type rule likely never used because of sibling element div.error-message preceding the first div.shortcut.card. And then the :hover rule for the card should probably be removed and card-no-hover class applied to shortcut cards instead to make use of common-shared.css styles. And then maybe those .error-message-icon, .error-message-label, etc. rules should be nested in .error-message. It seems like a dedicated cleanup ticket would be a better place to make these changes. If you still want this done, though, I'll do it.

dao:

Could you please file a followup bug then? Thanks!

Actual results:

Styles accumulated tech debt.

Expected results:

Styles were maintained.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Matt Mower]

Attachment: Bug 1921634 - Update extension shortcuts CSS. r?dao

Minor cleanup and reorganization of the about:addons extension shortcuts page styles. No end user visible changes should be observed due to these changes.

• Nest styles for improved modularization
• Remove .shortcut.card:first-of-type rule since it was ineffective. div.error-message is the first element of type div within <addon-shortcuts>. This rule is not needed because the hover effect for cards is disabled in this view, so no margin above the first card to account for hover border is necessary.
• Remove .shortcut.card:hover which manually hid the hover effect for shortcut cards and instead use class card-no-hover from common styles which exists for this purpose.
• Remove .extension-heading and .error-message-arrow which have no matching elements.
• Remove unnecessary child combinator when descendent combinator is sufficient, improving consistency of nested rules.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/635951eb65b8
Update extension shortcuts CSS. r=extension-reviewers,desktop-theme-reviewers,emilio,robwu

Comment 4

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/635951eb65b8