From 85fb43dae3d7f02083122ac1569e4857e26eae30 Mon Sep 17 00:00:00 2001 From: Paul Rouget Date: Fri, 21 Oct 2011 17:51:52 +0200 Subject: [PATCH] Bug 683873 - [highlighter] move the close button to the toolbar; r=dao --- browser/base/content/browser.xul | 10 ++++ browser/base/content/highlighter.css | 15 +++--- browser/devtools/highlighter/TreePanel.jsm | 14 +----- browser/devtools/highlighter/inspector.jsm | 45 ++---------------- .../locales/en-US/chrome/browser/browser.dtd | 7 +-- .../themes/gnomestripe/browser/browser.css | 27 ++++++----- browser/themes/pinstripe/browser/browser.css | 34 ++++++++----- .../browser/devtools/toolbarbutton-close.png | Bin 0 -> 1031 bytes browser/themes/pinstripe/browser/jar.mn | 1 + browser/themes/winstripe/browser/browser.css | 30 +++++++----- .../browser/devtools/toolbarbutton-close.png | Bin 0 -> 898 bytes browser/themes/winstripe/browser/jar.mn | 2 + 12 files changed, 83 insertions(+), 102 deletions(-) create mode 100644 browser/themes/pinstripe/browser/devtools/toolbarbutton-close.png create mode 100644 browser/themes/winstripe/browser/devtools/toolbarbutton-close.png diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 63b76d00875..eaa222c1b64 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -987,6 +987,11 @@ dir="top" disabled="true" element="inspector-tree-box"/> +#ifdef XP_MACOSX + +#endif +#ifndef XP_MACOSX + +#endif vbox > #inspector-top-resizer, +#inspector-toolbar[treepanel-open] > vbox > hbox > #inspector-end-resizer { + display: -moz-box; +} + /* * Node Infobar */ diff --git a/browser/devtools/highlighter/TreePanel.jsm b/browser/devtools/highlighter/TreePanel.jsm index 1835bc87aae..366bed04625 100644 --- a/browser/devtools/highlighter/TreePanel.jsm +++ b/browser/devtools/highlighter/TreePanel.jsm @@ -231,12 +231,7 @@ TreePanel.prototype = { treeBox.flex = 1; toolbarParent.insertBefore(treeBox, toolbar); - let resizerTop = - this.IUI.browser.ownerDocument.getElementById("inspector-top-resizer"); - let resizerEnd = - this.IUI.browser.ownerDocument.getElementById("inspector-end-resizer"); - resizerTop.removeAttribute("disabled"); - resizerEnd.removeAttribute("disabled"); + this.IUI.toolbar.setAttribute("treepanel-open", "true"); treeBox.appendChild(this.treeIFrame); @@ -264,12 +259,7 @@ TreePanel.prototype = { close: function TP_close() { if (this.openInDock) { - let resizerTop = - this.IUI.browser.ownerDocument.getElementById("inspector-top-resizer"); - let resizerEnd = - this.IUI.browser.ownerDocument.getElementById("inspector-end-resizer"); - resizerTop.setAttribute("disabled", "true"); - resizerEnd.setAttribute("disabled", "true"); + this.IUI.toolbar.removeAttribute("treepanel-open"); let treeBox = this.container; let treeBoxParent = treeBox.parentNode; diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm index 74403283bfe..9590085e00e 100644 --- a/browser/devtools/highlighter/inspector.jsm +++ b/browser/devtools/highlighter/inspector.jsm @@ -124,6 +124,8 @@ Highlighter.prototype = { this.veilContainer = this.chromeDoc.createElement("vbox"); this.veilContainer.id = "highlighter-veil-container"; + // The controlsBox will host the different interactive + // elements of the highlighter (buttons, toolbars, ...). let controlsBox = this.chromeDoc.createElement("box"); controlsBox.id = "highlighter-controls"; this.highlighterContainer.appendChild(this.veilContainer); @@ -135,9 +137,7 @@ Highlighter.prototype = { // for the region of the selected box. this.buildVeil(this.veilContainer); - // The controlsBox will host the different interactive - // elements of the highlighter (buttons, toolbars, ...). - this.buildControls(controlsBox); + this.buildInfobar(controlsBox); this.browser.addEventListener("resize", this, true); this.browser.addEventListener("scroll", this, true); @@ -200,20 +200,6 @@ Highlighter.prototype = { aParent.appendChild(veilBottomBox); }, - /** - * Build the controls: - * - * - * - * @param nsIDOMElement aParent - * The container of the controls elements. - */ - buildControls: function Highlighter_buildControls(aParent) - { - this.buildCloseButton(aParent); - this.buildInfobar(aParent); - }, - /** * Build the node Infobar. * @@ -279,28 +265,6 @@ Highlighter.prototype = { }; }, - /** - * Build the close button. - * - * @param nsIDOMElement aParent - * The container of the close-button. - */ - buildCloseButton: function Highlighter_buildCloseButton(aParent) - { - let closeButton = this.chromeDoc.createElement("box"); - closeButton.id = "highlighter-close-button"; - closeButton.appendChild(this.chromeDoc.createElement("image")); - - let boundCloseEventHandler = this.IUI.closeInspectorUI.bind(this.IUI, false); - - closeButton.addEventListener("click", boundCloseEventHandler, false); - - aParent.appendChild(closeButton); - - this.boundCloseEventHandler = boundCloseEventHandler; - this.closeButton = closeButton; - }, - /** * Destroy the nodes. */ @@ -308,10 +272,7 @@ Highlighter.prototype = { { this.browser.removeEventListener("scroll", this, true); this.browser.removeEventListener("resize", this, true); - this.closeButton.removeEventListener("click", this.boundCloseEventHandler, false); this.boundCloseEventHandler = null; - this.closeButton.parentNode.removeChild(this.closeButton); - this.closeButton = null; this._contentRect = null; this._highlightRect = null; this._highlighting = false; diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd index 02d0d2ae848..5c893c10d46 100644 --- a/browser/locales/en-US/chrome/browser/browser.dtd +++ b/browser/locales/en-US/chrome/browser/browser.dtd @@ -213,9 +213,10 @@ can reach it easily. --> - - - + + + + diff --git a/browser/themes/gnomestripe/browser/browser.css b/browser/themes/gnomestripe/browser/browser.css index 703016c0056..49233b4b306 100644 --- a/browser/themes/gnomestripe/browser/browser.css +++ b/browser/themes/gnomestripe/browser/browser.css @@ -1927,16 +1927,16 @@ panel[dimmed="true"] { background-color: rgba(0, 0, 0, 0.5); } -#highlighter-close-button { - list-style-image: url("chrome://browser/skin/KUI-close.png"); - top: 12px; - right: 12px; - cursor: pointer; +#highlighter-closebutton { + list-style-image: url("moz-icon://stock/gtk-close?size=menu"); + margin-top: 0; + margin-bottom: 0; } -#highlighter-close-button:-moz-locale-dir(rtl) { - right: auto; - left: 12px; +#highlighter-closebutton > .toolbarbutton-icon { + /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must + use evil CSS to give the impression of smaller content */ + margin: -4px; } #highlighter-veil-transparentbox { @@ -1954,12 +1954,17 @@ panel[dimmed="true"] { #inspector-toolbar { -moz-appearance: none; - padding: 0 3px 4px; + padding: 4px 3px; border-top: 1px solid hsla(210, 8%, 5%, .65); box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset; background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%)); } +#inspector-toolbar[treepanel-open] { + padding-top: 0; + -moz-padding-end: 0; +} + #inspector-inspect-toolbutton, #inspector-tools > toolbarbutton { -moz-appearance: none; @@ -2005,10 +2010,6 @@ panel[dimmed="true"] { cursor: n-resize; } -.inspector-resizer[disabled] { - visibility: hidden; -} - #inspector-top-resizer { background: none; height: 4px; diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css index ac11584adc8..474aa3cb6f5 100644 --- a/browser/themes/pinstripe/browser/browser.css +++ b/browser/themes/pinstripe/browser/browser.css @@ -2522,16 +2522,24 @@ panel[dimmed="true"] { background-color: rgba(0, 0, 0, 0.5); } -#highlighter-close-button { - list-style-image: url("chrome://browser/skin/KUI-close.png"); - top: 12px; - right: 12px; - cursor: pointer; +#highlighter-closebutton { + list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png"); + -moz-image-region: rect(0, 16px, 16px, 0); + min-width: 16px; + width: 16px; + margin: 0 4px; } -#highlighter-close-button:-moz-locale-dir(rtl) { - right: auto; - left: 12px; +#highlighter-closebutton > .toolbarbutton-text { + display: none; +} + +#highlighter-closebutton:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#highlighter-closebutton:active { + -moz-image-region: rect(0, 48px, 16px, 32px); } #highlighter-veil-transparentbox { @@ -2549,10 +2557,14 @@ panel[dimmed="true"] { #inspector-toolbar { -moz-appearance: none; - padding: 0 3px 4px; border-top: 1px solid hsla(210, 8%, 5%, .65); box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset; background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%)); + padding: 4px 16px 4px 0; /* use -moz-padding-end: 16px when/if bug 631729 gets fixed */ +} + +#inspector-toolbar[treepanel-open] { + padding: 0 0 4px; } #inspector-inspect-toolbutton, @@ -2600,10 +2612,6 @@ panel[dimmed="true"] { cursor: n-resize; } -.inspector-resizer[disabled] { - visibility: hidden; -} - #inspector-top-resizer { background: none; height: 4px; diff --git a/browser/themes/pinstripe/browser/devtools/toolbarbutton-close.png b/browser/themes/pinstripe/browser/devtools/toolbarbutton-close.png new file mode 100644 index 0000000000000000000000000000000000000000..887daf052a6eda0b463bd75ca65dd998449cd330 GIT binary patch literal 1031 zcmV+i1o-=jP)573nYalmCEyzi@?1xZPj;#UDO+IOlt|^L6KJcihm>(3oaaUPSC3 z7!Sh0B%lFPf}o*>TJ|XV$pjD%CaORUwWDevZ2rQ~UzJ#Yr$JvG#_N6|mQ znw*lM(;Mrc=?eul)Uszp0}zpPFqN^424sL>1}5W$U!r~sRDcJd3Y5uQ2M<}JhFbP0 z`om*%1}|z|;IlR|s(V^=tRJyN7$eui8a33iCzydnyY?M^ot!fBqHIEAu{lci6%Vb1CHZwq0d1{9Z; zRn+$X8T7l_B++8Ew5!u4BeM= zAisdQ1({hlsG&Bf0Td#H!0$)HCWePc?m7NOhA?msoKH!eb*HQMSL49nL9wMx^ftQ% zFXOL${cmT@nRk~4s10JkYcR!mj-M*ZZgfd$dk-DU+nt+tjPa?WlGP@2yoZ{Q2Ds$D&vD_g}t5svo> zcb;n#`2M@;OV7^+d7UJ?W5!czLVW_$qIG_(O##>DWMT2Dyc4Ih8S^HhV`BZ(sNKL? z<<2W_0&G+

