777011 - [webconsole] implement the dark theme for the webconsole toolbar

Status: RESOLVED FIXED

(DevTools :: Console, defect)

Comment 1

[Paul Rouget [:paul]]

Attachment: v0.007

Only tested on osx so far

Comment 2

[Paul Rouget [:paul]]

Screenshot: http://i.imgur.com/L0EKY.png

Comment 3

[Mihai Sucan [:msucan]]

Attachment: screenshot - ubuntu 12.04

Paul: this is the screenshot you asked for.

Do note customizations: I use the ambiance theme and I use large font sizes.

Thanks for the patch! It looks great on Macs.

Comment 4

[Paul Rouget [:paul]]

Thank you Mihai. Can you please take another screenshot with the Global Toolbar + Web Console?

Thank you.

Comment 5

[Mihai Sucan [:msucan]]

Attachment: screenshot - web console + global toolbar - ubuntu 12.04

Updated the screenshot.

Comment 6

[Paul Rouget [:paul]]

Could someone take a screenshot of this patch on Windows?
Builds are available here: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-3a165fc4f9de/

Mihai, do unchecked buttons look ok?

Comment 7

[Sören Hentzschel]

@Paul, screenshot on Windows 7:
http://s14.directupload.net/images/120725/9auirw8a.png

Comment 8

[Paul Rouget [:paul]]

(In reply to Sören Hentzschel from comment #7)
> @Paul, screenshot on Windows 7:
> http://s14.directupload.net/images/120725/9auirw8a.png

Thank you Sören.

Comment 9

[Mihai Sucan [:msucan]]

(In reply to Paul Rouget [:paul] from comment #6)
> Could someone take a screenshot of this patch on Windows?
> Builds are available here:
> http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/prouget@mozilla.
> com-3a165fc4f9de/
> 
> Mihai, do unchecked buttons look ok?

Nope. :(

They look very similar to the Win7 screenshot.

Comment 10

[Paul Rouget [:paul]]

Attachment: v1

Comment 11

[Paul Rouget [:paul]]

Builds will be available here:

http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-aca44d97bfd6

Comment 12

[Paul Rouget [:paul]]

Attachment: screenshot

Comment 13

[Rob Campbell [:rc] (:robcee)]

Attachment: windows screenshot

Comment 14

[Mihai Sucan [:msucan]]

Comment on attachment 651404 [details] [diff] [review]
v1

Review of attachment 651404 [details] [diff] [review]:
-----------------------------------------------------------------

Looked into the patch and tested it. Buttons look good now on Ubuntu.

I'd only note the following test failure I got:
TEST-UNEXPECTED-FAIL | chrome://mochitests/content/browser/browser/devtools/webconsole/test/browser_webconsole_bug_601909_remember_height.js | minimum page height is respected - Got 871, expected 870

Otherwise, the patch looks great! Thanks Paul!

Comment 15

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 651404 [details] [diff] [review]
v1

in HUDService.jsm:

   _initUI: function WC__initUI()
   {
     this.splitter = this.chromeDocument.createElement("splitter");
-    this.splitter.setAttribute("class", "web-console-splitter");
+    this.splitter.setAttribute("class", "devtools-horizontal-splitter");

any reason not to use the classList API here?

in gnomestripe/common.css:

+.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+

should that be .devtools-toolbarbutton[type=menu-button] ?

in gnomestripe/webconsole.css:

 
-.webconsole-clear-console-button > .toolbarbutton-icon {
-  display: none;
+/* WebConsole colored drops */
+
+.webconsole-filter-button,
+.webconsole-filter-button[checked=true] {
+  color: white!important;
 }

could add a space after white.

same in p/winstripe.

looks good!

Comment 16

[Stephen Horlander [:shorlander]]

Comment on attachment 651404 [details] [diff] [review]
v1

Review of attachment 651404 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good :)

I noticed some things:

- There is a slow and noticeable transition effect on the menu buttons. I am not seeing this on any of the other devtools buttons. Or maybe it is less obvious?
- It is hard to see the black dot icon on "Net"

Windows:
- I only saw this on Windows: the filter field changes width when you start typing in it

Comment 17

[Panos Astithas (he/him) [:past] (please ni?)]

(In reply to Stephen Horlander from comment #16)
> Windows:
> - I only saw this on Windows: the filter field changes width when you start
> typing in it

Sounds like bug 767377.

Comment 18

[Paul Rouget [:paul]]

(In reply to Stephen Horlander from comment #16)
> - There is a slow and noticeable transition effect on the menu buttons. I am
> not seeing this on any of the other devtools buttons. Or maybe it is less
> obvious?

It's not a transition. It's just that we go through 3 steps: unchecked, over, checked.
You'll see the same think with the [style] button in the inspector.

> - It is hard to see the black dot icon on "Net"

Any recommendation for the color? #FF0066?

> Windows:
> - I only saw this on Windows: the filter field changes width when you start
> typing in it

Not directly related to this patch. But I can fix it.

Comment 19

[Paul Rouget [:paul]]

Attachment: v1.1

- fixed the test failure
- addressed rob's comments
- added a light ring around the dark drop for better contrast
- fixed the Windows resize

Comment 20

[Paul Rouget [:paul]]

Attachment: v1.1

rebased

Comment 21

[Paul Rouget [:paul]]

Try before landing: https://tbpl.mozilla.org/?tree=Try&rev=61bf3565f635

Comment 22

[Paul Rouget [:paul]]

It's green. Let's land that.

Comment 23

[Paul Rouget [:paul]]

https://hg.mozilla.org/integration/fx-team/rev/9ea94325f9f5

Comment 24

[Dave Camp (:dcamp)]

https://hg.mozilla.org/mozilla-central/rev/9ea94325f9f5