зеркало из https://github.com/mozilla/pjs.git
Bug 653528 - Strip out Style and DOM panels and support code from Inspector.; r=gavin.sharp
This commit is contained in:
Родитель
a15e25fc8c
Коммит
d1ed349463
|
@ -57,7 +57,6 @@ EXTRA_JS_MODULES = \
|
|||
content/openLocationLastURL.jsm \
|
||||
content/NetworkPrioritizer.jsm \
|
||||
content/domplate.jsm \
|
||||
content/stylePanel.jsm \
|
||||
$(NULL)
|
||||
|
||||
include $(topsrcdir)/config/rules.mk
|
||||
|
|
|
@ -250,26 +250,6 @@
|
|||
accesskey="&inspectButton.accesskey;"
|
||||
class="toolbarbutton-text"
|
||||
command="Inspector:Inspect"/>
|
||||
<toolbarbutton id="inspector-previous-toolbutton"
|
||||
label="&inspectPreviousButton.label;"
|
||||
accesskey="&inspectPreviousButton.accesskey;"
|
||||
class="toolbarbutton-text"
|
||||
command="Inspector:Previous"/>
|
||||
<toolbarbutton id="inspector-next-toolbutton"
|
||||
label="&inspectNextButton.label;"
|
||||
accesskey="&inspectNextButton.accesskey;"
|
||||
class="toolbarbutton-text"
|
||||
command="Inspector:Next"/>
|
||||
<toolbarbutton id="inspector-style-toolbutton"
|
||||
label="&inspectStyleButton.label;"
|
||||
accesskey="&inspectStyleButton.accesskey;"
|
||||
class="toolbarbutton-text"
|
||||
oncommand="InspectorUI.toggleStylePanel();"/>
|
||||
<toolbarbutton id="inspector-dom-toolbutton"
|
||||
label="&inspectObjectButton.label;"
|
||||
accesskey="&inspectObjectButton.accesskey;"
|
||||
class="toolbarbutton-text"
|
||||
oncommand="InspectorUI.toggleDOMPanel();"/>
|
||||
</toolbar>
|
||||
<hbox id="tree-panel-resizer-box" align="end">
|
||||
<spacer flex="1" />
|
||||
|
@ -277,21 +257,6 @@
|
|||
</hbox>
|
||||
</panel>
|
||||
|
||||
<panel id="inspector-style-panel"
|
||||
hidden="true"
|
||||
orient="vertical"
|
||||
ignorekeys="true"
|
||||
noautofocus="true"
|
||||
noautohide="true"
|
||||
titlebar="normal"
|
||||
label="&inspectStylePanelTitle.label;">
|
||||
<listbox id="inspector-style-listbox" flex="1"/>
|
||||
<hbox align="end">
|
||||
<spacer flex="1" />
|
||||
<resizer dir="bottomend"/>
|
||||
</hbox>
|
||||
</panel>
|
||||
|
||||
<menupopup id="toolbar-context-menu"
|
||||
onpopupshowing="onViewToolbarsPopupShowing(event);">
|
||||
<menuseparator/>
|
||||
|
|
|
@ -366,37 +366,6 @@ var InspectorUI = {
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the style panel. Invoked from the toolbar's Style button.
|
||||
*/
|
||||
toggleStylePanel: function IUI_toggleStylePanel()
|
||||
{
|
||||
if (this.isStylePanelOpen) {
|
||||
this.stylePanel.hidePopup();
|
||||
} else {
|
||||
this.openStylePanel();
|
||||
if (this.selection) {
|
||||
this.updateStylePanel(this.selection);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the DOM panel. Invoked from the toolbar's DOM button.
|
||||
*/
|
||||
toggleDOMPanel: function IUI_toggleDOMPanel()
|
||||
{
|
||||
if (this.isDOMPanelOpen) {
|
||||
this.domPanel.hidePopup();
|
||||
} else {
|
||||
this.clearDOMPanel();
|
||||
this.openDOMPanel();
|
||||
if (this.selection) {
|
||||
this.updateDOMPanel(this.selection);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the tree panel open?
|
||||
*
|
||||
|
@ -407,26 +376,6 @@ var InspectorUI = {
|
|||
return this.treePanel && this.treePanel.state == "open";
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the style panel open?
|
||||
*
|
||||
* @returns boolean
|
||||
*/
|
||||
get isStylePanelOpen()
|
||||
{
|
||||
return this.stylePanel && this.stylePanel.state == "open";
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the DOM panel open?
|
||||
*
|
||||
* @returns boolean
|
||||
*/
|
||||
get isDOMPanelOpen()
|
||||
{
|
||||
return this.domPanel && this.domPanel.state == "open";
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the default selection element for the inspected document.
|
||||
*/
|
||||
|
@ -445,10 +394,17 @@ var InspectorUI = {
|
|||
this.ioBox = new InsideOutBox(this, this.treePanelDiv);
|
||||
this.ioBox.createObjectBox(this.win.document.documentElement);
|
||||
this.treeLoaded = true;
|
||||
if (this.isTreePanelOpen && this.isStylePanelOpen &&
|
||||
this.isDOMPanelOpen && this.treeLoaded) {
|
||||
this.notifyReady();
|
||||
}
|
||||
|
||||
// setup highlighter and start inspecting
|
||||
this.initializeHighlighter();
|
||||
|
||||
// Setup the InspectorStore or restore state
|
||||
this.initializeStore();
|
||||
|
||||
if (InspectorStore.getValue(this.winID, "inspecting"))
|
||||
this.startInspecting();
|
||||
|
||||
this.notifyReady();
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -471,26 +427,40 @@ var InspectorUI = {
|
|||
this.treeIFrame.setAttribute("onclick", "InspectorUI.onTreeClick(event)");
|
||||
this.treeIFrame = this.treePanel.insertBefore(this.treeIFrame, resizerBox);
|
||||
}
|
||||
|
||||
|
||||
this.treePanel.addEventListener("popupshown", function treePanelShown() {
|
||||
InspectorUI.treePanel.removeEventListener("popupshown",
|
||||
treePanelShown, false);
|
||||
|
||||
InspectorUI.treeIFrame.addEventListener("load",
|
||||
function loadedInitializeTreePanel() {
|
||||
InspectorUI.treeIFrame.removeEventListener("load",
|
||||
loadedInitializeTreePanel, true);
|
||||
InspectorUI.initializeTreePanel();
|
||||
}, true);
|
||||
|
||||
let src = InspectorUI.treeIFrame.getAttribute("src");
|
||||
if (src != "chrome://browser/content/inspector.html") {
|
||||
InspectorUI.treeIFrame.setAttribute("src",
|
||||
"chrome://browser/content/inspector.html");
|
||||
} else {
|
||||
InspectorUI.treeIFrame.contentWindow.location.reload();
|
||||
}
|
||||
|
||||
}, false);
|
||||
|
||||
const panelWidthRatio = 7 / 8;
|
||||
const panelHeightRatio = 1 / 5;
|
||||
this.treePanel.openPopup(this.browser, "overlap", 80, this.win.innerHeight,
|
||||
|
||||
let width = parseInt(this.win.outerWidth * panelWidthRatio);
|
||||
let height = parseInt(this.win.outerHeight * panelHeightRatio);
|
||||
let y = Math.min(window.screen.availHeight - height, this.win.innerHeight);
|
||||
|
||||
this.treePanel.openPopup(this.browser, "overlap", 0, 0,
|
||||
false, false);
|
||||
this.treePanel.sizeTo(this.win.outerWidth * panelWidthRatio,
|
||||
this.win.outerHeight * panelHeightRatio);
|
||||
|
||||
let src = this.treeIFrame.getAttribute("src");
|
||||
if (src != "chrome://browser/content/inspector.html") {
|
||||
let self = this;
|
||||
this.treeIFrame.addEventListener("DOMContentLoaded", function() {
|
||||
self.treeIFrame.removeEventListener("DOMContentLoaded", arguments.callee, true);
|
||||
self.initializeTreePanel();
|
||||
}, true);
|
||||
|
||||
this.treeIFrame.setAttribute("src", "chrome://browser/content/inspector.html");
|
||||
} else {
|
||||
this.initializeTreePanel();
|
||||
}
|
||||
this.treePanel.moveTo(80, y);
|
||||
this.treePanel.sizeTo(width, height);
|
||||
},
|
||||
|
||||
createObjectBox: function IUI_createObjectBox(object, isRoot)
|
||||
|
@ -600,55 +570,8 @@ var InspectorUI = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Open the style panel if not already onscreen.
|
||||
*/
|
||||
openStylePanel: function IUI_openStylePanel()
|
||||
{
|
||||
if (!this.stylePanel)
|
||||
this.stylePanel = document.getElementById("inspector-style-panel");
|
||||
if (!this.isStylePanelOpen) {
|
||||
this.stylePanel.hidden = false;
|
||||
// open at top right of browser panel, offset by 20px from top.
|
||||
this.stylePanel.openPopup(this.browser, "end_before", 0, 20, false, false);
|
||||
// size panel to 200px wide by half browser height - 60.
|
||||
this.stylePanel.sizeTo(200, this.win.outerHeight / 2 - 60);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open the DOM panel if not already onscreen.
|
||||
*/
|
||||
openDOMPanel: function IUI_openDOMPanel()
|
||||
{
|
||||
if (!this.isDOMPanelOpen) {
|
||||
this.domPanel.hidden = false;
|
||||
// open at middle right of browser panel, offset by 20px from middle.
|
||||
this.domPanel.openPopup(this.browser, "end_before", 0,
|
||||
this.win.outerHeight / 2 - 20, false, false);
|
||||
// size panel to 200px wide by half browser height - 60.
|
||||
this.domPanel.sizeTo(200, this.win.outerHeight / 2 - 60);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the dimmed (semi-transparent) state for a panel by setting or
|
||||
* removing a dimmed attribute.
|
||||
*
|
||||
* @param aDim
|
||||
* The panel to be dimmed.
|
||||
*/
|
||||
toggleDimForPanel: function IUI_toggleDimForPanel(aDim)
|
||||
{
|
||||
if (aDim.hasAttribute("dimmed")) {
|
||||
aDim.removeAttribute("dimmed");
|
||||
} else {
|
||||
aDim.setAttribute("dimmed", "true");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open inspector UI. tree, style and DOM panels if enabled. Add listeners for
|
||||
* document scrolling, resize, tabContainer.TabSelect and others.
|
||||
* Open inspector UI. tree. Add listeners for document scrolling,
|
||||
* resize, tabContainer.TabSelect and others.
|
||||
*/
|
||||
openInspectorUI: function IUI_openInspectorUI()
|
||||
{
|
||||
|
@ -661,44 +584,12 @@ var InspectorUI = {
|
|||
this.domplateUtils.setDOM(window);
|
||||
}
|
||||
|
||||
// DOM panel initialization and loading (via PropertyPanel.jsm)
|
||||
let objectPanelTitle = this.strings.
|
||||
GetStringFromName("object.objectPanelTitle");
|
||||
let parent = document.getElementById("inspector-style-panel").parentNode;
|
||||
this.propertyPanel = new (this.PropertyPanel)(parent, document,
|
||||
objectPanelTitle, {});
|
||||
|
||||
// additional DOM panel setup needed for unittest identification and use
|
||||
this.domPanel = this.propertyPanel.panel;
|
||||
this.domPanel.setAttribute("id", "inspector-dom-panel");
|
||||
this.domBox = this.propertyPanel.tree;
|
||||
this.domTreeView = this.propertyPanel.treeView;
|
||||
|
||||
// open inspector UI
|
||||
this.openTreePanel();
|
||||
|
||||
// style panel setup and activation
|
||||
this.styleBox = document.getElementById("inspector-style-listbox");
|
||||
this.clearStylePanel();
|
||||
this.openStylePanel();
|
||||
|
||||
// DOM panel setup and activation
|
||||
this.clearDOMPanel();
|
||||
this.openDOMPanel();
|
||||
|
||||
// setup highlighter and start inspecting
|
||||
this.initializeHighlighter();
|
||||
|
||||
// Setup the InspectorStore or restore state
|
||||
this.initializeStore();
|
||||
|
||||
if (InspectorStore.getValue(this.winID, "inspecting"))
|
||||
this.startInspecting();
|
||||
|
||||
this.win.document.addEventListener("scroll", this, false);
|
||||
this.win.addEventListener("resize", this, false);
|
||||
this.inspectCmd.setAttribute("checked", true);
|
||||
document.addEventListener("popupshown", this, false);
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -774,8 +665,6 @@ var InspectorUI = {
|
|||
this.highlighter.unhighlight();
|
||||
}
|
||||
|
||||
if (this.isTreePanelOpen)
|
||||
this.treePanel.hidePopup();
|
||||
if (this.treePanelDiv) {
|
||||
this.treePanelDiv.ownerPanel = null;
|
||||
let parent = this.treePanelDiv.parentNode;
|
||||
|
@ -795,21 +684,19 @@ var InspectorUI = {
|
|||
delete this.domplateUtils;
|
||||
}
|
||||
|
||||
if (this.isStylePanelOpen) {
|
||||
this.stylePanel.hidePopup();
|
||||
}
|
||||
if (this.domPanel) {
|
||||
this.domPanel.hidePopup();
|
||||
this.domBox = null;
|
||||
this.domTreeView = null;
|
||||
}
|
||||
this.inspectCmd.setAttribute("checked", false);
|
||||
this.browser = this.win = null; // null out references to browser and window
|
||||
this.winID = null;
|
||||
this.selection = null;
|
||||
this.treeLoaded = false;
|
||||
this.closing = false;
|
||||
Services.obs.notifyObservers(null, "inspector-closed", null);
|
||||
|
||||
this.treePanel.addEventListener("popuphidden", function treePanelHidden() {
|
||||
InspectorUI.closing = false;
|
||||
Services.obs.notifyObservers(null, "inspector-closed", null);
|
||||
}, false);
|
||||
|
||||
this.treePanel.hidePopup();
|
||||
delete this.treePanel;
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -820,8 +707,6 @@ var InspectorUI = {
|
|||
{
|
||||
this.attachPageListeners();
|
||||
this.inspecting = true;
|
||||
this.toggleDimForPanel(this.stylePanel);
|
||||
this.toggleDimForPanel(this.domPanel);
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -834,8 +719,6 @@ var InspectorUI = {
|
|||
return;
|
||||
this.detachPageListeners();
|
||||
this.inspecting = false;
|
||||
this.toggleDimForPanel(this.stylePanel);
|
||||
this.toggleDimForPanel(this.domPanel);
|
||||
if (this.highlighter.node) {
|
||||
this.select(this.highlighter.node, true, true);
|
||||
}
|
||||
|
@ -860,148 +743,16 @@ var InspectorUI = {
|
|||
let box = this.ioBox.createObjectBox(this.selection);
|
||||
if (!this.inspecting) {
|
||||
this.highlighter.highlightNode(this.selection);
|
||||
this.updateStylePanel(this.selection);
|
||||
this.updateDOMPanel(this.selection);
|
||||
}
|
||||
this.ioBox.select(aNode, true, true, aScroll);
|
||||
}
|
||||
},
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////
|
||||
//// Model Creation Methods
|
||||
|
||||
/**
|
||||
* Add a new item to the style panel listbox.
|
||||
*
|
||||
* @param aLabel
|
||||
* A bit of text to put in the listitem's label attribute.
|
||||
* @param aType
|
||||
* The type of item.
|
||||
* @param content
|
||||
* Text content or value of the listitem.
|
||||
*/
|
||||
addStyleItem: function IUI_addStyleItem(aLabel, aType, aContent)
|
||||
{
|
||||
let itemLabelString = this.strings.GetStringFromName("style.styleItemLabel");
|
||||
let item = document.createElement("listitem");
|
||||
|
||||
// Do not localize these strings
|
||||
let label = aLabel;
|
||||
item.className = "style-" + aType;
|
||||
if (aContent) {
|
||||
label = itemLabelString.replace("#1", aLabel);
|
||||
label = label.replace("#2", aContent);
|
||||
}
|
||||
item.setAttribute("label", label);
|
||||
|
||||
this.styleBox.appendChild(item);
|
||||
},
|
||||
|
||||
/**
|
||||
* Create items for each rule included in the given array.
|
||||
*
|
||||
* @param aRules
|
||||
* an array of rule objects
|
||||
*/
|
||||
createStyleRuleItems: function IUI_createStyleRuleItems(aRules)
|
||||
{
|
||||
let selectorLabel = this.strings.GetStringFromName("style.selectorLabel");
|
||||
|
||||
aRules.forEach(function(rule) {
|
||||
this.addStyleItem(selectorLabel, "selector", rule.id);
|
||||
rule.properties.forEach(function(property) {
|
||||
if (property.overridden)
|
||||
return; // property marked overridden elsewhere
|
||||
// Do not localize the strings below this line
|
||||
let important = "";
|
||||
if (property.important)
|
||||
important += " !important";
|
||||
this.addStyleItem(property.name, "property", property.value + important);
|
||||
}, this);
|
||||
}, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Create rule items for each section as well as the element's style rules,
|
||||
* if any.
|
||||
*
|
||||
* @param aRules
|
||||
* Array of rules corresponding to the element's style object.
|
||||
* @param aSections
|
||||
* Array of sections encapsulating the inherited rules for selectors
|
||||
* and elements.
|
||||
*/
|
||||
createStyleItems: function IUI_createStyleItems(aRules, aSections)
|
||||
{
|
||||
this.createStyleRuleItems(aRules);
|
||||
let inheritedString =
|
||||
this.strings.GetStringFromName("style.inheritedFrom");
|
||||
aSections.forEach(function(section) {
|
||||
let sectionTitle = section.element.tagName;
|
||||
if (section.element.id)
|
||||
sectionTitle += "#" + section.element.id;
|
||||
let replacedString = inheritedString.replace("#1", sectionTitle);
|
||||
this.addStyleItem(replacedString, "section");
|
||||
this.createStyleRuleItems(section.rules);
|
||||
}, this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove all items from the Style Panel's listbox.
|
||||
*/
|
||||
clearStylePanel: function IUI_clearStylePanel()
|
||||
{
|
||||
for (let i = this.styleBox.childElementCount; i >= 0; --i)
|
||||
this.styleBox.removeItemAt(i);
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove all items from the DOM Panel's listbox.
|
||||
*/
|
||||
clearDOMPanel: function IUI_clearStylePanel()
|
||||
{
|
||||
this.domTreeView.data = {};
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the contents of the style panel with styles for the currently
|
||||
* inspected node.
|
||||
*
|
||||
* @param aNode
|
||||
* The highlighted node to get styles for.
|
||||
*/
|
||||
updateStylePanel: function IUI_updateStylePanel(aNode)
|
||||
{
|
||||
if (this.inspecting || !this.isStylePanelOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
let rules = [], styleSections = [], usedProperties = {};
|
||||
this.style.getInheritedRules(aNode, styleSections, usedProperties);
|
||||
this.style.getElementRules(aNode, rules, usedProperties);
|
||||
this.clearStylePanel();
|
||||
this.createStyleItems(rules, styleSections);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update the contents of the DOM panel with name/value pairs for the
|
||||
* currently-inspected node.
|
||||
*/
|
||||
updateDOMPanel: function IUI_updateDOMPanel(aNode)
|
||||
{
|
||||
if (this.inspecting || !this.isDOMPanelOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.domTreeView.data = aNode;
|
||||
},
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////
|
||||
//// Event Handling
|
||||
|
||||
notifyReady: function IUI_notifyReady()
|
||||
{
|
||||
document.removeEventListener("popupshowing", this, false);
|
||||
Services.obs.notifyObservers(null, "inspector-opened", null);
|
||||
},
|
||||
|
||||
|
@ -1018,15 +769,6 @@ var InspectorUI = {
|
|||
let inspectorClosed = false;
|
||||
|
||||
switch (event.type) {
|
||||
case "popupshown":
|
||||
if (event.target.id == "inspector-tree-panel" ||
|
||||
event.target.id == "inspector-style-panel" ||
|
||||
event.target.id == "inspector-dom-panel")
|
||||
if (this.isTreePanelOpen && this.isStylePanelOpen &&
|
||||
this.isDOMPanelOpen && this.treeLoaded) {
|
||||
this.notifyReady();
|
||||
}
|
||||
break;
|
||||
case "TabSelect":
|
||||
winID = this.getWindowID(gBrowser.selectedBrowser.contentWindow);
|
||||
if (this.isTreePanelOpen && winID != this.winID) {
|
||||
|
@ -1036,13 +778,17 @@ var InspectorUI = {
|
|||
|
||||
if (winID && InspectorStore.hasID(winID)) {
|
||||
if (inspectorClosed && this.closing) {
|
||||
Services.obs.addObserver(function () {
|
||||
Services.obs.addObserver(function reopenInspectorForTab() {
|
||||
Services.obs.removeObserver(reopenInspectorForTab,
|
||||
"inspector-closed", false);
|
||||
InspectorUI.openInspectorUI();
|
||||
}, "inspector-closed", false);
|
||||
} else {
|
||||
this.openInspectorUI();
|
||||
}
|
||||
} else if (InspectorStore.isEmpty()) {
|
||||
}
|
||||
|
||||
if (InspectorStore.isEmpty()) {
|
||||
gBrowser.tabContainer.removeEventListener("TabSelect", this, false);
|
||||
}
|
||||
break;
|
||||
|
@ -1151,8 +897,6 @@ var InspectorUI = {
|
|||
this.selectEventsSuppressed = true;
|
||||
this.select(aNode, true, true);
|
||||
this.selectEventsSuppressed = false;
|
||||
this.updateStylePanel(aNode);
|
||||
this.updateDOMPanel(aNode);
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -1284,6 +1028,25 @@ var InspectorUI = {
|
|||
{
|
||||
Services.console.logStringMessage(msg);
|
||||
},
|
||||
|
||||
/**
|
||||
* Debugging function.
|
||||
* @param msg
|
||||
* text to show with the stack trace.
|
||||
*/
|
||||
_trace: function TRACE(msg)
|
||||
{
|
||||
this._log("TRACE: " + msg);
|
||||
let frame = Components.stack.caller;
|
||||
while (frame = frame.caller) {
|
||||
if (frame.language == Ci.nsIProgrammingLanguage.JAVASCRIPT ||
|
||||
frame.language == Ci.nsIProgrammingLanguage.JAVASCRIPT2) {
|
||||
this._log("filename: " + frame.filename + " lineNumber: " + frame.lineNumber +
|
||||
" functionName: " + frame.name);
|
||||
}
|
||||
}
|
||||
this._log("END TRACE");
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -1420,26 +1183,3 @@ XPCOMUtils.defineLazyGetter(InspectorUI, "inspectCmd", function () {
|
|||
return document.getElementById("Tools:Inspect");
|
||||
});
|
||||
|
||||
XPCOMUtils.defineLazyGetter(InspectorUI, "strings", function () {
|
||||
return Services.strings.createBundle("chrome://browser/locale/inspector.properties");
|
||||
});
|
||||
|
||||
XPCOMUtils.defineLazyGetter(InspectorUI, "PropertyTreeView", function () {
|
||||
var obj = {};
|
||||
Cu.import("resource:///modules/PropertyPanel.jsm", obj);
|
||||
return obj.PropertyTreeView;
|
||||
});
|
||||
|
||||
XPCOMUtils.defineLazyGetter(InspectorUI, "PropertyPanel", function () {
|
||||
var obj = {};
|
||||
Cu.import("resource:///modules/PropertyPanel.jsm", obj);
|
||||
return obj.PropertyPanel;
|
||||
});
|
||||
|
||||
XPCOMUtils.defineLazyGetter(InspectorUI, "style", function () {
|
||||
var obj = {};
|
||||
Cu.import("resource:///modules/stylePanel.jsm", obj);
|
||||
obj.style.initialize();
|
||||
return obj.style;
|
||||
});
|
||||
|
||||
|
|
|
@ -1,315 +0,0 @@
|
|||
/*
|
||||
* Software License Agreement (BSD License)
|
||||
*
|
||||
* Copyright (c) 2007, Parakey Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use of this software in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* * Redistributions of source code must retain the above
|
||||
* copyright notice, this list of conditions and the
|
||||
* following disclaimer.
|
||||
*
|
||||
* * Redistributions in binary form must reproduce the above
|
||||
* copyright notice, this list of conditions and the
|
||||
* following disclaimer in the documentation and/or other
|
||||
* materials provided with the distribution.
|
||||
*
|
||||
* * Neither the name of Parakey Inc. nor the names of its
|
||||
* contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior
|
||||
* written permission of Parakey Inc.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
|
||||
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
|
||||
* FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
|
||||
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
||||
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
|
||||
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
|
||||
* OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Creator:
|
||||
* Joe Hewitt
|
||||
* Contributors
|
||||
* John J. Barton (IBM Almaden)
|
||||
* Jan Odvarko (Mozilla Corp.)
|
||||
* Max Stepanov (Aptana Inc.)
|
||||
* Rob Campbell (Mozilla Corp.)
|
||||
* Hans Hillen (Paciello Group, Mozilla)
|
||||
* Curtis Bartley (Mozilla Corp.)
|
||||
* Mike Collins (IBM Almaden)
|
||||
* Kevin Decker
|
||||
* Mike Ratcliffe (Comartis AG)
|
||||
* Hernan Rodríguez Colmeiro
|
||||
* Austin Andrews
|
||||
* Christoph Dorn
|
||||
* Steven Roussey (AppCenter Inc, Network54)
|
||||
*/
|
||||
|
||||
var EXPORTED_SYMBOLS = ["style"];
|
||||
|
||||
const Cc = Components.classes;
|
||||
const Ci = Components.interfaces;
|
||||
const Cu = Components.utils;
|
||||
|
||||
Cu.import("resource://gre/modules/Services.jsm");
|
||||
|
||||
var style = {
|
||||
|
||||
/**
|
||||
* initialize domUtils
|
||||
*/
|
||||
initialize: function CSS_initialize()
|
||||
{
|
||||
this.domUtils = Cc["@mozilla.org/inspector/dom-utils;1"].
|
||||
getService(Ci["inIDOMUtils"]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Is the given property sheet a system (user agent) stylesheet?
|
||||
*
|
||||
* @param aSheet
|
||||
* a stylesheet
|
||||
*/
|
||||
isSystemStyleSheet: function CSS_isSystemStyleSheet(aSheet)
|
||||
{
|
||||
if (!aSheet)
|
||||
return true;
|
||||
|
||||
let url = aSheet.href;
|
||||
|
||||
if (!url)
|
||||
return false;
|
||||
if (url.length == 0)
|
||||
return true;
|
||||
if (url[0] == 'h')
|
||||
return false;
|
||||
if (url.substr(0, 9) == "resource:")
|
||||
return true;
|
||||
if (url.substr(0, 7) == "chrome:")
|
||||
return true;
|
||||
if (url == "XPCSafeJSObjectWrapper.cpp")
|
||||
return true;
|
||||
if (url.substr(0, 6) == "about:")
|
||||
return true;
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Parse properties from a given style object.
|
||||
* Borrowed from Firebug's css.js.
|
||||
*
|
||||
* @param aStyle
|
||||
* a style object
|
||||
*/
|
||||
parseCSSProperties: function CSS_parseCSSProps(aStyle)
|
||||
{
|
||||
let properties = [];
|
||||
let lines = aStyle.cssText.match(/(?:[^;\(]*(?:\([^\)]*?\))?[^;\(]*)*;?/g);
|
||||
let propRE = /\s*([^:\s]*)\s*:\s*(.*?)\s*(! important)?;?$/;
|
||||
let line, i = 0;
|
||||
while(line = lines[i++]) {
|
||||
let match = propRE.exec(line);
|
||||
if (!match)
|
||||
continue;
|
||||
let name = match[1];
|
||||
let value = match[2];
|
||||
let important = !!match[3]; // true if match[3] is non-empty
|
||||
properties.unshift({name: name, value: value, important: important});
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
/**
|
||||
* Mark properties overridden further up the hierarchy.
|
||||
*
|
||||
* @param aProps
|
||||
* Array of properties.
|
||||
* @param aUsedProps
|
||||
* Object of arrays keyed by property name.
|
||||
* @param aInherit
|
||||
* Boolean of whether or not we are in inherited mode.
|
||||
*/
|
||||
markOverriddenProperties: function CSS_markOverriddenProperties(aProps, aUsedProps, aInherit)
|
||||
{
|
||||
for (let i = 0; i < aProps.length; ++i) {
|
||||
let prop = aProps[i];
|
||||
if (aUsedProps.hasOwnProperty(prop.name)) {
|
||||
// all previous occurrences of this property
|
||||
let deadProps = aUsedProps[prop.name];
|
||||
for (let j = 0; j < deadProps.length; ++j) {
|
||||
let deadProp = deadProps[j];
|
||||
if (!deadProp.disabled && !deadProp.wasInherited &&
|
||||
deadProp.important && !prop.important) {
|
||||
prop.overridden = true; // new occurrence overridden
|
||||
} else if (!prop.disabled) {
|
||||
deadProp.overridden = true; // previous occurrences overridden
|
||||
} else {
|
||||
aUsedProps[prop.name] = [];
|
||||
}
|
||||
|
||||
prop.wasInherited = aInherit ? true : false;
|
||||
// all occurrences of a property seen so far, by name
|
||||
aUsedProps[prop.name].push(prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sort given properties in lexical order by name.
|
||||
*
|
||||
* @param properties
|
||||
* An array of properties.
|
||||
* @returns sorted array.
|
||||
*/
|
||||
sortProperties: function CSS_sortProperties(properties)
|
||||
{
|
||||
properties.sort(function(a, b)
|
||||
{
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Get properties for a given element and push them to the rules array.
|
||||
*
|
||||
* @param aNode
|
||||
* a DOM node
|
||||
* @param rules
|
||||
* An array of rules to add properties to.
|
||||
* @param usedProps
|
||||
* Object of arrays keyed by property name.
|
||||
* @param inherit
|
||||
* boolean determining whether or not we're in inherit mode
|
||||
*/
|
||||
getStyleProperties: function CSS_getStyleProperties(aNode, aRules, aUsedProps, aInherit)
|
||||
{
|
||||
let properties = this.parseCSSProperties(aNode.style, aInherit);
|
||||
|
||||
this.sortProperties(properties);
|
||||
this.markOverriddenProperties(properties, aUsedProps, aInherit);
|
||||
|
||||
if (properties.length) {
|
||||
aRules.push({rule: aNode, selector: "element.style",
|
||||
properties: properties, inherited: aInherit});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get properties for a given rule.
|
||||
*
|
||||
* @param aRule
|
||||
* A Rule from a stylesheet.
|
||||
*/
|
||||
getRuleProperties: function CSS_getRuleProperties(aRule)
|
||||
{
|
||||
let style = aRule.style;
|
||||
return this.parseCSSProperties(style);
|
||||
},
|
||||
|
||||
/**
|
||||
* Recursively get rules for an element's parents and add them to the
|
||||
* sections array.
|
||||
*
|
||||
* @param aNode
|
||||
* an element in a DOM tree.
|
||||
* @param sections
|
||||
* an array of sections
|
||||
* @param usedProps
|
||||
* Object of arrays keyed by property name.
|
||||
*/
|
||||
getInheritedRules: function CSS_getInheritedRules(aNode, aSections, aUsedProps)
|
||||
{
|
||||
let parent = aNode.parentNode;
|
||||
if (parent && parent.nodeType == 1) {
|
||||
this.getInheritedRules(parent, aSections, aUsedProps);
|
||||
|
||||
let rules = [];
|
||||
this.getElementRules(parent, rules, aUsedProps, true);
|
||||
|
||||
if (rules.length) {
|
||||
aSections.unshift({element: parent, rules: rules});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the CSS style rules for a given node in the DOM and append them to the
|
||||
* rules array.
|
||||
*
|
||||
* @param aNode
|
||||
* an element in the DOM tree.
|
||||
* @param aRules
|
||||
* an array of rules.
|
||||
* @param aUsedProps
|
||||
* Object of arrays keyed by property name.
|
||||
* @param aInherit
|
||||
* boolean indicating whether we are in an inherited mode or not
|
||||
*/
|
||||
getElementRules: function CSS_getElementRules(aNode, aRules, aUsedProps, aInherit)
|
||||
{
|
||||
let inspectedRules;
|
||||
|
||||
try {
|
||||
inspectedRules = this.domUtils.getCSSStyleRules(aNode);
|
||||
} catch (ex) {
|
||||
Services.console.logStringMessage(ex);
|
||||
}
|
||||
|
||||
if (!inspectedRules)
|
||||
return;
|
||||
|
||||
for (let i = 0; i < inspectedRules.Count(); ++i) {
|
||||
let rule = inspectedRules.GetElementAt(i);
|
||||
let href = rule.parentStyleSheet.href;
|
||||
|
||||
if (!href) {
|
||||
// Null href means inline style.
|
||||
href = aNode.ownerDocument.location.href;
|
||||
}
|
||||
|
||||
let isSystemSheet = this.isSystemStyleSheet(rule.parentStyleSheet);
|
||||
|
||||
if (isSystemSheet)
|
||||
continue;
|
||||
|
||||
let properties = this.getRuleProperties(rule, aInherit);
|
||||
if (aInherit && !properties.length)
|
||||
continue;
|
||||
|
||||
let line = this.domUtils.getRuleLine(rule);
|
||||
let ruleId = rule.selectorText + " " + href + " (" + line + ")";
|
||||
|
||||
let sourceLink = "view-source:" + href + "#" + line;
|
||||
|
||||
this.markOverriddenProperties(properties, aUsedProps, aInherit);
|
||||
|
||||
aRules.unshift(
|
||||
{rule: rule,
|
||||
id: ruleId,
|
||||
selector: rule.selectorText,
|
||||
properties: properties,
|
||||
inherited: aInherit,
|
||||
sourceLink: sourceLink,
|
||||
isSystemSheet: isSystemSheet});
|
||||
}
|
||||
|
||||
if (aNode.style) {
|
||||
this.getStyleProperties(aNode, aRules, aUsedProps, aInherit);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -184,8 +184,6 @@ _BROWSER_FILES = \
|
|||
browser_inspector_initialization.js \
|
||||
browser_inspector_treeSelection.js \
|
||||
browser_inspector_highlighter.js \
|
||||
browser_inspector_stylePanel.js \
|
||||
browser_inspector_domPanel.js \
|
||||
browser_inspector_iframeTest.js \
|
||||
browser_inspector_scrolling.js \
|
||||
browser_inspector_store.js \
|
||||
|
|
|
@ -1,171 +0,0 @@
|
|||
/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is Inspector DOM Panel Tests.
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* The Mozilla Foundation.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2010
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
* Rob Campbell <rcampbell@mozilla.com>
|
||||
* Mihai Șucan <mihai.sucan@gmail.com>
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
let doc;
|
||||
let testGen;
|
||||
let newProperty;
|
||||
|
||||
function createDocument()
|
||||
{
|
||||
doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
|
||||
'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
|
||||
'<h1>Some header text</h1>\n' +
|
||||
'<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
|
||||
'<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
|
||||
'solely to provide some things to <span style="{color: yellow}">' +
|
||||
'highlight</span> and <span style="{font-weight: bold}">count</span> ' +
|
||||
'DOM list-items in the box at right. If you are reading this, ' +
|
||||
'you should go do something else instead. Maybe read a book. Or better ' +
|
||||
'yet, write some test-cases for another bit of code. ' +
|
||||
'<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
|
||||
'<p id="closing">end transmission</p>\n' +
|
||||
'</div>';
|
||||
doc.title = "Inspector DOM Test";
|
||||
Services.obs.addObserver(runDOMTests, "inspector-opened", false);
|
||||
InspectorUI.openInspectorUI();
|
||||
}
|
||||
|
||||
function nodeGenerator()
|
||||
{
|
||||
let body = doc.body;
|
||||
newProperty = "rand" + Date.now();
|
||||
body[newProperty] = Math.round(Math.random() * 100);
|
||||
InspectorUI.inspectNode(body);
|
||||
yield;
|
||||
|
||||
let h1 = doc.querySelector("h1");
|
||||
newProperty = "rand2" + Date.now();
|
||||
h1[newProperty] = "test" + Math.random();
|
||||
InspectorUI.inspectNode(h1);
|
||||
yield;
|
||||
|
||||
let first = doc.getElementById("first");
|
||||
newProperty = "rand3" + Date.now();
|
||||
first[newProperty] = null;
|
||||
InspectorUI.inspectNode(first);
|
||||
yield;
|
||||
|
||||
let closing = doc.getElementById("closing");
|
||||
newProperty = "bazbaz" + Date.now();
|
||||
closing[newProperty] = false;
|
||||
InspectorUI.inspectNode(closing);
|
||||
yield;
|
||||
}
|
||||
|
||||
function runDOMTests()
|
||||
{
|
||||
InspectorUI._log("runDOMtests");
|
||||
Services.obs.removeObserver(runDOMTests, "inspector-opened", false);
|
||||
document.addEventListener("popupshown", performTestComparisons, false);
|
||||
InspectorUI.stopInspecting();
|
||||
testGen = nodeGenerator();
|
||||
testGen.next();
|
||||
}
|
||||
|
||||
function findInDOMPanel(aString)
|
||||
{
|
||||
let treeView = InspectorUI.domTreeView;
|
||||
let row;
|
||||
|
||||
for (let i = 0, n = treeView.rowCount; i < n; i++) {
|
||||
row = treeView.getCellText(i, 0);
|
||||
if (row && row.indexOf(aString) != -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function performTestComparisons(evt)
|
||||
{
|
||||
InspectorUI._log("performTestComparisons");
|
||||
if (evt.target.id != "highlighter-panel")
|
||||
return true;
|
||||
|
||||
let selection = InspectorUI.selection;
|
||||
|
||||
ok(selection, "selection");
|
||||
ok(InspectorUI.isDOMPanelOpen, "DOM panel is open?");
|
||||
ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
|
||||
|
||||
let value = selection[newProperty];
|
||||
if (typeof value == "string") {
|
||||
value = '"' + value + '"';
|
||||
}
|
||||
|
||||
ok(findInDOMPanel(newProperty + ': ' + value),
|
||||
"domPanel shows the correct value for " + newProperty);
|
||||
|
||||
ok(findInDOMPanel('tagName: "' + selection.tagName + '"'),
|
||||
"domPanel shows the correct tagName");
|
||||
|
||||
if (selection.id) {
|
||||
ok(findInDOMPanel('id: "' + selection.id + '"'),
|
||||
"domPanel shows the correct id");
|
||||
}
|
||||
|
||||
try {
|
||||
testGen.next();
|
||||
} catch(StopIteration) {
|
||||
document.removeEventListener("popupshown", performTestComparisons, false);
|
||||
finishUp();
|
||||
}
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
InspectorUI.closeInspectorUI();
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
|
||||
function test()
|
||||
{
|
||||
waitForExplicitFinish();
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
|
||||
doc = content.document;
|
||||
waitForFocus(createDocument, content);
|
||||
}, true);
|
||||
|
||||
content.location = "data:text/html,basic tests for inspector";
|
||||
}
|
||||
|
|
@ -97,11 +97,16 @@ function performTestComparisons(evt)
|
|||
is(h1, InspectorUI.selection, "selection matches node");
|
||||
ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
|
||||
is(InspectorUI.highlighter.highlitNode, h1, "highlighter matches selection");
|
||||
executeSoon(finishUp);
|
||||
|
||||
Services.obs.addObserver(finishUp, "inspector-closed", false);
|
||||
InspectorUI.closeInspectorUI();
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
InspectorUI.closeInspectorUI();
|
||||
Services.obs.removeObserver(finishUp, "inspector-closed", false);
|
||||
|
||||
ok(!InspectorUI.highlighter.isHighlighting, "panel is not highlighting");
|
||||
doc = h1 = null;
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
|
|
|
@ -54,16 +54,12 @@ function runInspectorTests()
|
|||
is(InspectorUI.treeIFrame, iframe, "Inspector IFrame matches");
|
||||
ok(InspectorUI.inspecting, "Inspector is highlighting");
|
||||
ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
|
||||
ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
|
||||
ok(InspectorUI.isDOMPanelOpen, "Inspector DOM Panel is open");
|
||||
InspectorUI.closeInspectorUI();
|
||||
}
|
||||
|
||||
function finishInspectorTests()
|
||||
{
|
||||
Services.obs.removeObserver(finishInspectorTests, "inspector-closed", false);
|
||||
ok(!InspectorUI.isDOMPanelOpen, "Inspector DOM Panel is closed");
|
||||
ok(!InspectorUI.isStylePanelOpen, "Inspector Style Panel is closed");
|
||||
ok(!InspectorUI.isTreePanelOpen, "Inspector Tree Panel is closed");
|
||||
ok(!InspectorUI.inspecting, "Inspector is not highlighting");
|
||||
gBrowser.removeCurrentTab();
|
||||
|
|
|
@ -1,124 +0,0 @@
|
|||
/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is Inspector Style Panel Tests.
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* The Mozilla Foundation.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2010
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
* Rob Campbell <rcampbell@mozilla.com> (original author)
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
let doc;
|
||||
let spans;
|
||||
let testGen;
|
||||
|
||||
function createDocument()
|
||||
{
|
||||
doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
|
||||
'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
|
||||
'<h1>Some header text</h1>\n' +
|
||||
'<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
|
||||
'<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
|
||||
'solely to provide some things to <span style="{color: yellow}">' +
|
||||
'highlight</span> and <span style="{font-weight: bold}">count</span> ' +
|
||||
'style list-items in the box at right. If you are reading this, ' +
|
||||
'you should go do something else instead. Maybe read a book. Or better ' +
|
||||
'yet, write some test-cases for another bit of code. ' +
|
||||
'<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
|
||||
'<p id="closing">end transmission</p>\n' +
|
||||
'</div>';
|
||||
doc.title = "Inspector Style Test";
|
||||
setupStyleTests();
|
||||
}
|
||||
|
||||
function setupStyleTests()
|
||||
{
|
||||
spans = doc.querySelectorAll("span");
|
||||
ok(spans, "captain, we have the spans");
|
||||
Services.obs.addObserver(runStyleTests, "inspector-opened", false);
|
||||
InspectorUI.openInspectorUI();
|
||||
}
|
||||
|
||||
function spanGenerator()
|
||||
{
|
||||
for (var i = 0; i < spans.length; ++i) {
|
||||
InspectorUI.inspectNode(spans[i]);
|
||||
yield;
|
||||
}
|
||||
}
|
||||
|
||||
function runStyleTests()
|
||||
{
|
||||
Services.obs.removeObserver(runStyleTests, "inspector-opened", false);
|
||||
document.addEventListener("popupshown", performTestComparisons, false);
|
||||
InspectorUI.stopInspecting();
|
||||
testGen = spanGenerator();
|
||||
testGen.next();
|
||||
}
|
||||
|
||||
function performTestComparisons(evt)
|
||||
{
|
||||
if (evt.target.id != "highlighter-panel")
|
||||
return true;
|
||||
|
||||
ok(InspectorUI.selection, "selection");
|
||||
ok(InspectorUI.isStylePanelOpen, "style panel is open?");
|
||||
ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
|
||||
ok(InspectorUI.styleBox.itemCount > 0, "styleBox has items");
|
||||
|
||||
try {
|
||||
testGen.next();
|
||||
} catch(StopIteration) {
|
||||
document.removeEventListener("popupshown", performTestComparisons, false);
|
||||
finishUp();
|
||||
}
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
InspectorUI.closeInspectorUI();
|
||||
gBrowser.removeCurrentTab();
|
||||
finish();
|
||||
}
|
||||
|
||||
function test()
|
||||
{
|
||||
waitForExplicitFinish();
|
||||
gBrowser.selectedTab = gBrowser.addTab();
|
||||
gBrowser.selectedBrowser.addEventListener("load", function() {
|
||||
gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
|
||||
doc = content.document;
|
||||
waitForFocus(createDocument, content);
|
||||
}, true);
|
||||
|
||||
content.location = "data:text/html,basic tests for inspector";
|
||||
}
|
||||
|
|
@ -60,7 +60,6 @@ function inspectorUIOpen1()
|
|||
// Make sure the inspector is open.
|
||||
ok(InspectorUI.inspecting, "Inspector is highlighting");
|
||||
ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
|
||||
ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
|
||||
ok(!InspectorStore.isEmpty(), "InspectorStore is not empty");
|
||||
is(InspectorStore.length, 1, "InspectorStore.length = 1");
|
||||
|
||||
|
@ -72,6 +71,7 @@ function inspectorUIOpen1()
|
|||
// Open the second tab.
|
||||
tab2 = gBrowser.addTab();
|
||||
gBrowser.selectedTab = tab2;
|
||||
|
||||
gBrowser.selectedBrowser.addEventListener("load", function(evt) {
|
||||
gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
|
||||
true);
|
||||
|
@ -86,12 +86,13 @@ function inspectorTabOpen2()
|
|||
// Make sure the inspector is closed.
|
||||
ok(!InspectorUI.inspecting, "Inspector is not highlighting");
|
||||
ok(!InspectorUI.isPanelOpen, "Inspector Tree Panel is closed");
|
||||
ok(!InspectorUI.isStylePanelOpen, "Inspector Style Panel is closed");
|
||||
is(InspectorStore.length, 1, "InspectorStore.length = 1");
|
||||
|
||||
// Activate the inspector again.
|
||||
executeSoon(function() {
|
||||
Services.obs.addObserver(inspectorUIOpen2, "inspector-opened", false);
|
||||
InspectorUI.openInspectorUI();
|
||||
InspectorUI.openInspectorUI();
|
||||
});
|
||||
}
|
||||
|
||||
function inspectorUIOpen2()
|
||||
|
@ -101,7 +102,6 @@ function inspectorUIOpen2()
|
|||
// Make sure the inspector is open.
|
||||
ok(InspectorUI.inspecting, "Inspector is highlighting");
|
||||
ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
|
||||
ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
|
||||
is(InspectorStore.length, 2, "InspectorStore.length = 2");
|
||||
|
||||
// Disable highlighting.
|
||||
|
@ -109,8 +109,10 @@ function inspectorUIOpen2()
|
|||
ok(!InspectorUI.inspecting, "Inspector is not highlighting");
|
||||
|
||||
// Switch back to tab 1.
|
||||
Services.obs.addObserver(inspectorFocusTab1, "inspector-opened", false);
|
||||
gBrowser.selectedTab = tab1;
|
||||
executeSoon(function() {
|
||||
Services.obs.addObserver(inspectorFocusTab1, "inspector-opened", false);
|
||||
gBrowser.selectedTab = tab1;
|
||||
});
|
||||
}
|
||||
|
||||
function inspectorFocusTab1()
|
||||
|
@ -120,7 +122,6 @@ function inspectorFocusTab1()
|
|||
// Make sure the inspector is still open.
|
||||
ok(InspectorUI.inspecting, "Inspector is highlighting");
|
||||
ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
|
||||
ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
|
||||
is(InspectorStore.length, 2, "InspectorStore.length = 2");
|
||||
is(InspectorUI.selection, div, "selection matches the div element");
|
||||
|
||||
|
@ -136,7 +137,6 @@ function inspectorFocusTab2()
|
|||
// Make sure the inspector is still open.
|
||||
ok(!InspectorUI.inspecting, "Inspector is not highlighting");
|
||||
ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
|
||||
ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
|
||||
is(InspectorStore.length, 2, "InspectorStore.length = 2");
|
||||
isnot(InspectorUI.selection, div, "selection does not match the div element");
|
||||
|
||||
|
@ -154,7 +154,6 @@ function inspectorTabUnload1(evt)
|
|||
// Make sure the Inspector is still open and that the state is correct.
|
||||
ok(!InspectorUI.inspecting, "Inspector is not highlighting");
|
||||
ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
|
||||
ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
|
||||
is(InspectorStore.length, 1, "InspectorStore.length = 1");
|
||||
|
||||
InspectorUI.closeInspectorUI();
|
||||
|
|
|
@ -212,19 +212,6 @@ can reach it easily. -->
|
|||
<!ENTITY inspectPanelTitle.label "HTML">
|
||||
<!ENTITY inspectButton.label "Inspect">
|
||||
<!ENTITY inspectButton.accesskey "I">
|
||||
<!ENTITY inspectNextButton.label "Next">
|
||||
<!ENTITY inspectNextButton.accesskey "N">
|
||||
<!ENTITY inspectPreviousButton.label "Previous">
|
||||
<!ENTITY inspectPreviousButton.accesskey "P">
|
||||
<!ENTITY inspectStyleButton.label "Style">
|
||||
<!ENTITY inspectStyleButton.accesskey "S">
|
||||
<!ENTITY inspectStylePanelTitle.label "Style">
|
||||
<!-- LOCALIZATION NOTE (inspectObjectButton.label): This button label
|
||||
- appears on the Inspector's toolbar. It is used to open and close the Object
|
||||
- panel. There is also a label in inspector.properties for the panel
|
||||
- titlebar: object.objectPanelTitle. -->
|
||||
<!ENTITY inspectObjectButton.label "Object">
|
||||
<!ENTITY inspectObjectButton.accesskey "O">
|
||||
|
||||
<!ENTITY getMoreDevtoolsCmd.label "Get More Tools">
|
||||
<!ENTITY getMoreDevtoolsCmd.accesskey "M">
|
||||
|
|
|
@ -1,16 +0,0 @@
|
|||
# LOCALIZATION NOTE (style.selectorLabel): Used in the Inspector style panel
|
||||
# to label a CSS Selector.
|
||||
style.selectorLabel=Selector
|
||||
|
||||
# LOCALIZATION NOTE (style.inheritedFrom): used in Style panel in
|
||||
# inspector. Describes which tagname[#id] the properties are inherited from.
|
||||
style.inheritedFrom=Inherited from: #1
|
||||
|
||||
# LOCALIZATION NOTE (style.styleItemLabel): used in Style panel in inspector.
|
||||
# Used for construction of list items, #1 = label, #2 = content.
|
||||
style.styleItemLabel=#1: #2
|
||||
|
||||
# LOCALIZATION NOTE (object.objectPanelTitle): used in the Object Panel in the
|
||||
# Inspector tool. There's also inspectObjectButton in browser.dtd for the
|
||||
# toolbar button which allows users to open/close the Object panel.
|
||||
object.objectPanelTitle=Object
|
|
@ -14,7 +14,6 @@
|
|||
* locale/browser/browser.dtd (%chrome/browser/browser.dtd)
|
||||
locale/browser/baseMenuOverlay.dtd (%chrome/browser/baseMenuOverlay.dtd)
|
||||
locale/browser/browser.properties (%chrome/browser/browser.properties)
|
||||
locale/browser/inspector.properties (%chrome/browser/inspector.properties)
|
||||
locale/browser/scratchpad.properties (%chrome/browser/scratchpad.properties)
|
||||
locale/browser/scratchpad.dtd (%chrome/browser/scratchpad.dtd)
|
||||
locale/browser/openLocation.dtd (%chrome/browser/openLocation.dtd)
|
||||
|
|
Загрузка…
Ссылка в новой задаче