e&p*Z+6WhvA)An?`H0qk%WUTxIp`T9q3R(-$qNYHIbRbLVjnlHOpJ zcoWQJW-YIvM)d|zT+iVd6PjR-vC6m5d2pxn^0oV^GiE07PsAZ4xQDWJORqJFEUleo_WsVwZ z*)!S?a~cp25>%i@Gs45%Bwz$)6^zs>ALhn1{{Yzl!O-c}?LPnj002ovPDHLkV1g8J B@QeTe literal 0 HcmV?d00001 diff --git a/browser/themes/pinstripe/browser/jar.mn b/browser/themes/pinstripe/browser/jar.mn index 7854b5ebb55..cd33566ffca 100644 --- a/browser/themes/pinstripe/browser/jar.mn +++ b/browser/themes/pinstripe/browser/jar.mn @@ -126,6 +126,7 @@ browser.jar: skin/classic/browser/devtools/search.png (devtools/search.png) skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css) skin/classic/browser/devtools/gcli.css (devtools/gcli.css) + skin/classic/browser/devtools/toolbarbutton-close.png (devtools/toolbarbutton-close.png) skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png (devtools/breadcrumbs/ltr-end-pressed.png) skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png (devtools/breadcrumbs/ltr-end-selected-pressed.png) skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png (devtools/breadcrumbs/ltr-end-selected.png) diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css index 9af2425a35f..62c1a0ad44e 100644 --- a/browser/themes/winstripe/browser/browser.css +++ b/browser/themes/winstripe/browser/browser.css @@ -2620,16 +2620,19 @@ panel[dimmed="true"] { background-color: rgba(0, 0, 0, 0.5); } -#highlighter-close-button { - list-style-image: url("chrome://browser/skin/KUI-close.png"); - top: 12px; - right: 12px; - cursor: pointer; +#highlighter-closebutton { + list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png"); + -moz-image-region: rect(0, 16px, 16px, 0); + min-width: 16px; + width: 16px; } -#highlighter-close-button:-moz-locale-dir(rtl) { - right: auto; - left: 12px; +#highlighter-closebutton:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#highlighter-closebutton:active { + -moz-image-region: rect(0, 48px, 16px, 32px); } #highlighter-veil-transparentbox { @@ -2647,12 +2650,17 @@ panel[dimmed="true"] { #inspector-toolbar { -moz-appearance: none; - padding: 0 3px 4px; + padding: 4px 3px; border-top: 1px solid hsla(211,68%,6%,.65) !important; box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%)); } +#inspector-toolbar[treepanel-open] { + padding-top: 0; + -moz-padding-end: 0; +} + #inspector-inspect-toolbutton, #inspector-tools > toolbarbutton { -moz-appearance: none; @@ -2698,10 +2706,6 @@ panel[dimmed="true"] { cursor: n-resize; } -.inspector-resizer[disabled] { - visibility: hidden; -} - #inspector-top-resizer { background: none; height: 4px; diff --git a/browser/themes/winstripe/browser/devtools/toolbarbutton-close.png b/browser/themes/winstripe/browser/devtools/toolbarbutton-close.png new file mode 100644 index 0000000000000000000000000000000000000000..4a58465b9b7ea3b3c7c14b36214524fb9b0e38b7 GIT binary patch literal 898 zcmV-|1AY97P)G?$RO%(D9DVE2wO>|IdyGXXbKuAMWsXumi@rW zizxG=3lSo^$*@vs{TpxZ=io>?+i~PBx_CVA-uLse=lObewsj)1Carg5ulx8l>ikEo z`ThB`CSjy(=l*>gv)qjuW-uASvcvAuAyldwlHG@8CuIRJG;-)bbn4h)nLJiwD;QXI zVgb^ed4Z!F9MR(rht#I0ORduxSIl5w*-2RdPGw^6Zh7SQ%fnR!1Itb<0CjyvhP3AA zOXt?Da^3BYD`qgT?4&fn^PSZ)tmf|fd~&a%LWcCpYeY?t8LySK1h|l$Enzj-?eR$0 zwr%G1W^plE(Sw0a7-0I->}l1E>J%SPL`{!bq5xynRi??w&KnY4h|1e=hurac5j8z# zCZnt+Kw$G`xu)h`UyI03Wyjk>a-*mSQPX2)GO!5)=%A`8+|&1d`tt{jBWilg5(OCD zQ7O08Y`kUtnu9Vww;(Tq?TDHlGn0X} z3$P-@a`Vg*1sJLH%V2rA45)fbN@QFOFQ{=uO^+FjvX%hnva%#tSSS%a@m4kYcqs&; zrpF8h);0hd93E|&n3{QqsOi}Sc;NR*e_5IIsd^2=H2r<{2co9O%w&|c1UQ?SDa{21 z((ZPfW=ES_WbVs%L`{#G$-vqMSbp0eYI=47hI|#$Q(7wBdeW~#VLkZ;c@}I()byB{ z46NlTq^2(G6XvQK9cyVbPkyAS1yR#uW-|450sg+{(ee<90^F_eN|#}nM(5S=Q#Bs( zcn~!`W+tPoCBPXq)u`sif`80k($hw<5X@j;?fwIms=C-ckErP}OBCR?-Wr|Tw@XML zcR{zCE3f1Bl(ht?bGamtn=6fZd2(K_7xj8Y?{`E^j~NVXioXX4P%0hz%#N%g7-cO1 zPB@)XuOH5aoE*%?6*CxEc2fCMB5>U>76;VWty05QFtF^z0;K17E*^2DFCJH8C-qyl z*5!&TW-zeqq%44U*TFp)O7_PXEIY9P{yjB&F_i2+EIaJ}4?m}M|5uu7lPWt&!KShM Y8%Lp~>GYClRsaA107*qoM6N<$g8i4Sr2qf` literal 0 HcmV?d00001 diff --git a/browser/themes/winstripe/browser/jar.mn b/browser/themes/winstripe/browser/jar.mn index 1d77ac07941..8aa38f8eb0d 100644 --- a/browser/themes/winstripe/browser/jar.mn +++ b/browser/themes/winstripe/browser/jar.mn @@ -110,6 +110,7 @@ browser.jar: skin/classic/browser/devtools/search.png (devtools/search.png) skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css) skin/classic/browser/devtools/gcli.css (devtools/gcli.css) + skin/classic/browser/devtools/toolbarbutton-close.png (devtools/toolbarbutton-close.png) skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png (devtools/breadcrumbs/ltr-end-pressed.png) skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png (devtools/breadcrumbs/ltr-end-selected-pressed.png) skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png (devtools/breadcrumbs/ltr-end-selected.png) @@ -261,6 +262,7 @@ browser.jar: skin/classic/aero/browser/devtools/search.png (devtools/search.png) skin/classic/aero/browser/devtools/csshtmltree.css (devtools/csshtmltree.css) skin/classic/aero/browser/devtools/gcli.css (devtools/gcli.css) + skin/classic/aero/browser/devtools/toolbarbutton-close.png (devtools/toolbarbutton-close.png) skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-pressed.png (devtools/breadcrumbs/ltr-end-pressed.png) skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png (devtools/breadcrumbs/ltr-end-selected-pressed.png) skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-selected.png (devtools/breadcrumbs/ltr-end-selected.png)