734899 - Update Style Editor UI

Status: RESOLVED WORKSFORME

(DevTools :: Style Editor, enhancement)

Description

[Cedric Vivier [:cedricv]]

Update Style Editor UI to improve the overall UX:

A) Remove the empty toolbar on top of the text editor, gain some vertical space.

B) Use icon buttons instead of text buttons
  This is consistent with the direction of other devtools and this also fixes minimum width issue with some locales when the Style Editor is in portrait orientation.

C) Replace the non-Fitts-friendly textual "Save" link with a Save icon button that has the same position and size in all modes/localizations.

D) In landscape orientation, enable resizing on the whole height between the list and the editor, rather than just on the 'resizer grippy'.

E) Fix contrast issue with enabled/disabled style sheet toggle "eye" icon.
   The constrast between enabled and disabled was too low to be visible in bad conditions (low quality screen, ...). If the style sheet is disabled, the "eye" is not visible, use the translucent "eye" as a hover since it conveys the behavior correctly in both directions (enabling/disabling).

Comment 1

[Cedric Vivier [:cedricv]]

Attachment: patch v1

Comment 2

[Cedric Vivier [:cedricv]]

Attachment: patch v1.1 - remove leftover test update that does not belong here

Comment 3

[Cedric Vivier [:cedricv]]

This also fixes bug 715293.

Comment 4

[Cedric Vivier [:cedricv]]

Attachment: patch v1.2 - fix conflict due to recent commits

Comment 5

[Paul Rouget [:paul]]

Attachment: screenshot of the save button

Comment 6

[Paul Rouget [:paul]]

The save button doesn't look right: see attachment 605045 [details]
Do we have a mockup to refer to?

The border and the shadow seem wrong.
I guess we want a uniform light background (with no border).

Shorlander, can you take a look?

Comment 7

[Paul Rouget [:paul]]

Cedric, I won't have the time to review the patch in its current state before tomorrow's merge. If you want to get some of this work part of Firefox 13, please split it in different bugs.

Otherwise, I'll take a look later this week.

Comment 8

[Paul Rouget [:paul]]

Comment on attachment 605000 [details] [diff] [review]
patch v1.2 - fix conflict due to recent commits

update the DTD according to your changes. Also, make sure to make the buttons reachable with the tab key.

Comment 9

[Cedric Vivier [:cedricv]]

Plain background Save button tentative: http://i.imgur.com/VQZsM.png

Comment 10

[Cedric Vivier [:cedricv]]

Tentative 2, closer in spirit to the textual mockup [1] : http://cdn.digitaltrends.com/wp-content/uploads/2011/10/purchased-2.png

[1] https://bug709006.bugzilla.mozilla.org/attachment.cgi?id=580358

Comment 11

[Cedric Vivier [:cedricv]]

Tentative 2, closer in spirit to the textual mockup [1] : http://i.imgur.com/mSgKT.png

[1] https://bug709006.bugzilla.mozilla.org/attachment.cgi?id=580358