1446298 - Make the font preview UI more obvious

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

Attachment: edit_12px.svg

We have gathered the following feedback about the font preview UI:

- Not clear that it is editable, and even if once clicked, the cursor is missing, the text doesn’t look selected or ready to accept typing.
- People either missed it, or thought it was broken.
- It would be nice to see an always-on indication that the preview text can be changed.
- In the previous version, people overlooked the font preview box too, because it seemed like a search box. It is even more hidden now.

Victoria has created a new mockup to address this feedback: https://mozilla.invisionapp.com/share/Z3F7OGCTK#/screens/279202133

The goal of this bug is to implement this mockup.

I will attach the pencil icon too.

The changes will need to be done in these 2 files:
- devtools\client\inspector\fonts\components\Font.js
- devtools\client\themes\fonts.css

This should be an easy HTML/CSS only bug that people new to Firefox DevTools development can try.
Here's the documentation about contributing: http://docs.firefox-dev.tools/

Comment 1

[Victoria Wang [:victoria]]

Good news, Ryan from Firefox UX will be making an official Photon pencil/edit icon so we can disregard the not-very-good one I made :)

Comment 2

[Patrick Brosset <:pbro>]

Removing myself as a mentor. The Font panel has changed enough recently that I don't think this is something we want to necessarily actively work on right now.