Bug 724509 - Add an Option menu in the Inspector Toolbar. r=dao r=dcamp

This commit is contained in:
Paul Rouget 2012-05-11 16:54:47 +02:00
Родитель 057719775f
Коммит b01cbed2ae
16 изменённых файлов: 199 добавлений и 4 удалений

Просмотреть файл

@ -1051,6 +1051,8 @@ pref("devtools.inspector.htmlHeight", 112);
pref("devtools.inspector.htmlPanelOpen", false);
pref("devtools.inspector.sidebarOpen", false);
pref("devtools.inspector.activeSidebar", "ruleview");
pref("devtools.inspector.highlighterShowVeil", true);
pref("devtools.inspector.highlighterShowInfobar", true);
// Enable the Layout View
pref("devtools.layoutview.enabled", false);

Просмотреть файл

@ -165,6 +165,10 @@
oncommand="InspectorUI.copyOuterHTML();"/>
<command id="Inspector:DeleteNode"
oncommand="InspectorUI.deleteNode();"/>
<command id="Inspector:ToggleVeil"
oncommand="InspectorUI.toggleVeil();"/>
<command id="Inspector:ToggleInfobar"
oncommand="InspectorUI.toggleInfobar();"/>
</commandset>
<broadcasterset id="mainBroadcasterSet">

Просмотреть файл

@ -1019,6 +1019,24 @@
oncommand="InspectorUI.closeInspectorUI(false);"
tooltiptext="&inspectCloseButton.tooltiptext;"/>
#endif
<toolbarbutton id="inspector-option-toolbarbutton"
type="menu"
tabindex="0"
tooltiptext="&inspectOptionButton.tooltiptext;">
<menupopup id="inspector-option-popup"
position="before_start">
<menuitem id="inspectorToggleVeil"
type="checkbox"
label="&inspectorToggleVeil.label;"
accesskey="&inspectorToggleVeil.accesskey;"
command="Inspector:ToggleVeil"/>
<menuitem id="inspectorToggleInfobar"
type="checkbox"
label="&inspectorToggleInfobar.label;"
accesskey="&inspectorToggleInfobar.accesskey;"
command="Inspector:ToggleInfobar"/>
</menupopup>
</toolbarbutton>
<toolbarbutton id="inspector-inspect-toolbutton"
class="devtools-toolbarbutton"
command="Inspector:Inspect"/>

Просмотреть файл

@ -12,6 +12,11 @@
overflow: hidden;
}
#highlighter-veil-container:not([dim]) > .highlighter-veil,
#highlighter-veil-container:not([dim]) > hbox > .highlighter-veil {
visibility: hidden;
}
#highlighter-veil-container:not([disable-transitions]) > .highlighter-veil,
#highlighter-veil-container:not([disable-transitions]) > #highlighter-veil-middlebox,
#highlighter-veil-container:not([disable-transitions]) > #highlighter-veil-middlebox > .highlighter-veil,
@ -101,6 +106,10 @@ html|*#highlighter-nodeinfobar-tagname {
display: none;
}
#inspector-option-toolbarbutton > .toolbarbutton-menu-dropmarker {
display: none;
}
#inspector-layoutview-container > iframe {
-moz-transition-property: height;
-moz-transition-duration: 0.1s;

Просмотреть файл

