From 769e437e5f840385d269509f68696deef80f8a60 Mon Sep 17 00:00:00 2001 From: Paul Rouget Date: Wed, 4 Apr 2012 20:40:48 +0200 Subject: [PATCH] Bug 717916 - Add an Inspect button and a node menu to the infobar; r=dao,dcamp --- browser/base/content/highlighter.css | 19 +++-- browser/devtools/highlighter/highlighter.jsm | 75 ++++++++++++++---- .../browser/devtools/inspector.properties | 6 ++ browser/themes/gnomestripe/browser.css | 63 +++++++++++++-- .../gnomestripe/devtools/dropmarker.png | Bin 0 -> 218 bytes browser/themes/gnomestripe/jar.mn | 1 + browser/themes/pinstripe/browser.css | 63 +++++++++++++-- .../themes/pinstripe/devtools/dropmarker.png | Bin 0 -> 218 bytes browser/themes/pinstripe/jar.mn | 1 + browser/themes/winstripe/browser.css | 63 +++++++++++++-- .../themes/winstripe/devtools/dropmarker.png | Bin 0 -> 218 bytes browser/themes/winstripe/jar.mn | 2 + 12 files changed, 253 insertions(+), 40 deletions(-) create mode 100644 browser/themes/gnomestripe/devtools/dropmarker.png create mode 100644 browser/themes/pinstripe/devtools/dropmarker.png create mode 100644 browser/themes/winstripe/devtools/dropmarker.png diff --git a/browser/base/content/highlighter.css b/browser/base/content/highlighter.css index 5378d773745..a43c1dbf1ac 100644 --- a/browser/base/content/highlighter.css +++ b/browser/base/content/highlighter.css @@ -49,20 +49,29 @@ -moz-transition-timing-function: linear; } -#highlighter-nodeinfobar { - display: block; - white-space: nowrap; - direction: ltr; +#highlighter-nodeinfobar-text { overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; + direction: ltr; } -#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar { +.highlighter-nodeinfobar-button > .toolbarbutton-text { + display: none; +} + +#highlighter-nodeinfobar-container:not([locked]):not(:hover) > #highlighter-nodeinfobar > .highlighter-nodeinfobar-button { + visibility: hidden; +} + +#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar, +#highlighter-nodeinfobar-container:not([locked]):hover > #highlighter-nodeinfobar { pointer-events: auto; } html|*#highlighter-nodeinfobar-id, html|*#highlighter-nodeinfobar-classes, +html|*#highlighter-nodeinfobar-pseudo-classes, html|*#highlighter-nodeinfobar-tagname { -moz-user-select: text; cursor: text; diff --git a/browser/devtools/highlighter/highlighter.jsm b/browser/devtools/highlighter/highlighter.jsm index d479c82a6f5..753c8327e12 100644 --- a/browser/devtools/highlighter/highlighter.jsm +++ b/browser/devtools/highlighter/highlighter.jsm @@ -46,6 +46,7 @@ const Cu = Components.utils; const Cc = Components.classes; const Ci = Components.interfaces; +Cu.import("resource://gre/modules/Services.jsm"); Cu.import("resource:///modules/devtools/LayoutHelpers.jsm"); Cu.import("resource://gre/modules/XPCOMUtils.jsm"); @@ -77,7 +78,7 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"]; * * // Constructor and destructor. * // @param aWindow - browser.xul window. - * Highlighter(aWindow); + * Highlighter(aWindow); * void destroy(); * * // Highlight a node. @@ -253,7 +254,7 @@ Highlighter.prototype = { * @param aPseudo - The pseudo-class to toggle, e.g. ":hover". */ pseudoClassLockToggled: function Highlighter_pseudoClassLockToggled(aPseudo) - { + { this.emitEvent("pseudoclasstoggled", [aPseudo]); this.updateInfobar(); }, @@ -430,9 +431,14 @@ Highlighter.prototype = { * * * - * - * - * + * + * + * + * + * + * + * + * * * * @@ -466,17 +472,52 @@ Highlighter.prototype = { let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span"); classesBox.id = "highlighter-nodeinfobar-classes"; - + let pseudoClassesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span"); pseudoClassesBox.id = "highlighter-nodeinfobar-pseudo-classes"; - + // Add some content to force a better boundingClientRect down below. pseudoClassesBox.textContent = " "; - nodeInfobar.appendChild(tagNameLabel); - nodeInfobar.appendChild(idLabel); - nodeInfobar.appendChild(classesBox); - nodeInfobar.appendChild(pseudoClassesBox); + // Create buttons + + let inspect = this.chromeDoc.createElement("toolbarbutton"); + inspect.id = "highlighter-nodeinfobar-inspectbutton"; + inspect.className = "highlighter-nodeinfobar-button" + let toolbarInspectButton = + this.chromeDoc.getElementById("inspector-inspect-toolbutton"); + inspect.setAttribute("tooltiptext", + toolbarInspectButton.getAttribute("tooltiptext")); + inspect.setAttribute("command", "Inspector:Inspect"); + + let nodemenu = this.chromeDoc.createElement("toolbarbutton"); + nodemenu.setAttribute("type", "menu"); + nodemenu.id = "highlighter-nodeinfobar-menu"; + nodemenu.className = "highlighter-nodeinfobar-button" + nodemenu.setAttribute("tooltiptext", + this.strings.GetStringFromName("nodeMenu.tooltiptext")); + + let menu = this.chromeDoc.getElementById("inspector-node-popup"); + menu = menu.cloneNode(true); + menu.id = "highlighter-node-menu"; + + nodemenu.appendChild(menu); + + // + let texthbox = this.chromeDoc.createElement("hbox"); + texthbox.id = "highlighter-nodeinfobar-text"; + texthbox.setAttribute("align", "center"); + texthbox.setAttribute("flex", "1"); + + texthbox.appendChild(tagNameLabel); + texthbox.appendChild(idLabel); + texthbox.appendChild(classesBox); + texthbox.appendChild(pseudoClassesBox); + + nodeInfobar.appendChild(inspect); + nodeInfobar.appendChild(texthbox); + nodeInfobar.appendChild(nodemenu); + container.appendChild(arrowBoxTop); container.appendChild(nodeInfobar); container.appendChild(arrowBoxBottom); @@ -511,13 +552,13 @@ Highlighter.prototype = { let popupSet = this.chromeDoc.getElementById("mainPopupSet"); popupSet.appendChild(menu); - + let fragment = this.buildPseudoClassMenu(); menu.appendChild(fragment); menu.openPopup(this.nodeInfo.pseudoClassesBox, "end_before", 0, 0, true, false); - }, - + }, + /** * Create the menuitems for toggling the selection's pseudo-class state * @@ -887,3 +928,9 @@ Highlighter.prototype = { XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () { return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils) }); + +XPCOMUtils.defineLazyGetter(Highlighter.prototype, "strings", + function () { + return Services.strings.createBundle( + "chrome://browser/locale/devtools/inspector.properties"); + }); diff --git a/browser/locales/en-US/chrome/browser/devtools/inspector.properties b/browser/locales/en-US/chrome/browser/devtools/inspector.properties index 132b8eeb5a6..786e3959f14 100644 --- a/browser/locales/en-US/chrome/browser/devtools/inspector.properties +++ b/browser/locales/en-US/chrome/browser/devtools/inspector.properties @@ -32,3 +32,9 @@ ruleView.tooltiptext=View and Edit CSS # "Return" key # changes that state. %S is the keyboard shortcut (VK_RETURN in # chrome://global/locale/keys.properties). inspectButton.tooltiptext=Select element with mouse (%S) + + +# LOCALIZATION NOTE (nodeMenu.tooltiptext) +# This menu appears in the Infobar (on top of the highlighted node) once +# the node is selected. +nodeMenu.tooltiptext=Node operations diff --git a/browser/themes/gnomestripe/browser.css b/browser/themes/gnomestripe/browser.css index 20e51c02698..b1f502eb34a 100644 --- a/browser/themes/gnomestripe/browser.css +++ b/browser/themes/gnomestripe/browser.css @@ -2027,8 +2027,21 @@ panel[dimmed="true"] { /* Highlighter - Node Infobar */ +#highlighter-nodeinfobar { + color: hsl(200, 100%, 65%); + border: 1px solid hsla(210, 19%, 63%, .5); + border-radius: 3px; + background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box; +} + /* Highlighter - Node Infobar - text */ +#highlighter-nodeinfobar-text { + /* 100% - size of the buttons and margins */ + max-width: -moz-calc(100% - 2 * (26px + 6px)); + padding-bottom: 1px; +} + html|*#highlighter-nodeinfobar-tagname { color: white; } @@ -2041,16 +2054,52 @@ html|*#highlighter-nodeinfobar-pseudo-classes { color: hsl(20, 100%, 70%); } -/* Highlighter - Node Infobar - box & arrow */ +/* Highlighter - Node Infobar - buttons */ -#highlighter-nodeinfobar { - color: hsl(200, 100%, 65%); - border: 1px solid hsla(210, 19%, 63%, .5); - border-radius: 3px; - padding: 8px 16px; - background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box; +.highlighter-nodeinfobar-button { + -moz-appearance: none; + border: 0 solid hsla(210,8%,5%,.45); + padding: 0; + width: 26px; + min-height: 26px; } +#highlighter-nodeinfobar-inspectbutton { + -moz-border-end-width: 1px; + box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset; + -moz-margin-end: 6px; + list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); + -moz-image-region: rect(0px 16px 16px 0px); +} + +#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset; +} + +#highlighter-nodeinfobar-inspectbutton:active:hover, +#highlighter-nodeinfobar-container:not([locked]) > #highlighter-nodeinfobar > #highlighter-nodeinfobar-inspectbutton { + -moz-image-region: rect(0px 32px 16px 16px); +} + +#highlighter-nodeinfobar-menu { + -moz-border-start-width: 1px; + box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset; + -moz-margin-start: 6px; +} + +#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) { + box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset; +} + +#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker { + -moz-appearance: none !important; + list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); + -moz-box-align: center; + -moz-margin-start: -1px; +} + +/* Highlighter - Node Infobar - box & arrow */ + .highlighter-nodeinfobar-arrow { width: 14px; height: 14px; diff --git a/browser/themes/gnomestripe/devtools/dropmarker.png b/browser/themes/gnomestripe/devtools/dropmarker.png new file mode 100644 index 0000000000000000000000000000000000000000..7e91860fb5bccc230d94b2ebc5b549b9e2637087 GIT binary patch literal 218 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)I!3HFqj;YoHDaPU;cPEB*=VV?2Ic!PZ?k)`f zL2$v|<&%LToCO|{#S9GG!XV7ZFl&wkP>{XE)7O>#4ighEuf?0GJLUt0WHUn|N}Tg^ zb5rw5fLsO!=c3falGGH1^30M91$R&1fE2w{kmZJ+E{-7_*OTw;t^V%B#@1%R=Ch$= wVq;??V|SD5x^?S5_87=bg0Li>Ifx!$WZER)Pgg&ebxsLQ00Ra;CjbBd literal 0 HcmV?d00001 diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn index 556cd6d09cc..e03e086963c 100644 --- a/browser/themes/gnomestripe/jar.mn +++ b/browser/themes/gnomestripe/jar.mn @@ -131,6 +131,7 @@ browser.jar: skin/classic/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png) skin/classic/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png) skin/classic/browser/devtools/inspect-button.png (devtools/inspect-button.png) + skin/classic/browser/devtools/dropmarker.png (devtools/dropmarker.png) #ifdef MOZ_SERVICES_SYNC skin/classic/browser/sync-16-throbber.png skin/classic/browser/sync-16.png diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css index 5c14a502073..0d882d3bdc6 100644 --- a/browser/themes/pinstripe/browser.css +++ b/browser/themes/pinstripe/browser.css @@ -2772,8 +2772,21 @@ panel[dimmed="true"] { /* Highlighter - Node Infobar */ +#highlighter-nodeinfobar { + color: hsl(200, 100%, 65%); + border: 1px solid hsla(210, 19%, 63%, .5); + border-radius: 3px; + background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box; +} + /* Highlighter - Node Infobar - text */ +#highlighter-nodeinfobar-text { + /* 100% - size of the buttons + margins */ + max-width: -moz-calc(100% - 2 * (26px + 6px)); + padding-bottom: 1px; +} + html|*#highlighter-nodeinfobar-tagname { color: white; } @@ -2786,16 +2799,52 @@ html|*#highlighter-nodeinfobar-pseudo-classes { color: hsl(20, 100%, 70%); } -/* Highlighter - Node Infobar - box & arrow */ +/* Highlighter - Node Infobar - buttons */ -#highlighter-nodeinfobar { - color: hsl(200, 100%, 65%); - border: 1px solid hsla(210, 19%, 63%, .5); - border-radius: 3px; - padding: 8px 16px; - background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box; +.highlighter-nodeinfobar-button { + -moz-appearance: none; + border: 0 solid hsla(210,8%,5%,.45); + padding: 0; + width: 26px; + min-height: 26px; } +#highlighter-nodeinfobar-inspectbutton { + -moz-border-end-width: 1px; + box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset; + -moz-margin-end: 6px; + list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); + -moz-image-region: rect(0px 16px 16px 0px); +} + +#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset; +} + +#highlighter-nodeinfobar-inspectbutton:active:hover, +#highlighter-nodeinfobar-container:not([locked]) > #highlighter-nodeinfobar > #highlighter-nodeinfobar-inspectbutton { + -moz-image-region: rect(0px 32px 16px 16px); +} + +#highlighter-nodeinfobar-menu { + -moz-border-start-width: 1px; + box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset; + -moz-margin-start: 6px; +} + +#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) { + box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset; +} + +#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker { + -moz-appearance: none !important; + list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); + -moz-box-align: center; + -moz-margin-start: -1px; +} + +/* Highlighter - Node Infobar - box & arrow */ + .highlighter-nodeinfobar-arrow { width: 14px; height: 14px; diff --git a/browser/themes/pinstripe/devtools/dropmarker.png b/browser/themes/pinstripe/devtools/dropmarker.png new file mode 100644 index 0000000000000000000000000000000000000000..7e91860fb5bccc230d94b2ebc5b549b9e2637087 GIT binary patch literal 218 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)I!3HFqj;YoHDaPU;cPEB*=VV?2Ic!PZ?k)`f zL2$v|<&%LToCO|{#S9GG!XV7ZFl&wkP>{XE)7O>#4ighEuf?0GJLUt0WHUn|N}Tg^ zb5rw5fLsO!=c3falGGH1^30M91$R&1fE2w{kmZJ+E{-7_*OTw;t^V%B#@1%R=Ch$= wVq;??V|SD5x^?S5_87=bg0Li>Ifx!$WZER)Pgg&ebxsLQ00Ra;CjbBd literal 0 HcmV?d00001 diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn index a93e17eb1d7..5e11c67e5c3 100644 --- a/browser/themes/pinstripe/jar.mn +++ b/browser/themes/pinstripe/jar.mn @@ -172,6 +172,7 @@ browser.jar: skin/classic/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png) skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png) skin/classic/browser/devtools/inspect-button.png (devtools/inspect-button.png) + skin/classic/browser/devtools/dropmarker.png (devtools/dropmarker.png) #ifdef MOZ_SERVICES_SYNC skin/classic/browser/sync-throbber.png skin/classic/browser/sync-16.png diff --git a/browser/themes/winstripe/browser.css b/browser/themes/winstripe/browser.css index 4e8287a936e..33af172cfe7 100644 --- a/browser/themes/winstripe/browser.css +++ b/browser/themes/winstripe/browser.css @@ -2694,8 +2694,21 @@ panel[dimmed="true"] { /* Highlighter - Node Infobar */ +#highlighter-nodeinfobar { + color: hsl(200, 100%, 65%); + border: 1px solid hsla(210, 19%, 63%, .5); + border-radius: 3px; + background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box; +} + /* Highlighter - Node Infobar - text */ +#highlighter-nodeinfobar-text { + /* 100% - size of the buttons and margins */ + max-width: -moz-calc(100% - 2 * (26px + 6px)); + padding-bottom: 1px; +} + html|*#highlighter-nodeinfobar-tagname { color: white; } @@ -2708,16 +2721,52 @@ html|*#highlighter-nodeinfobar-pseudo-classes { color: hsl(20, 100%, 70%); } -/* Highlighter - Node Infobar - box & arrow */ +/* Highlighter - Node Infobar - buttons */ -#highlighter-nodeinfobar { - color: hsl(200, 100%, 65%); - border: 1px solid hsla(210, 19%, 63%, .5); - border-radius: 3px; - padding: 8px 16px; - background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box; +.highlighter-nodeinfobar-button { + -moz-appearance: none; + border: 0 solid hsla(210,8%,5%,.45); + padding: 0; + width: 26px; + min-height: 26px; } +#highlighter-nodeinfobar-inspectbutton { + -moz-border-end-width: 1px; + box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset; + -moz-margin-end: 6px; + list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); + -moz-image-region: rect(0px 16px 16px 0px); +} + +#highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset; +} + +#highlighter-nodeinfobar-inspectbutton:active:hover, +#highlighter-nodeinfobar-container:not([locked]) > #highlighter-nodeinfobar > #highlighter-nodeinfobar-inspectbutton { + -moz-image-region: rect(0px 32px 16px 16px); +} + +#highlighter-nodeinfobar-menu { + -moz-border-start-width: 1px; + box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset; + -moz-margin-start: 6px; +} + +#highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) { + box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset; +} + +#highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker { + -moz-appearance: none !important; + list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); + -moz-box-align: center; + -moz-margin-start: -1px; +} + +/* Highlighter - Node Infobar - box & arrow */ + .highlighter-nodeinfobar-arrow { width: 14px; height: 14px; diff --git a/browser/themes/winstripe/devtools/dropmarker.png b/browser/themes/winstripe/devtools/dropmarker.png new file mode 100644 index 0000000000000000000000000000000000000000..7e91860fb5bccc230d94b2ebc5b549b9e2637087 GIT binary patch literal 218 zcmeAS@N?(olHy`uVBq!ia0vp^>_E)I!3HFqj;YoHDaPU;cPEB*=VV?2Ic!PZ?k)`f zL2$v|<&%LToCO|{#S9GG!XV7ZFl&wkP>{XE)7O>#4ighEuf?0GJLUt0WHUn|N}Tg^ zb5rw5fLsO!=c3falGGH1^30M91$R&1fE2w{kmZJ+E{-7_*OTw;t^V%B#@1%R=Ch$= wVq;??V|SD5x^?S5_87=bg0Li>Ifx!$WZER)Pgg&ebxsLQ00Ra;CjbBd literal 0 HcmV?d00001 diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn index 5be185c937c..c7c2a1201de 100644 --- a/browser/themes/winstripe/jar.mn +++ b/browser/themes/winstripe/jar.mn @@ -158,6 +158,7 @@ browser.jar: skin/classic/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png) skin/classic/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png) skin/classic/browser/devtools/inspect-button.png (devtools/inspect-button.png) + skin/classic/browser/devtools/dropmarker.png (devtools/dropmarker.png) #ifdef MOZ_SERVICES_SYNC skin/classic/browser/sync-throbber.png skin/classic/browser/sync-16.png @@ -331,6 +332,7 @@ browser.jar: skin/classic/aero/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png) skin/classic/aero/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png) skin/classic/aero/browser/devtools/inspect-button.png (devtools/inspect-button.png) + skin/classic/aero/browser/devtools/dropmarker.png (devtools/dropmarker.png) #ifdef MOZ_SERVICES_SYNC skin/classic/aero/browser/sync-throbber.png skin/classic/aero/browser/sync-16.png