зеркало из https://github.com/mozilla/pjs.git
Bug 724509 - Add an Option menu in the Inspector Toolbar. r=dao r=dcamp
This commit is contained in:
Родитель
057719775f
Коммит
b01cbed2ae
|
@ -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;
|
||||
}
|
||||
|
|
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 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;
|
||||
}
|
||||
|
|
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 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;
|
||||
}
|
||||
|
|
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 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
|
||||
|
|
Загрузка…
Ссылка в новой задаче