Properly style Fonts side panel

[SebastianZ]

The Fonts side panel within the Inspector panel should look more Firebug-ish.

Looks like:

Should look more like this:

Tasks are:

• Change font family and size of the font family name, type (remote or system) and the Used as part.
• Do not alternate background color
• Change border and background color of code sample
• Change separator color
• Change styling of the See all the fonts used in the page button

Hint: The mockup also contains fixes like the font sample being correctly displayed, which probably need to be fixed on the platform side.

Sebastian

[SebastianZ]

As discussed on the conf call I take this issue.

Sebastian

[janodvarko]

Some comments:

1. what if we made the individual font sections expandable/collapsible (or perhaps just for the css code section?)
2. I don't like the "See all the fonts used in the page" tooltip/button covering part of the pane. Could we change it?
3. The font source URL could have a tooltip with entire URL.

Honza

[janodvarko]

I don't see any changes except of some new CSS rules in font-inspector.css

Is there anything you tried to get the font URL (from the input box), so I can start where you left?

Honza

[janodvarko]

See the commit above showing how to get font URLs from the FontInspector side panel

Honza

[SebastianZ]

Sorry for the late reply and thanks for your patch! I'll try to fix the remaining parts now.

Sebastian