[webconsole] implement the dark theme for the webconsole toolbar

RESOLVED FIXED in Firefox 17

Status

()

Firefox
Developer Tools: Console
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: paul, Assigned: paul)

Tracking

Trunk
Firefox 17
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [fixed-in-fx-team])

Attachments

(4 attachments, 4 obsolete attachments)

Comment hidden (empty)
(Assignee)

Updated

5 years ago
Depends on: 688981
(Assignee)

Comment 1

5 years ago
Created attachment 645565 [details] [diff] [review]
v0.007

Only tested on osx so far
(Assignee)

Comment 2

5 years ago
Screenshot: http://i.imgur.com/L0EKY.png
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.
(Assignee)

Comment 4

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

Thank you.
Created attachment 645803 [details]
screenshot - web console + global toolbar - ubuntu 12.04

Updated the screenshot.
Attachment #645788 - Attachment is obsolete: true
(Assignee)

Comment 6

5 years ago
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

5 years ago
@Paul, screenshot on Windows 7:
http://s14.directupload.net/images/120725/9auirw8a.png
(Assignee)

Comment 8

5 years ago
(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.
(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.
(Assignee)

Comment 10

5 years ago
Created attachment 651404 [details] [diff] [review]
v1
(Assignee)

Updated

5 years ago
Attachment #645565 - Attachment is obsolete: true
(Assignee)

Updated

5 years ago
Attachment #651404 - Flags: review?(rcampbell)
(Assignee)

Comment 11

5 years ago
Builds will be available here:

http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/prouget@mozilla.com-aca44d97bfd6
(Assignee)

Updated

5 years ago
Attachment #651404 - Flags: ui-review?(shorlander)
(Assignee)

Comment 12

5 years ago
Created attachment 651413 [details]
screenshot
Assignee: nobody → paul
Status: NEW → ASSIGNED
Created attachment 651465 [details]
windows screenshot
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!
Attachment #651404 - Flags: feedback+
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!
Attachment #651404 - Flags: review?(rcampbell) → review+
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
Attachment #651404 - Flags: ui-review?(shorlander) → ui-review-
(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.
(Assignee)

Comment 18

5 years ago
(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.
(Assignee)

Comment 19

5 years ago
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
(Assignee)

Updated

5 years ago
Attachment #651404 - Attachment is obsolete: true
(Assignee)

Updated

5 years ago
Attachment #654671 - Flags: review?(rcampbell)
(Assignee)

Comment 20

5 years ago
Created attachment 654984 [details] [diff] [review]
v1.1

rebased
(Assignee)

Updated

5 years ago
Attachment #654671 - Attachment is obsolete: true
Attachment #654671 - Flags: review?(rcampbell)
(Assignee)

Comment 21

5 years ago
Try before landing: https://tbpl.mozilla.org/?tree=Try&rev=61bf3565f635
(Assignee)

Comment 22

5 years ago
It's green. Let's land that.
Whiteboard: [land-in-fx-team]
(Assignee)

Comment 23

5 years ago
https://hg.mozilla.org/integration/fx-team/rev/9ea94325f9f5
Whiteboard: [land-in-fx-team] → [fixed-in-fx-team]

Comment 24

5 years ago
https://hg.mozilla.org/mozilla-central/rev/9ea94325f9f5
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 17
You need to log in before you can comment on or make changes to this bug.