Last Comment Bug 777011 - [webconsole] implement the dark theme for the webconsole toolbar
: [webconsole] implement the dark theme for the webconsole toolbar
Status: RESOLVED FIXED
[fixed-in-fx-team]
:
Product: Firefox
Classification: Client Software
Component: Developer Tools: Console (show other bugs)
: Trunk
: x86 All
: -- normal (vote)
: Firefox 17
Assigned To: Paul Rouget [:paul]
: developer.tools
Mentors:
Depends on: 688981
Blocks:
  Show dependency treegraph
 
Reported: 2012-07-24 11:25 PDT by Paul Rouget [:paul]
Modified: 2012-08-25 17:06 PDT (History)
7 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
v0.007 (33.72 KB, patch)
2012-07-24 16:14 PDT, Paul Rouget [:paul]
no flags Details | Diff | Splinter Review
screenshot - ubuntu 12.04 (129.77 KB, image/png)
2012-07-25 09:14 PDT, Mihai Sucan [:msucan]
no flags Details
screenshot - web console + global toolbar - ubuntu 12.04 (175.65 KB, image/png)
2012-07-25 10:13 PDT, Mihai Sucan [:msucan]
no flags Details
v1 (36.17 KB, patch)
2012-08-13 08:53 PDT, Paul Rouget [:paul]
rcampbell: review+
shorlander: ui‑review-
mihai.sucan: feedback+
Details | Diff | Splinter Review
screenshot (268.64 KB, image/png)
2012-08-13 09:09 PDT, Paul Rouget [:paul]
no flags Details
windows screenshot (962.04 KB, image/png)
2012-08-13 10:50 PDT, Rob Campbell [:rc] (:robcee)
no flags Details
v1.1 (37.59 KB, patch)
2012-08-23 09:59 PDT, Paul Rouget [:paul]
no flags Details | Diff | Splinter Review
v1.1 (37.87 KB, patch)
2012-08-24 05:40 PDT, Paul Rouget [:paul]
no flags Details | Diff | Splinter Review

Description Paul Rouget [:paul] 2012-07-24 11:25:28 PDT

    
Comment 1 Paul Rouget [:paul] 2012-07-24 16:14:34 PDT
Created attachment 645565 [details] [diff] [review]
v0.007

Only tested on osx so far
Comment 2 Paul Rouget [:paul] 2012-07-24 20:46:43 PDT
Screenshot: http://i.imgur.com/L0EKY.png
Comment 3 Mihai Sucan [:msucan] 2012-07-25 09:14:14 PDT
Created attachment 645788 [details]
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] 2012-07-25 09:34:52 PDT
Thank you Mihai. Can you please take another screenshot with the Global Toolbar + Web Console?

Thank you.
Comment 5 Mihai Sucan [:msucan] 2012-07-25 10:13:33 PDT
Created attachment 645803 [details]
screenshot - web console + global toolbar - ubuntu 12.04

Updated the screenshot.
Comment 6 Paul Rouget [:paul] 2012-07-25 14:18:52 PDT
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?
Comment 7 Sören Hentzschel 2012-07-25 14:44:39 PDT
@Paul, screenshot on Windows 7:
http://s14.directupload.net/images/120725/9auirw8a.png
Comment 8 Paul Rouget [:paul] 2012-07-25 14:47:14 PDT
(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] 2012-07-26 05:28:37 PDT
(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] 2012-08-13 08:53:05 PDT
Created attachment 651404 [details] [diff] [review]
v1
Comment 11 Paul Rouget [:paul] 2012-08-13 09:02:20 PDT
Builds will be available here:

http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/prouget@mozilla.com-aca44d97bfd6
Comment 12 Paul Rouget [:paul] 2012-08-13 09:09:05 PDT
Created attachment 651413 [details]
screenshot
Comment 13 Rob Campbell [:rc] (:robcee) 2012-08-13 10:50:35 PDT
Created attachment 651465 [details]
windows screenshot
Comment 14 Mihai Sucan [:msucan] 2012-08-13 11:28:56 PDT
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) 2012-08-16 08:47:53 PDT
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] 2012-08-21 12:13:26 PDT
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 [:past] (away until 7/21) 2012-08-21 12:23:50 PDT
(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] 2012-08-23 08:53:55 PDT
(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] 2012-08-23 09:59:19 PDT
Created attachment 654671 [details] [diff] [review]
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] 2012-08-24 05:40:32 PDT
Created attachment 654984 [details] [diff] [review]
v1.1

rebased
Comment 21 Paul Rouget [:paul] 2012-08-24 06:14:09 PDT
Try before landing: https://tbpl.mozilla.org/?tree=Try&rev=61bf3565f635
Comment 22 Paul Rouget [:paul] 2012-08-25 04:54:40 PDT
It's green. Let's land that.
Comment 24 Dave Camp (:dcamp) 2012-08-25 17:06:41 PDT
https://hg.mozilla.org/mozilla-central/rev/9ea94325f9f5

Note You need to log in before you can comment on or make changes to this bug.