712930 - Improve the look of the Style Editor (CSS nits)

Status: RESOLVED WONTFIX

(DevTools :: Style Editor, defect, P2)

Description

[Paul Rouget [:paul]]

Attachment: Description of the imperfections of the UI

1. Increase the height of the toolbar 4px for better overall proportions.
2. Find style sheet search box should flex with sidebar
3. Align left and right half of toolbar and adjust top and bottom border to be less prominent.
4. Increase the width of the line number gutter by 2px to comfortably accommodate three digit line numbers.
5. Fix the highlighted style sheet item in blue to fill all the way to the top of the box
6. Push the chrome out one pixel on all sides to kill Aero Glass bevel.
7. De-emphasize the resizer handle in main toolbar.
8. Move line one down a pixel so the highlight doesn't touch the toolbar
9. Fix highlight in text area to fill the full width all the way to the scrollbar.
10. Remove the button keyboard shortcut underlines.

Comment 1

[Stephen Horlander [:shorlander]]

(In reply to Paul Rouget [:paul] from comment #0)
> Created attachment 583776 [details]
> Description of the imperfections of the UI

> 2. Find style sheet search box should flex with sidebar 

It should probably have an max-width so that it doesn't expand indefinitely

> 3. Align left and right half of toolbar and adjust top and bottom border to be less prominent.

Fixed alignment would be good :) I am ok with the current border appearance

> 6. Push the chrome out one pixel on all sides to kill Aero Glass bevel.

We do this on the main browser window, I seem to recall a -moz property for this

> 7. De-emphasize the resizer handle in main toolbar.

The example looks a little washed out. I would be ok with removing the grippy entirely and just leaving the line as it is now.

Comment 2

[Paul Rouget [:paul]]

Attachment: Item 3 - v1

Comment 3

[Paul Rouget [:paul]]

Comment on attachment 592101 [details] [diff] [review]
Item 3 - v1

On Windows, the first toolbar is forced to `border-top-width:0`:

http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/winstripe/global/toolbar.css#67

So the second part of the toolbar (which is another <toolbar> tag) still has the 1px border. This explains alignment problem.

So I remove the border-top from the toolbars in splitviews.

Comment 4

[Paul Rouget [:paul]]

Attachment: Item 1 - v1

Comment 5

[Paul Rouget [:paul]]

Attachment: Item 4 - v1

Comment 6

[Dão Gottwald [:dao]]

(In reply to Paul Rouget [:paul] from comment #0)
> 6. Push the chrome out one pixel on all sides to kill Aero Glass bevel.

We do this in the browser window so that tabs can connect with the border. There's no similar reason here, as far as I can see, so you let the OS handle this.

> 10. Remove the button keyboard shortcut underlines.

Don't do this.

Comment 7

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #6)
> so you let the OS handle this.

Err, you *should* let the OS handle this.

Comment 8

[Paul Rouget [:paul]]

Fixed since :harth's rewrite.