The Web Console's resize handle looks ugly on the Mac right now. I'd like to suggest that we change it to look more like Apple Mail's pane separator [1]. [1]: http://bit.ly/9UsaO9

Attached a screenshot of the current WIP on Linux.

Patch attached.

Comment on attachment 491399 [details] [diff] [review] Proposed patch. The patch looks fine to me. Just a minor issue: if (splitters[i].getAttribute("class") == "hud-splitter") { + splitters[i].nextSibling.classList.remove("webconsole-browser-stack"); splitters[i].parentNode.removeChild(splitters[i]); break; Indentation seems to be broken. Visually, there's not much of a difference with the patch applied.

New version of the patch addresses feedback. Review requested.

(In reply to comment #3) > Visually, there's not much of a difference with the patch applied. It's more noticeable on the Mac, but it's a minor bit of polish all around.

mass change: filter on PRIORITYSETTING

Comment on attachment 491715 [details] [diff] [review] Proposed patch, version 2. > <content> > <xul:stringbundle anonid="tbstringbundle" src="chrome://browser/locale/tabbrowser.properties"/> > <xul:tabbox anonid="tabbox" class="tabbrowser-tabbox" > flex="1" eventnode="document" xbl:inherits="handleCtrlPageUpDown" > onselect="if (event.target.localName == 'tabpanels') this.parentNode.updateCurrentBrowser();"> > <xul:tabpanels flex="1" class="plain" selectedIndex="0" anonid="panelcontainer"> >- <xul:notificationbox flex="1"> >+ <xul:notificationbox flex="1" class="notification-box"> This class is too generic. >+.notification-box { >+ background-color: Window; >+} You're affecting notification bars here...

Splitters can have a background despite -moz-appearance:splitter using box-shadow, e.g. box-shadow: 0 0 0 10px red inset.

New version of the patch uses box-shadow to avoid the notification box changes.

Comment on attachment 495712 [details] [diff] [review] Proposed patch, version 3. >+ // We apply a border to the browser stack when the console is open via >+ // this CSS class. >+ splitter.nextSibling.setAttribute("class", "webconsole-browser-stack"); Please avoid this, this code shouldn't mess with the stack. >--- a/toolkit/themes/gnomestripe/global/webConsole.css >+++ b/toolkit/themes/gnomestripe/global/webConsole.css > .hud-box { > border-bottom: 1px solid #aaa; > text-shadow: none; >+ background-color: #ffffff; > } What's this?

New version of the patch removes all the changes to HUDService.jsm and replaces the browser stack modification with a box shadow. Yay!

(In reply to comment #10) > Comment on attachment 495712 [details] [diff] [review] > Proposed patch, version 3. > > >+ // We apply a border to the browser stack when the console is open via > >+ // this CSS class. > >+ splitter.nextSibling.setAttribute("class", "webconsole-browser-stack"); > > Please avoid this, this code shouldn't mess with the stack. Replaced with a box shadow. > >--- a/toolkit/themes/gnomestripe/global/webConsole.css > >+++ b/toolkit/themes/gnomestripe/global/webConsole.css > > > .hud-box { > > border-bottom: 1px solid #aaa; > > text-shadow: none; > >+ background-color: #ffffff; > > } > > What's this? Something no longer necessary!

Comment on attachment 495858 [details] [diff] [review] Proposed patch, version 4. >--- a/toolkit/themes/gnomestripe/global/webConsole.css >+++ b/toolkit/themes/gnomestripe/global/webConsole.css >+.hud-splitter { >+ box-shadow: 0 -1px 0 0 ButtonShadow inset, 0 0 0 10px Window inset; We'd usually use ThreeDShadow and -moz-Dialog. Not sure whether/how ButtonShadow and Window are different. >--- a/toolkit/themes/pinstripe/global/webConsole.css >+++ b/toolkit/themes/pinstripe/global/webConsole.css >+.hud-splitter { >+ border-bottom: solid #a5a5a5 1px; >+ height: 8px; Does this change anythig? splitter.css sets min-height: 9px;.

New patch addresses review comments. approval2.0 requested, as this is a nice piece of polish for the Web Console and very low risk (only minor CSS changes).