684561 - Improve styling of Web Console on Windows

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Screenshot of the bug

We should add some margins between the filter buttons, and place the close button on the right-side.

See attached screenshot for details.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 684561

Moved the close button to the right side and added some margins between the buttons.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Screenshot of the patch

Comment 3

[Dão Gottwald [:dao]]

Comment on attachment 558213 [details] [diff] [review]
Patch for bug 684561

HUDService.jsm should append the close button to the end in the DOM (except for OS X maybe).

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 684561 v2

Updated HUDService.jsm to place the close button at the end of the DOM if not on OS X.

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 558241 [details] [diff] [review]
Patch for bug 684561 v2

>-    this.makeCloseButton(toolbar);
>+    let osString = Cc["@mozilla.org/xre/app-info;1"].
>+                   getService(Ci.nsIXULRuntime).OS;
>+    if (osString == "Darwin")
>+      this.makeCloseButton(toolbar);
> 
>     for (let i = 0; i < BUTTONS.length; i++) {
>       this.makeFilterButton(toolbar, BUTTONS[i]);
>     }
> 
>     toolbar.appendChild(this.filterSpacer);
> 
>     let positionUI = this.createPositionUI();
>     toolbar.appendChild(positionUI);
> 
>     toolbar.appendChild(this.filterBox);
>     this.makeClearConsoleButton(toolbar);
> 
>+    if (osString != "Darwin")
>+      this.makeCloseButton(toolbar);

This should use ifdefs. Look for EXTRA_PP_JS_MODULES for how to enable this.

>+.webconsole-filter-button > .toolbarbutton-menubutton-button,
>+.webconsole-filter-button > .toolbarbutton-menubutton-button:hover:active {
>+  -moz-padding-start: 6px !important;
>+  -moz-padding-end: 3px !important;
>+}

Why is !important needed here?
Does -moz-padding-end actually change something? I can't see it in the screenshots.

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 684561 v3

The !important rules were a carry-over from previous tweaks and weren't needed. Thank you for catching them.

I have attempted (and it appears I was successful), at using EXTRA_PP_JS_MODULES, but I am not sure if I used it the way that you meant.

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

> Does -moz-padding-end actually change something? I can't see it in the
> screenshots.

I forgot to mention that -moz-padding-end is needed because there is a rule in toolbarbutton.css sets the padding to 2px on :hover:active, causing the toolbarbutton to shrink by 1 pixel.

Comment 8

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

Sweet! Thanks for doing this. :)

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

http://hg.mozilla.org/integration/fx-team/rev/d1c042be8802

Comment 10

[Tim Taubert [:ttaubert] (inactive)]

http://hg.mozilla.org/mozilla-central/rev/d1c042be8802