@ -104,7 +104,13 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
* // Is a node highlightable.
* boolean isNodeHighlightable(aNode);
*
* // Add/Remove lsiteners
* // Show/hide the veil and the infobar
* void showInfobar();
* void hideInfobar();
* void showVeil();
* void hideVeil();
*
* // Add/Remove listeners
* // @param aEvent - event name
* // @param aListener - function callback
* void addListener(aEvent, aListener);
@ -171,6 +177,7 @@ Highlighter.prototype = {
// The veil will make the whole page darker except
// for the region of the selected box.
this.buildVeil(this.veilContainer);
this.showVeil();
this.buildInfobar(controlsBox);
@ -367,6 +374,36 @@ Highlighter.prototype = {
let nodeName = aNode.nodeName.toLowerCase();
return !INSPECTOR_INVISIBLE_ELEMENTS[nodeName];
},
/**
* Hide the veil
*/
hideVeil: function Highlighter_hideVeil() {
this.veilContainer.removeAttribute("dim");
},
/**
* Show the veil
*/
showVeil: function Highlighter_showVeil() {
this.veilContainer.setAttribute("dim", "true");
},
/**
* Hide the infobar
*/
hideInfobar: function Highlighter_hideInfobar() {
this.nodeInfo.container.setAttribute("hidden", "true");
},
/**
* Show the infobar
*/
showInfobar: function Highlighter_showInfobar() {
this.nodeInfo.container.removeAttribute("hidden");
this.moveInfobar();
},
/**
* Build the veil:
*
@ -383,7 +420,6 @@ Highlighter.prototype = {
* @param nsIDOMElement aParent
* The container of the veil boxes.
*/
buildVeil: function Highlighter_buildVeil(aParent)
{
// We will need to resize these boxes to surround a node.

Просмотреть файл

@ -383,7 +383,7 @@ InspectorUI.prototype = {
/**
* Toggle the TreePanel.
*/
toggleHTMLPanel: function TP_toggle()
toggleHTMLPanel: function TP_toggleHTMLPanel()
{
if (this.treePanel.isOpen()) {
this.treePanel.close();
@ -406,6 +406,38 @@ InspectorUI.prototype = {
return !!(this.toolbar && !this.toolbar.hidden && this.highlighter);
},
/**
* Toggle highlighter veil.
*/
toggleVeil: function IUI_toggleVeil()
{
if (this.currentInspector._highlighterShowVeil) {
this.highlighter.hideVeil();
this.currentInspector._highlighterShowVeil = false;
Services.prefs.setBoolPref("devtools.inspector.highlighterShowVeil", false);
} else {
this.highlighter.showVeil();
this.currentInspector._highlighterShowVeil = true;
Services.prefs.setBoolPref("devtools.inspector.highlighterShowVeil", true);
}
},
/**
* Toggle highlighter infobar.
*/
toggleInfobar: function IUI_toggleInfobar()
{
if (this.currentInspector._highlighterShowInfobar) {
this.highlighter.hideInfobar();
this.currentInspector._highlighterShowInfobar = false;
Services.prefs.setBoolPref("devtools.inspector.highlighterShowInfobar", false);
} else {
this.highlighter.showInfobar();
this.currentInspector._highlighterShowInfobar = true;
Services.prefs.setBoolPref("devtools.inspector.highlighterShowInfobar", true);
}
},
/**
* Return the default selection element for the inspected document.
*/
@ -502,7 +534,7 @@ InspectorUI.prototype = {
// is limited to some specific elements and has moved the focus somewhere else.
// So in this case, we want to focus the content window.
// See: https://developer.mozilla.org/en/XUL_Tutorial/Focus_and_Selection#Platform_Specific_Behaviors
if (!this.toolbar.querySelector("-moz-focusring")) {
if (!this.toolbar.querySelector(":-moz-focusring")) {
this.win.focus();
}
@ -543,6 +575,12 @@ InspectorUI.prototype = {
inspector._activeSidebar =
Services.prefs.getCharPref("devtools.inspector.activeSidebar");
inspector._highlighterShowVeil =
Services.prefs.getBoolPref("devtools.inspector.highlighterShowVeil");
inspector._highlighterShowInfobar =
Services.prefs.getBoolPref("devtools.inspector.highlighterShowInfobar");
this.win.addEventListener("pagehide", this, true);
this._currentInspector = inspector;
@ -849,6 +887,23 @@ InspectorUI.prototype = {
this._sidebar.show();
}
let menu = this.chromeDoc.getElementById("inspectorToggleVeil");
if (this.currentInspector._highlighterShowVeil) {
menu.setAttribute("checked", "true");
} else {
menu.removeAttribute("checked");
this.highlighter.hideVeil();
}
menu = this.chromeDoc.getElementById("inspectorToggleInfobar");
if (this.currentInspector._highlighterShowInfobar) {
menu.setAttribute("checked", "true");
this.highlighter.showInfobar();
} else {
menu.removeAttribute("checked");
this.highlighter.hideInfobar();
}
Services.obs.notifyObservers({wrappedJSObject: this},
INSPECTOR_NOTIFICATIONS.OPENED, null);
},

Просмотреть файл

@ -236,6 +236,16 @@ can reach it easily. -->
<!ENTITY inspectorHTMLDelete.label "Delete Node">
<!ENTITY inspectorHTMLDelete.accesskey "D">
<!-- LOCALIZATION NOTE (inspectOptionButton.*): The menu in the Inspector
- toolbar. -->
<!ENTITY inspectOptionButton.tooltiptext "Inspector Options">
<!-- LOCALIZATION NOTE: These are for the menu in the Inspector Toolbar -->
<!ENTITY inspectorToggleVeil.label "Dim The Page">
<!ENTITY inspectorToggleVeil.accesskey "D">
<!ENTITY inspectorToggleInfobar.label "Show Node Info">
<!ENTITY inspectorToggleInfobar.accesskey "S">
<!-- LOCALIZATION NOTE (inspect3DViewButton.label): This button shows an
- alternate view for the Inspector, creating a 3D visualization of the
- webpage. -->

Просмотреть файл

@ -2012,6 +2012,18 @@ panel[dimmed="true"] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-option-toolbarbutton {
-moz-appearance: none;
-moz-margin-end: 6px;
list-style-image: url("chrome://browser/skin/devtools/inspector-option-icon.png");
-moz-image-region: rect(0px 16px 16px 0px);
border: none;
}
#inspector-option-toolbarbutton[open] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-toolbar {
border-top: 1px solid hsla(210, 8%, 5%, .65);
}
@ -2479,3 +2491,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
.gcli-in-closebrace {
color: hsl(0,0%,80%);
}
/* Highlight toolbar - Option menu */
#inspector-option-toolbarbutton:-moz-focusring {
outline: 1px dotted hsla(210,30%,85%,0.4);
outline-offset: -2px;
}

Двоичные данные
browser/themes/gnomestripe/devtools/inspector-option-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Просмотреть файл

@ -146,6 +146,7 @@ browser.jar:
skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
skin/classic/browser/devtools/layoutview.css (devtools/layoutview.css)
skin/classic/browser/devtools/layout-buttons.png (devtools/layout-buttons.png)
skin/classic/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-16-throbber.png
skin/classic/browser/sync-16.png

Просмотреть файл

@ -2741,6 +2741,18 @@ panel[dimmed="true"] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-option-toolbarbutton {
-moz-appearance: none;
-moz-margin-end: 6px;
list-style-image: url("chrome://browser/skin/devtools/inspector-option-icon.png");
-moz-image-region: rect(0px 16px 16px 0px);
border: none;
}
#inspector-option-toolbarbutton[open] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-toolbar {
border-top: 1px solid hsla(210, 8%, 5%, .65);
padding-top: 4px;
@ -3214,3 +3226,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
.gcli-in-closebrace {
color: hsl(0,0%,80%);
}
/* Highlight toolbar - Option menu */
#inspector-option-toolbarbutton:-moz-focusring {
outline: 1px dotted hsla(210,30%,85%,0.4);
outline-offset: -2px;
}

Двоичные данные
browser/themes/pinstripe/devtools/inspector-option-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Просмотреть файл

@ -187,6 +187,7 @@ browser.jar:
skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
skin/classic/browser/devtools/layoutview.css (devtools/layoutview.css)
skin/classic/browser/devtools/layout-buttons.png (devtools/layout-buttons.png)
skin/classic/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-throbber.png
skin/classic/browser/sync-16.png

Просмотреть файл

@ -2678,6 +2678,18 @@ panel[dimmed="true"] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-option-toolbarbutton {
-moz-appearance: none;
-moz-margin-end: 6px;
list-style-image: url("chrome://browser/skin/devtools/inspector-option-icon.png");
-moz-image-region: rect(0px 16px 16px 0px);
border: none;
}
#inspector-option-toolbarbutton[open] {
-moz-image-region: rect(0px 32px 16px 16px);
}
#inspector-toolbar {
border-top: 1px solid hsla(211,68%,6%,.65) !important;
}
@ -3146,3 +3158,10 @@ html|*#highlighter-nodeinfobar-pseudo-classes {
.gcli-in-closebrace {
color: hsl(0,0%,80%);
}
/* Highlight toolbar - Option menu */
#inspector-option-toolbarbutton:-moz-focusring {
outline: 1px dotted hsla(210,30%,85%,0.4);
outline-offset: -2px;
}

Двоичные данные
browser/themes/winstripe/devtools/inspector-option-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

Просмотреть файл

@ -173,6 +173,7 @@ browser.jar:
skin/classic/browser/devtools/layout-background.png (devtools/layout-background.png)
skin/classic/browser/devtools/layoutview.css (devtools/layoutview.css)
skin/classic/browser/devtools/layout-buttons.png (devtools/layout-buttons.png)
skin/classic/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-throbber.png
skin/classic/browser/sync-16.png
@ -361,6 +362,7 @@ browser.jar:
skin/classic/aero/browser/devtools/layout-background.png (devtools/layout-background.png)
skin/classic/aero/browser/devtools/layoutview.css (devtools/layoutview.css)
skin/classic/aero/browser/devtools/layout-buttons.png (devtools/layout-buttons.png)
skin/classic/aera/browser/devtools/inspector-option-icon.png (devtools/inspector-option-icon.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/aero/browser/sync-throbber.png
skin/classic/aero/browser/sync-16.png