1480743 - [remote-dbg-next] Reuse or copy styles from other about:pages (common.css)

Status: RESOLVED FIXED

(DevTools :: about:debugging, enhancement, P1)

Description

[Julian Descottes [:jdescottes]]

The original about:debugging is importing common.css (chrome://global/skin/in-content/common.css) and reuses some of the classnames expected by common.css for about pages.

For instance, sidebars (in about:preferences or about:debugging) or structured as follows:

#categories
  .category
    .category-image
    .category-name

We can either duplicate their styles here, at the risk of being out of sync with other about:pages, or we can leverage common.css for styles.

Comment 1

[Julian Descottes [:jdescottes]]

Attachment: Bug 1480743 - Update styles in aboutdebugging-new to match other about:pages;r=daisuke

This is just what our styles would look like if we fully reused 
styles from common.css.

The alternative is to duplicate the styling. Reusing styles from
common.css should help us remain in sync with the other about 
pages. But it means that the CSS/classnames/(maybe markup) for all
the "widgets" from common.css will probably look different from the
rest of our code.

Comment 2

[Julian Descottes [:jdescottes]]

Comment on attachment 8997414 [details]
Bug 1480743 - Update styles in aboutdebugging-new to match other about:pages;r=daisuke

Feel free to review the patch. I would like to know which option you prefer here:
- reuse the CSS and styles from common.css
- duplicate the styles and rewrite them "our way"

Comment 3

[Julian Descottes [:jdescottes]]

We discussed this during today's aboutdebugging standup. 

As long as the changes do not force us to modify the markup significantly and that we clearly document common.css classnames as such in our components (something I haven't done yet in my patch), reusing common.css seems reasonable.

Comment 4

[Julian Descottes [:jdescottes]]

Comment on attachment 8997414 [details]
Bug 1480743 - Update styles in aboutdebugging-new to match other about:pages;r=daisuke

Got feedback from Daisuke this morning, summarized above. Leaving f? flag for Belén.

Comment 5

[Julian Descottes [:jdescottes]]

After discussing with Belén and checking with Daisuke, since our sidebar items will be much more complex than the default ones from common.css, if we reuse classnames and styles from common.css our CSS will be hard to understand and maintain.

Therefore the decision here is to:
- duplicate styles in this bug
- in a follow up, push for using CSS variables in common.css (and reuse them in our stylesheets).

Comment 6

[Phabricator Automation]

Comment on attachment 8997414 [details]
Bug 1480743 - Update styles in aboutdebugging-new to match other about:pages;r=daisuke

Daisuke Akatsuka (:daisuke) has approved the revision.

https://phabricator.services.mozilla.com/D2717

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5880526fbd95
Update styles in aboutdebugging-new to match other about:pages;r=daisuke

Comment 8

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/5880526fbd95