Consolidated Icon CSS

[jaril]

Fixes #7735

Cleaned up redundant styles for source icons and source lists.

Can't really test these so I matched before and after screenshots and added fading GIFs. URL bar indicates whether it's before/after:

Vue

Angular

React

Webpack

Home/breadcrumbs

Blackbox

Other frameworks

[darkwing]

@jaril Could you describe your methodology here? I think it would very much help for maintenance going forward, i.e. why you put stuff where.

[fvsch]

If we want better aligned and more visually balanced source icons, my overall methodology would be:

1. Figure the icon element's canvas size. Probably 16px by 16px, but if we have a compelling argument for a different size we might use that. It looks like we're rendering the icons at 15px by default, which is strange (especially if our SVG sources are 16px).

2. Make sure this 16px (or other size) square is vertically aligned with the text, and does not make the rows grow taller than needed. (We probably want rows to be around 20px tall or maybe 24px tall; following the new design for the right sidebar rows would be great.) Using vertical-align: middle can give subpar results. Flexbox's align-items: center is often better, if we can use Flexbox. Otherwise, something like vertical-align: -3px can work well (align the bottom of the image 3px below the text baseline).

3. Rework the SVG icons to be on a square 16px canvas (ideally) and most importantly to be visually centered in that canvas. No funky business like the Vue icon which is A) Too small in its viewBox and B) Horizontally shifted to the right a bit and C) Vertically centered but it should actually be shifted a bit more to the bottom for correct vertical alignment.

There should be a design guideline that says something like "source icons should be on a 16x16 canvas, and have their graphical elements occupy the center 14x14 area, leaving 1px blank on each side except when the icon's design requires using that extra space".
Something very similar to: https://design.firefox.com/photon/visuals/iconography.html
(Just an example. Maybe we want source icons to be visually smaller and fill the center 12x12 square.)

Basically you need a consistent icon set, instead of fiddling with alignment tweaks in CSS for each icon.

[fvsch]

@jaril Do you mind if I try working on this in parallel, and then we can compare approaches?

In particular I'd like to improve and simplify SVG icon styling and alignment, as well as row height, in the Sources pane.

[fvsch]

So I pushed my attempt at icon style consolidation to:
https://github.com/fvsch/debugger.html/commit/a52ebb83130dc4739500caae8853bd963708d7c4

I still have duplicate styles in SourceIcon.css

Mainly my methodology is:

1. Have a good base style for the .img class (assuming a 16px size and a mask-image, but it can be changed to a background-image when we need to).
2. Keep the 16px size all the time (this helps with horizontal alignment); use mask-size or background-size when we need a different size. Rework SVG images so we don't need to specify different sizes all the time.
3. For vertical alignment in the Sources pane, remove all the per-image relative position tweaks and use flexbox instead.

Since this impacts a lot of places it would need more work and testing, but I feel it's a solid approach overall.

[darkwing]

@fvsch Feel free to submit a PR for your branch, and we can share ideas about them 👍

[darkwing]

Closing since @jaril did an epic job reviewing @fvsch's PR. Wow, what a community we have!