1490954 - [remote-dbg-next] Review CSS used for ConnectPage

Status: RESOLVED FIXED

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

Description

[Julian Descottes [:jdescottes]]

Follow up to Bug 1489872 

See comments in https://phabricator.services.mozilla.com/D5384#127962

- all sections in Connect should have the same width, maybe avoid hardcoding it in px
- do not render empty <ul></ul> when there are no network locations (I think we should rather render "something" such as "No network location saved" or something similar)
- use grid for connect-page__section__title

Comment 1

[Belén [:ladybenko]]

Attachment: Connect sections titles icon - measurements needed

Hi Victoria, I couldn't find in about:preferences a section heading with an icon, so I'm not sure how big they should be – and how separate from the text.

I have tentatively set a height of 1.25em and a margin from the text of 0.25em –what appears on the attached screenshot–, but would like your input here. Thanks! 🙏

Comment 2

[Belén [:ladybenko]]

Attachment: Connect page - steps list

Hi Victoria, other measurements we'd need is the distance between the container and the number points, as well as the distance between those and the text (highlighted in red). Thanks!

Comment 3

[Belén [:ladybenko]]

Attachment: Bug 1490954 - Review Connect page CSS. r=jdescottes,daisuke

- Fixed some values so they match what it's being used in about:preferences (font sizes, margins, etc.)
- Fixed page width in Connect page
- Refactored some rules to be more generic and not tied up to this specific component
- Now a default message appears instead of an empty <ul> when there are no network locations in the list
- Adjusted icon & alignment in the Connect sections' headings

Comment 4

[Victoria Wang [:victoria]]

Hi Belén, indeed, looks like there's no established pattern for these.

I like how the section heading icons look! 

As for the numbered list, I like the numbers to be left-aligned with the heading text (so looks like it just needs to be nudged left a few px). As for distance between numbers and text, I would suggest the equivalent of 8px (there's a general "multiples of 4px" grid system in Photon that I'm trying to line up with more).

Thanks!

Comment 5

[Julian Descottes [:jdescottes]]

Comment on attachment 9012641 [details]
Bug 1490954 - Review Connect page CSS. r=jdescottes,daisuke

Julian Descottes [:jdescottes][:julian] has approved the revision.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/93467731a34b
Review Connect page CSS. r=jdescottes,daisuke

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/93467731a34b