mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 797527 - Remove InsideOutBox.jsm, DOMPlate.jsm and friends; r=dcamp
This commit is contained in:
Rob Campbell
parent
c5bc12b211
commit
3f3ed08c2e
@ -1,804 +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)
|
|
||||||
*/
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
|
||||||
//// InsideOutBox
|
|
||||||
|
|
||||||
/**
|
|
||||||
* InsideOutBoxView is a simple interface definition for views implementing
|
|
||||||
* InsideOutBox controls. All implementors must define these methods.
|
|
||||||
* Implemented in InspectorUI.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
InsideOutBoxView = {
|
|
||||||
//
|
|
||||||
* Retrieves the parent object for a given child object.
|
|
||||||
* @param aChild
|
|
||||||
* The child node to retrieve the parent object for.
|
|
||||||
* @returns a DOM node | null
|
|
||||||
//
|
|
||||||
getParentObject: function(aChild) {},
|
|
||||||
|
|
||||||
//
|
|
||||||
* Retrieves a given child node.
|
|
||||||
*
|
|
||||||
* If both index and previousSibling are passed, the implementation
|
|
||||||
* may assume that previousSibling will be the return for getChildObject
|
|
||||||
* with index-1.
|
|
||||||
* @param aParent
|
|
||||||
* The parent object of the child object to retrieve.
|
|
||||||
* @param aIndex
|
|
||||||
* The index of the child object to retrieve from aParent.
|
|
||||||
* @param aPreviousSibling
|
|
||||||
* The previous sibling of the child object to retrieve.
|
|
||||||
* Supercedes aIndex.
|
|
||||||
* @returns a DOM object | null
|
|
||||||
//
|
|
||||||
getChildObject: function(aParent, aIndex, aPreviousSibling) {},
|
|
||||||
|
|
||||||
//
|
|
||||||
* Renders the HTML representation of the object. Should return an HTML
|
|
||||||
* object which will be displayed to the user.
|
|
||||||
* @param aObject
|
|
||||||
* The object to create the box object for.
|
|
||||||
* @param aIsRoot
|
|
||||||
* Is the object the root object. May not be used in all
|
|
||||||
* implementations.
|
|
||||||
* @returns an object box | null
|
|
||||||
//
|
|
||||||
createObjectBox: function(aObject, aIsRoot) {},
|
|
||||||
|
|
||||||
//
|
|
||||||
* Convenience wrappers for classList API.
|
|
||||||
* @param aObject
|
|
||||||
* DOM node to query/set.
|
|
||||||
* @param aClassName
|
|
||||||
* String containing the class name to query/set.
|
|
||||||
//
|
|
||||||
hasClass: function(aObject, aClassName) {},
|
|
||||||
addClass: function(aObject, aClassName) {},
|
|
||||||
removeClass: function(aObject, aClassName) {}
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a tree based on objects provided by a separate "view" object.
|
|
||||||
*
|
|
||||||
* Construction uses an "inside-out" algorithm, meaning that the view's job is
|
|
||||||
* first to tell us the ancestry of each object, and secondarily its
|
|
||||||
* descendants.
|
|
||||||
*
|
|
||||||
* Constructor
|
|
||||||
* @param aView
|
|
||||||
* The view requiring the InsideOutBox.
|
|
||||||
* @param aBox
|
|
||||||
* The box object containing the InsideOutBox. Required to add/remove
|
|
||||||
* children during box manipulation (toggling opened or closed).
|
|
||||||
*/
|
|
||||||
|
|
||||||
var EXPORTED_SYMBOLS = ["InsideOutBox"];
|
|
||||||
|
|
||||||
const Cu = Components.utils;
|
|
||||||
Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
|
|
||||||
|
|
||||||
function InsideOutBox(aView, aBox)
|
|
||||||
{
|
|
||||||
this.view = aView;
|
|
||||||
this.box = aBox;
|
|
||||||
|
|
||||||
this.rootObject = null;
|
|
||||||
|
|
||||||
this.rootObjectBox = null;
|
|
||||||
this.selectedObjectBox = null;
|
|
||||||
this.highlightedObjectBox = null;
|
|
||||||
this.scrollIntoView = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
InsideOutBox.prototype =
|
|
||||||
{
|
|
||||||
/**
|
|
||||||
* Highlight the given object node in the tree.
|
|
||||||
* @param aObject
|
|
||||||
* the object to highlight.
|
|
||||||
* @returns objectBox
|
|
||||||
*/
|
|
||||||
highlight: function IOBox_highlight(aObject)
|
|
||||||
{
|
|
||||||
let objectBox = this.createObjectBox(aObject);
|
|
||||||
this.highlightObjectBox(objectBox);
|
|
||||||
return objectBox;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Open the given object node in the tree.
|
|
||||||
* @param aObject
|
|
||||||
* The object node to open.
|
|
||||||
* @returns objectBox
|
|
||||||
*/
|
|
||||||
openObject: function IOBox_openObject(aObject)
|
|
||||||
{
|
|
||||||
let object = aObject;
|
|
||||||
let firstChild = this.view.getChildObject(object, 0);
|
|
||||||
if (firstChild)
|
|
||||||
object = firstChild;
|
|
||||||
|
|
||||||
return this.openToObject(object);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Open the tree up to the given object node.
|
|
||||||
* @param aObject
|
|
||||||
* The object in the tree to open to.
|
|
||||||
* @returns objectBox
|
|
||||||
*/
|
|
||||||
openToObject: function IOBox_openToObject(aObject)
|
|
||||||
{
|
|
||||||
let objectBox = this.createObjectBox(aObject);
|
|
||||||
this.openObjectBox(objectBox);
|
|
||||||
return objectBox;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Select the given object node in the tree.
|
|
||||||
* @param aObject
|
|
||||||
* The object node to select.
|
|
||||||
* @param makeBoxVisible
|
|
||||||
* Boolean. Open the object box in the tree?
|
|
||||||
* @param forceOpen
|
|
||||||
* Force the object box open by expanding all elements in the tree?
|
|
||||||
* @param scrollIntoView
|
|
||||||
* Scroll the objectBox into view?
|
|
||||||
* @returns nsIDOMNode|null
|
|
||||||
* A DOM node that represents the "object box", the element that
|
|
||||||
* holds/displays the given aObject representation in the tree. If
|
|
||||||
* the object cannot be selected, if it is a stale object, null is
|
|
||||||
* returned.
|
|
||||||
*/
|
|
||||||
select:
|
|
||||||
function IOBox_select(aObject, makeBoxVisible, forceOpen, scrollIntoView)
|
|
||||||
{
|
|
||||||
let objectBox = this.createObjectBox(aObject);
|
|
||||||
if (!objectBox) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
this.selectObjectBox(objectBox, forceOpen);
|
|
||||||
if (makeBoxVisible) {
|
|
||||||
this.openObjectBox(objectBox);
|
|
||||||
}
|
|
||||||
if (scrollIntoView) {
|
|
||||||
// We want to center the label of the element, not the whole tag
|
|
||||||
// (which includes all of its children, and is vertically huge).
|
|
||||||
LayoutHelpers.scrollIntoViewIfNeeded(objectBox.firstElementChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
return objectBox;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Expands/contracts the given object, depending on its state.
|
|
||||||
* @param aObject
|
|
||||||
* The tree node to expand/contract.
|
|
||||||
*/
|
|
||||||
toggleObject: function IOBox_toggleObject(aObject)
|
|
||||||
{
|
|
||||||
let box = this.createObjectBox(aObject);
|
|
||||||
if (!(this.view.hasClass(box, "open")))
|
|
||||||
this.expandObjectBox(box);
|
|
||||||
else
|
|
||||||
this.contractObjectBox(box);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Expand the given object in the tree.
|
|
||||||
* @param aObject
|
|
||||||
* The tree node to expand.
|
|
||||||
*/
|
|
||||||
expandObject: function IOBox_expandObject(aObject)
|
|
||||||
{
|
|
||||||
let objectBox = this.createObjectBox(aObject);
|
|
||||||
if (objectBox)
|
|
||||||
this.expandObjectBox(objectBox);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Contract the given object in the tree.
|
|
||||||
* @param aObject
|
|
||||||
* The tree node to contract.
|
|
||||||
*/
|
|
||||||
contractObject: function IOBox_contractObject(aObject)
|
|
||||||
{
|
|
||||||
let objectBox = this.createObjectBox(aObject);
|
|
||||||
if (objectBox)
|
|
||||||
this.contractObjectBox(objectBox);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* General method for iterating over an object's ancestors and performing
|
|
||||||
* some function.
|
|
||||||
* @param aObject
|
|
||||||
* The object whose ancestors we wish to iterate over.
|
|
||||||
* @param aCallback
|
|
||||||
* The function to call with the object as argument.
|
|
||||||
*/
|
|
||||||
|
|
||||||
iterateObjectAncestors: function IOBox_iterateObjectAncesors(aObject, aCallback)
|
|
||||||
{
|
|
||||||
let object = aObject;
|
|
||||||
if (!(aCallback && typeof(aCallback) == "function")) {
|
|
||||||
this.view._log("Illegal argument in IOBox.iterateObjectAncestors");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
while ((object = this.getParentObjectBox(object)))
|
|
||||||
aCallback(object);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Highlight the given objectBox in the tree.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The objectBox to highlight.
|
|
||||||
*/
|
|
||||||
highlightObjectBox: function IOBox_highlightObjectBox(aObjectBox)
|
|
||||||
{
|
|
||||||
let self = this;
|
|
||||||
|
|
||||||
if (!aObjectBox)
|
|
||||||
return;
|
|
||||||
|
|
||||||
if (this.highlightedObjectBox) {
|
|
||||||
this.view.removeClass(this.highlightedObjectBox, "highlighted");
|
|
||||||
this.iterateObjectAncestors(this.highlightedObjectBox, function (box) {
|
|
||||||
self.view.removeClass(box, "highlightOpen");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.highlightedObjectBox = aObjectBox;
|
|
||||||
|
|
||||||
this.view.addClass(aObjectBox, "highlighted");
|
|
||||||
this.iterateObjectAncestors(this.highlightedObjectBox, function (box) {
|
|
||||||
self.view.addClass(box, "highlightOpen");
|
|
||||||
});
|
|
||||||
|
|
||||||
aObjectBox.scrollIntoView(true);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Select the given objectBox in the tree, forcing it to be open if necessary.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The objectBox to select.
|
|
||||||
* @param forceOpen
|
|
||||||
* Force the box (subtree) to be open?
|
|
||||||
*/
|
|
||||||
selectObjectBox: function IOBox_selectObjectBox(aObjectBox, forceOpen)
|
|
||||||
{
|
|
||||||
let isSelected = this.selectedObjectBox &&
|
|
||||||
aObjectBox == this.selectedObjectBox;
|
|
||||||
|
|
||||||
// aObjectBox is already selected, return
|
|
||||||
if (isSelected)
|
|
||||||
return;
|
|
||||||
|
|
||||||
if (this.selectedObjectBox)
|
|
||||||
this.view.removeClass(this.selectedObjectBox, "selected");
|
|
||||||
|
|
||||||
this.selectedObjectBox = aObjectBox;
|
|
||||||
|
|
||||||
if (aObjectBox) {
|
|
||||||
this.view.addClass(aObjectBox, "selected");
|
|
||||||
|
|
||||||
// Force it open the first time it is selected
|
|
||||||
if (forceOpen)
|
|
||||||
this.expandObjectBox(aObjectBox, true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the next object box in the tree for navigation purposes.
|
|
||||||
*/
|
|
||||||
nextObjectBox: function IOBox_nextObjectBox(aBoxObject)
|
|
||||||
{
|
|
||||||
let candidate;
|
|
||||||
let boxObject = aBoxObject || this.selectedObjectBox;
|
|
||||||
if (!boxObject)
|
|
||||||
return this.rootObjectBox;
|
|
||||||
|
|
||||||
// If expanded, return the first child.
|
|
||||||
let isOpen = this.view.hasClass(boxObject, "open");
|
|
||||||
let childObjectBox = this.getChildObjectBox(boxObject);
|
|
||||||
if (isOpen && childObjectBox && childObjectBox.firstChild) {
|
|
||||||
candidate = childObjectBox.firstChild;
|
|
||||||
} else {
|
|
||||||
// Otherwise we get the next available sibling.
|
|
||||||
while (boxObject) {
|
|
||||||
if (boxObject.nextSibling) {
|
|
||||||
boxObject = boxObject.nextSibling;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
boxObject = this.getParentObjectBox(boxObject);
|
|
||||||
}
|
|
||||||
candidate = boxObject;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the node is not an element (comments or text nodes), we
|
|
||||||
// jump to the next line.
|
|
||||||
if (candidate &&
|
|
||||||
candidate.repObject.nodeType != candidate.repObject.ELEMENT_NODE) {
|
|
||||||
return this.nextObjectBox(candidate);
|
|
||||||
}
|
|
||||||
|
|
||||||
return candidate;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the next object in the tree for navigation purposes.
|
|
||||||
*/
|
|
||||||
nextObject: function IOBox_nextObject()
|
|
||||||
{
|
|
||||||
let next = this.nextObjectBox();
|
|
||||||
return next ? next.repObject : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the object that is below the selection.
|
|
||||||
*
|
|
||||||
* @param aDistance Number of lines to jump.
|
|
||||||
*/
|
|
||||||
farNextObject: function IOBox_farPreviousProject(aDistance)
|
|
||||||
{
|
|
||||||
let boxObject = this.selectedObjectBox;
|
|
||||||
while (aDistance-- > 0) {
|
|
||||||
let newBoxObject = this.nextObjectBox(boxObject);
|
|
||||||
if (!newBoxObject) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
boxObject = newBoxObject;
|
|
||||||
}
|
|
||||||
return boxObject ? boxObject.repObject : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the last visible child box of an object box.
|
|
||||||
*/
|
|
||||||
lastVisible: function IOBox_lastVisibleChild(aNode)
|
|
||||||
{
|
|
||||||
if (!this.view.hasClass(aNode, "open"))
|
|
||||||
return aNode;
|
|
||||||
|
|
||||||
let childBox = this.getChildObjectBox(aNode);
|
|
||||||
if (!childBox || !childBox.lastChild)
|
|
||||||
return aNode;
|
|
||||||
|
|
||||||
return this.lastVisible(childBox.lastChild);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the previous object box in the tree for navigation purposes.
|
|
||||||
*/
|
|
||||||
previousObjectBox: function IOBox_previousObjectBox(aBoxObject)
|
|
||||||
{
|
|
||||||
let boxObject = aBoxObject || this.selectedObjectBox;
|
|
||||||
if (!boxObject)
|
|
||||||
return this.rootObjectBox;
|
|
||||||
|
|
||||||
let candidate;
|
|
||||||
let sibling = boxObject.previousSibling;
|
|
||||||
if (sibling) {
|
|
||||||
candidate = this.lastVisible(sibling);
|
|
||||||
} else {
|
|
||||||
candidate = this.getParentObjectBox(boxObject);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the node is not an element (comments or text nodes), we
|
|
||||||
// jump to the previous line.
|
|
||||||
if (candidate &&
|
|
||||||
candidate.repObject.nodeType != candidate.repObject.ELEMENT_NODE) {
|
|
||||||
return this.previousObjectBox(candidate);
|
|
||||||
}
|
|
||||||
|
|
||||||
return candidate;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the previous object in the tree for navigation purposes.
|
|
||||||
*/
|
|
||||||
previousObject: function IOBox_previousObject()
|
|
||||||
{
|
|
||||||
let boxObject = this.previousObjectBox();
|
|
||||||
return boxObject ? boxObject.repObject : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the object that is above the selection.
|
|
||||||
*
|
|
||||||
* @param aDistance Number of lines to jump.
|
|
||||||
*/
|
|
||||||
farPreviousObject: function IOBox_farPreviousProject(aDistance)
|
|
||||||
{
|
|
||||||
let boxObject = this.selectedObjectBox;
|
|
||||||
while (aDistance-- > 0) {
|
|
||||||
let newBoxObject = this.previousObjectBox(boxObject);
|
|
||||||
if (!newBoxObject) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
boxObject = newBoxObject;
|
|
||||||
if (boxObject === this.rootObjectBox)
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return boxObject ? boxObject.repObject : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Open the ancestors of the given object box.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The object box to open.
|
|
||||||
*/
|
|
||||||
openObjectBox: function IOBox_openObjectBox(aObjectBox)
|
|
||||||
{
|
|
||||||
if (!aObjectBox)
|
|
||||||
return;
|
|
||||||
|
|
||||||
let self = this;
|
|
||||||
this.iterateObjectAncestors(aObjectBox, function (box) {
|
|
||||||
self.view.addClass(box, "open");
|
|
||||||
let labelBox = box.querySelector(".nodeLabelBox");
|
|
||||||
if (labelBox)
|
|
||||||
labelBox.setAttribute("aria-expanded", "true");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Expand the given object box.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The object box to expand.
|
|
||||||
*/
|
|
||||||
expandObjectBox: function IOBox_expandObjectBox(aObjectBox)
|
|
||||||
{
|
|
||||||
let nodeChildBox = this.getChildObjectBox(aObjectBox);
|
|
||||||
|
|
||||||
// no children means nothing to expand, return
|
|
||||||
if (!nodeChildBox)
|
|
||||||
return;
|
|
||||||
|
|
||||||
if (!aObjectBox.populated) {
|
|
||||||
let firstChild = this.view.getChildObject(aObjectBox.repObject, 0);
|
|
||||||
this.populateChildBox(firstChild, nodeChildBox);
|
|
||||||
}
|
|
||||||
let labelBox = aObjectBox.querySelector(".nodeLabelBox");
|
|
||||||
if (labelBox)
|
|
||||||
labelBox.setAttribute("aria-expanded", "true");
|
|
||||||
this.view.addClass(aObjectBox, "open");
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Contract the given object box.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The object box to contract.
|
|
||||||
*/
|
|
||||||
contractObjectBox: function IOBox_contractObjectBox(aObjectBox)
|
|
||||||
{
|
|
||||||
this.view.removeClass(aObjectBox, "open");
|
|
||||||
let nodeLabel = aObjectBox.querySelector(".nodeLabel");
|
|
||||||
let labelBox = nodeLabel.querySelector(".nodeLabelBox");
|
|
||||||
if (labelBox)
|
|
||||||
labelBox.setAttribute("aria-expanded", "false");
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggle the given object box, forcing open if requested.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The object box to toggle.
|
|
||||||
* @param forceOpen
|
|
||||||
* Force the objectbox open?
|
|
||||||
*/
|
|
||||||
toggleObjectBox: function IOBox_toggleObjectBox(aObjectBox, forceOpen)
|
|
||||||
{
|
|
||||||
let isOpen = this.view.hasClass(aObjectBox, "open");
|
|
||||||
|
|
||||||
if (!forceOpen && isOpen)
|
|
||||||
this.contractObjectBox(aObjectBox);
|
|
||||||
else if (!isOpen)
|
|
||||||
this.expandObjectBox(aObjectBox);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates all of the boxes for an object, its ancestors, and siblings.
|
|
||||||
* @param aObject
|
|
||||||
* The tree node to create the object boxes for.
|
|
||||||
* @returns anObjectBox or null
|
|
||||||
*/
|
|
||||||
createObjectBox: function IOBox_createObjectBox(aObject)
|
|
||||||
{
|
|
||||||
if (!aObject)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
this.rootObject = this.getRootNode(aObject) || aObject;
|
|
||||||
|
|
||||||
// Get or create all of the boxes for the target and its ancestors
|
|
||||||
let objectBox = this.createObjectBoxes(aObject, this.rootObject);
|
|
||||||
|
|
||||||
if (!objectBox)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
if (aObject == this.rootObject)
|
|
||||||
return objectBox;
|
|
||||||
|
|
||||||
return this.populateChildBox(aObject, objectBox.parentNode);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates all of the boxes for an object, its ancestors, and siblings up to
|
|
||||||
* a root.
|
|
||||||
* @param aObject
|
|
||||||
* The tree's object node to create the object boxes for.
|
|
||||||
* @param aRootObject
|
|
||||||
* The root object at which to stop building object boxes.
|
|
||||||
* @returns an object box or null
|
|
||||||
*/
|
|
||||||
createObjectBoxes: function IOBox_createObjectBoxes(aObject, aRootObject)
|
|
||||||
{
|
|
||||||
if (!aObject)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
if (aObject == aRootObject) {
|
|
||||||
if (!this.rootObjectBox || this.rootObjectBox.repObject != aRootObject) {
|
|
||||||
if (this.rootObjectBox) {
|
|
||||||
try {
|
|
||||||
this.box.removeChild(this.rootObjectBox);
|
|
||||||
} catch (exc) {
|
|
||||||
this.view._log("this.box.removeChild(this.rootObjectBox) FAILS " +
|
|
||||||
this.box + " must not contain " + this.rootObjectBox);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.highlightedObjectBox = null;
|
|
||||||
this.selectedObjectBox = null;
|
|
||||||
this.rootObjectBox = this.view.createObjectBox(aObject, true);
|
|
||||||
this.box.appendChild(this.rootObjectBox);
|
|
||||||
}
|
|
||||||
return this.rootObjectBox;
|
|
||||||
}
|
|
||||||
|
|
||||||
let parentNode = this.view.getParentObject(aObject);
|
|
||||||
let parentObjectBox = this.createObjectBoxes(parentNode, aRootObject);
|
|
||||||
|
|
||||||
if (!parentObjectBox)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
let parentChildBox = this.getChildObjectBox(parentObjectBox);
|
|
||||||
|
|
||||||
if (!parentChildBox)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
let childObjectBox = this.findChildObjectBox(parentChildBox, aObject);
|
|
||||||
|
|
||||||
return childObjectBox ? childObjectBox
|
|
||||||
: this.populateChildBox(aObject, parentChildBox);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Locate the object box for a given object node.
|
|
||||||
* @param aObject
|
|
||||||
* The given object node in the tree.
|
|
||||||
* @returns an object box or null.
|
|
||||||
*/
|
|
||||||
findObjectBox: function IOBox_findObjectBox(aObject)
|
|
||||||
{
|
|
||||||
if (!aObject)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
if (aObject == this.rootObject)
|
|
||||||
return this.rootObjectBox;
|
|
||||||
|
|
||||||
let parentNode = this.view.getParentObject(aObject);
|
|
||||||
let parentObjectBox = this.findObjectBox(parentNode);
|
|
||||||
if (!parentObjectBox)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
let parentChildBox = this.getChildObjectBox(parentObjectBox);
|
|
||||||
if (!parentChildBox)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
return this.findChildObjectBox(parentChildBox, aObject);
|
|
||||||
},
|
|
||||||
|
|
||||||
getAncestorByClass: function IOBox_getAncestorByClass(node, className)
|
|
||||||
{
|
|
||||||
for (let parent = node; parent; parent = parent.parentNode) {
|
|
||||||
if (this.view.hasClass(parent, className))
|
|
||||||
return parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* We want all children of the parent of repObject.
|
|
||||||
*/
|
|
||||||
populateChildBox: function IOBox_populateChildBox(repObject, nodeChildBox)
|
|
||||||
{
|
|
||||||
if (!repObject)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
let parentObjectBox = this.getAncestorByClass(nodeChildBox, "nodeBox");
|
|
||||||
|
|
||||||
if (parentObjectBox.populated)
|
|
||||||
return this.findChildObjectBox(nodeChildBox, repObject);
|
|
||||||
|
|
||||||
let lastSiblingBox = this.getChildObjectBox(nodeChildBox);
|
|
||||||
let siblingBox = nodeChildBox.firstChild;
|
|
||||||
let targetBox = null;
|
|
||||||
let view = this.view;
|
|
||||||
let targetSibling = null;
|
|
||||||
let parentNode = view.getParentObject(repObject);
|
|
||||||
|
|
||||||
for (let i = 0; 1; ++i) {
|
|
||||||
targetSibling = view.getChildObject(parentNode, i, targetSibling);
|
|
||||||
if (!targetSibling)
|
|
||||||
break;
|
|
||||||
|
|
||||||
// Check if we need to start appending, or continue to insert before
|
|
||||||
if (lastSiblingBox && lastSiblingBox.repObject == targetSibling)
|
|
||||||
lastSiblingBox = null;
|
|
||||||
|
|
||||||
if (!siblingBox || siblingBox.repObject != targetSibling) {
|
|
||||||
let newBox = view.createObjectBox(targetSibling);
|
|
||||||
if (newBox) {
|
|
||||||
if (lastSiblingBox)
|
|
||||||
nodeChildBox.insertBefore(newBox, lastSiblingBox);
|
|
||||||
else
|
|
||||||
nodeChildBox.appendChild(newBox);
|
|
||||||
}
|
|
||||||
|
|
||||||
siblingBox = newBox;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (targetSibling == repObject)
|
|
||||||
targetBox = siblingBox;
|
|
||||||
|
|
||||||
if (siblingBox && siblingBox.repObject == targetSibling)
|
|
||||||
siblingBox = siblingBox.nextSibling;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (targetBox)
|
|
||||||
parentObjectBox.populated = true;
|
|
||||||
|
|
||||||
return targetBox;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the parent object box of a given object box.
|
|
||||||
* @params aObjectBox
|
|
||||||
* The object box of the parent.
|
|
||||||
* @returns an object box or null
|
|
||||||
*/
|
|
||||||
getParentObjectBox: function IOBox_getParentObjectBox(aObjectBox)
|
|
||||||
{
|
|
||||||
let parent = aObjectBox.parentNode ? aObjectBox.parentNode.parentNode : null;
|
|
||||||
return parent && parent.repObject ? parent : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the child object box of a given object box.
|
|
||||||
* @param aObjectBox
|
|
||||||
* The object box whose child you want.
|
|
||||||
* @returns an object box or null
|
|
||||||
*/
|
|
||||||
getChildObjectBox: function IOBox_getChildObjectBox(aObjectBox)
|
|
||||||
{
|
|
||||||
return aObjectBox.querySelector(".nodeChildBox");
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Find the child object box for a given repObject within the subtree
|
|
||||||
* rooted at aParentNodeBox.
|
|
||||||
* @param aParentNodeBox
|
|
||||||
* root of the subtree in which to search for repObject.
|
|
||||||
* @param aRepObject
|
|
||||||
* The object you wish to locate in the subtree.
|
|
||||||
* @returns an object box or null
|
|
||||||
*/
|
|
||||||
findChildObjectBox: function IOBox_findChildObjectBox(aParentNodeBox, aRepObject)
|
|
||||||
{
|
|
||||||
let childBox = aParentNodeBox.firstChild;
|
|
||||||
while (childBox) {
|
|
||||||
if (childBox.repObject == aRepObject)
|
|
||||||
return childBox;
|
|
||||||
childBox = childBox.nextSibling;
|
|
||||||
}
|
|
||||||
return null; // not found
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Determines if the given node is an ancestor of the current root.
|
|
||||||
* @param aNode
|
|
||||||
* The node to look for within the tree.
|
|
||||||
* @returns boolean
|
|
||||||
*/
|
|
||||||
isInExistingRoot: function IOBox_isInExistingRoot(aNode)
|
|
||||||
{
|
|
||||||
let parentNode = aNode;
|
|
||||||
while (parentNode && parentNode != this.rootObject) {
|
|
||||||
parentNode = this.view.getParentObject(parentNode);
|
|
||||||
}
|
|
||||||
return parentNode == this.rootObject;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the root node of a given node.
|
|
||||||
* @param aNode
|
|
||||||
* The node whose root you wish to retrieve.
|
|
||||||
* @returns a root node or null
|
|
||||||
*/
|
|
||||||
getRootNode: function IOBox_getRootNode(aNode)
|
|
||||||
{
|
|
||||||
let node = aNode;
|
|
||||||
let tmpNode;
|
|
||||||
while ((tmpNode = this.view.getParentObject(node)))
|
|
||||||
node = tmpNode;
|
|
||||||
|
|
||||||
return node;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clean up our mess.
|
|
||||||
*/
|
|
||||||
destroy: function IOBox_destroy()
|
|
||||||
{
|
|
||||||
delete this.view;
|
|
||||||
delete this.box;
|
|
||||||
delete this.rootObject;
|
|
||||||
delete this.rootObjectBox;
|
|
||||||
delete this.selectedObjectBox;
|
|
||||||
delete this.highlightedObjectBox;
|
|
||||||
delete this.scrollIntoView;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -11,9 +11,6 @@ VPATH = @srcdir@
|
|||||||
include $(DEPTH)/config/autoconf.mk
|
include $(DEPTH)/config/autoconf.mk
|
||||||
|
|
||||||
EXTRA_JS_MODULES = \
|
EXTRA_JS_MODULES = \
|
||||||
domplate.jsm \
|
|
||||||
InsideOutBox.jsm \
|
|
||||||
TreePanel.jsm \
|
|
||||||
highlighter.jsm \
|
highlighter.jsm \
|
||||||
$(NULL)
|
$(NULL)
|
||||||
|
|
||||||
|
|||||||
@ -1,844 +0,0 @@
|
|||||||
/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
||||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
||||||
|
|
||||||
const Cu = Components.utils;
|
|
||||||
const Ci = Components.interfaces;
|
|
||||||
|
|
||||||
Cu.import("resource:///modules/domplate.jsm");
|
|
||||||
Cu.import("resource:///modules/InsideOutBox.jsm");
|
|
||||||
Cu.import("resource://gre/modules/Services.jsm");
|
|
||||||
Cu.import("resource:///modules/inspector.jsm");
|
|
||||||
Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
|
|
||||||
|
|
||||||
var EXPORTED_SYMBOLS = ["TreePanel", "DOMHelpers"];
|
|
||||||
|
|
||||||
const INSPECTOR_URI = "chrome://browser/content/inspector.html";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TreePanel
|
|
||||||
* A container for the Inspector's HTML Tree Panel widget constructor function.
|
|
||||||
* @param aContext nsIDOMWindow (xulwindow)
|
|
||||||
* @param aIUI global InspectorUI object
|
|
||||||
*/
|
|
||||||
function TreePanel(aContext, aIUI) {
|
|
||||||
this._init(aContext, aIUI);
|
|
||||||
};
|
|
||||||
|
|
||||||
TreePanel.prototype = {
|
|
||||||
showTextNodesWithWhitespace: false,
|
|
||||||
id: "treepanel", // DO NOT LOCALIZE
|
|
||||||
_open: false,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The tree panel container element.
|
|
||||||
* @returns xul:panel|xul:vbox|null
|
|
||||||
* xul:panel is returned when the tree panel is not docked, or
|
|
||||||
* xul:vbox when when the tree panel is docked.
|
|
||||||
* null is returned when no container is available.
|
|
||||||
*/
|
|
||||||
get container()
|
|
||||||
{
|
|
||||||
return this.document.getElementById("inspector-tree-box");
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Main TreePanel boot-strapping method. Initialize the TreePanel with the
|
|
||||||
* originating context and the InspectorUI global.
|
|
||||||
* @param aContext nsIDOMWindow (xulwindow)
|
|
||||||
* @param aIUI global InspectorUI object
|
|
||||||
*/
|
|
||||||
_init: function TP__init(aContext, aIUI)
|
|
||||||
{
|
|
||||||
this.IUI = aIUI;
|
|
||||||
this.window = aContext;
|
|
||||||
this.document = this.window.document;
|
|
||||||
this.button =
|
|
||||||
this.IUI.chromeDoc.getElementById("inspector-treepanel-toolbutton");
|
|
||||||
|
|
||||||
domplateUtils.setDOM(this.window);
|
|
||||||
|
|
||||||
this.DOMHelpers = new DOMHelpers(this.window);
|
|
||||||
|
|
||||||
let isOpen = this.isOpen.bind(this);
|
|
||||||
|
|
||||||
this.editingEvents = {};
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialization function for the TreePanel.
|
|
||||||
*/
|
|
||||||
initializeIFrame: function TP_initializeIFrame()
|
|
||||||
{
|
|
||||||
if (!this.initializingTreePanel || this.treeLoaded) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.treeBrowserDocument = this.treeIFrame.contentDocument;
|
|
||||||
this.treePanelDiv = this.treeBrowserDocument.createElement("div");
|
|
||||||
this.treeBrowserDocument.body.appendChild(this.treePanelDiv);
|
|
||||||
this.treePanelDiv.ownerPanel = this;
|
|
||||||
this.ioBox = new InsideOutBox(this, this.treePanelDiv);
|
|
||||||
this.ioBox.createObjectBox(this.IUI.win.document.documentElement);
|
|
||||||
this.treeLoaded = true;
|
|
||||||
this._boundTreeKeyPress = this.onTreeKeyPress.bind(this);
|
|
||||||
this.treeIFrame.addEventListener("keypress", this._boundTreeKeyPress.bind(this), true);
|
|
||||||
this.treeIFrame.addEventListener("click", this.onTreeClick.bind(this), false);
|
|
||||||
this.treeIFrame.addEventListener("dblclick", this.onTreeDblClick.bind(this), false);
|
|
||||||
this.treeIFrame.focus();
|
|
||||||
delete this.initializingTreePanel;
|
|
||||||
Services.obs.notifyObservers(null,
|
|
||||||
this.IUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY, null);
|
|
||||||
if (this.pendingSelection) {
|
|
||||||
this.select(this.pendingSelection.node, this.pendingSelection.scroll);
|
|
||||||
delete this.pendingSelection;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Open the inspector's tree panel and initialize it.
|
|
||||||
*/
|
|
||||||
open: function TP_open()
|
|
||||||
{
|
|
||||||
if (this._open) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this._open = true;
|
|
||||||
|
|
||||||
this.button.setAttribute("checked", true);
|
|
||||||
this.initializingTreePanel = true;
|
|
||||||
|
|
||||||
this.treeIFrame = this.document.getElementById("inspector-tree-iframe");
|
|
||||||
if (!this.treeIFrame) {
|
|
||||||
this.treeIFrame = this.document.createElement("iframe");
|
|
||||||
this.treeIFrame.setAttribute("id", "inspector-tree-iframe");
|
|
||||||
this.treeIFrame.flex = 1;
|
|
||||||
this.treeIFrame.setAttribute("type", "content");
|
|
||||||
this.treeIFrame.setAttribute("context", "inspector-node-popup");
|
|
||||||
}
|
|
||||||
|
|
||||||
let treeBox = null;
|
|
||||||
treeBox = this.document.createElement("vbox");
|
|
||||||
treeBox.id = "inspector-tree-box";
|
|
||||||
treeBox.state = "open";
|
|
||||||
try {
|
|
||||||
treeBox.height =
|
|
||||||
Services.prefs.getIntPref("devtools.inspector.htmlHeight");
|
|
||||||
} catch(e) {
|
|
||||||
treeBox.height = 112;
|
|
||||||
}
|
|
||||||
|
|
||||||
treeBox.minHeight = 64;
|
|
||||||
|
|
||||||
this.splitter = this.document.createElement("splitter");
|
|
||||||
this.splitter.id = "inspector-tree-splitter";
|
|
||||||
this.splitter.className = "devtools-horizontal-splitter";
|
|
||||||
|
|
||||||
let container = this.document.getElementById("appcontent");
|
|
||||||
container.appendChild(this.splitter);
|
|
||||||
container.appendChild(treeBox);
|
|
||||||
|
|
||||||
treeBox.appendChild(this.treeIFrame);
|
|
||||||
|
|
||||||
this._boundLoadedInitializeTreePanel = function loadedInitializeTreePanel()
|
|
||||||
{
|
|
||||||
this.treeIFrame.removeEventListener("load",
|
|
||||||
this._boundLoadedInitializeTreePanel, true);
|
|
||||||
delete this._boundLoadedInitializeTreePanel;
|
|
||||||
this.initializeIFrame();
|
|
||||||
}.bind(this);
|
|
||||||
|
|
||||||
this.treeIFrame.addEventListener("load",
|
|
||||||
this._boundLoadedInitializeTreePanel, true);
|
|
||||||
|
|
||||||
let src = this.treeIFrame.getAttribute("src");
|
|
||||||
if (src != INSPECTOR_URI) {
|
|
||||||
this.treeIFrame.setAttribute("src", INSPECTOR_URI);
|
|
||||||
} else {
|
|
||||||
this.treeIFrame.contentWindow.location.reload();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Close the TreePanel.
|
|
||||||
*/
|
|
||||||
close: function TP_close()
|
|
||||||
{
|
|
||||||
this._open = false;
|
|
||||||
|
|
||||||
// Stop caring about the tree iframe load if it's in progress.
|
|
||||||
if (this._boundLoadedInitializeTreePanel) {
|
|
||||||
this.treeIFrame.removeEventListener("load",
|
|
||||||
this._boundLoadedInitializeTreePanel, true);
|
|
||||||
delete this._boundLoadedInitializeTreePanel;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.button.removeAttribute("checked");
|
|
||||||
let treeBox = this.container;
|
|
||||||
Services.prefs.setIntPref("devtools.inspector.htmlHeight", treeBox.height);
|
|
||||||
let treeBoxParent = treeBox.parentNode;
|
|
||||||
treeBoxParent.removeChild(this.splitter);
|
|
||||||
treeBoxParent.removeChild(treeBox);
|
|
||||||
|
|
||||||
if (this.treePanelDiv) {
|
|
||||||
this.treePanelDiv.ownerPanel = null;
|
|
||||||
let parent = this.treePanelDiv.parentNode;
|
|
||||||
parent.removeChild(this.treePanelDiv);
|
|
||||||
this.treeIFrame.removeEventListener("keypress", this._boundTreeKeyPress, true);
|
|
||||||
delete this.treePanelDiv;
|
|
||||||
delete this.treeBrowserDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.ioBox) {
|
|
||||||
this.ioBox.destroy();
|
|
||||||
delete this.ioBox;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.treeLoaded = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Is the TreePanel open?
|
|
||||||
* @returns boolean
|
|
||||||
*/
|
|
||||||
isOpen: function TP_isOpen()
|
|
||||||
{
|
|
||||||
return this._open;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggle the TreePanel.
|
|
||||||
*/
|
|
||||||
toggle: function TP_toggle()
|
|
||||||
{
|
|
||||||
this.isOpen() ? this.close() : this.open();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Create the ObjectBox for the given object.
|
|
||||||
* @param object nsIDOMNode
|
|
||||||
* @param isRoot boolean - Is this the root object?
|
|
||||||
* @returns InsideOutBox
|
|
||||||
*/
|
|
||||||
createObjectBox: function TP_createObjectBox(object, isRoot)
|
|
||||||
{
|
|
||||||
let tag = domplateUtils.getNodeTag(object);
|
|
||||||
if (tag)
|
|
||||||
return tag.replace({object: object}, this.treeBrowserDocument);
|
|
||||||
},
|
|
||||||
|
|
||||||
getParentObject: function TP_getParentObject(node)
|
|
||||||
{
|
|
||||||
return this.DOMHelpers.getParentObject(node);
|
|
||||||
},
|
|
||||||
|
|
||||||
getChildObject: function TP_getChildObject(node, index, previousSibling)
|
|
||||||
{
|
|
||||||
return this.DOMHelpers.getChildObject(node, index, previousSibling,
|
|
||||||
this.showTextNodesWithWhitespace);
|
|
||||||
},
|
|
||||||
|
|
||||||
getFirstChild: function TP_getFirstChild(node)
|
|
||||||
{
|
|
||||||
return this.DOMHelpers.getFirstChild(node);
|
|
||||||
},
|
|
||||||
|
|
||||||
getNextSibling: function TP_getNextSibling(node)
|
|
||||||
{
|
|
||||||
return this.DOMHelpers.getNextSibling(node);
|
|
||||||
},
|
|
||||||
|
|
||||||
/////////////////////////////////////////////////////////////////////
|
|
||||||
// Event Handling
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle click events in the html tree panel.
|
|
||||||
* @param aEvent
|
|
||||||
* The mouse event.
|
|
||||||
*/
|
|
||||||
onTreeClick: function TP_onTreeClick(aEvent)
|
|
||||||
{
|
|
||||||
let node;
|
|
||||||
let target = aEvent.target;
|
|
||||||
let hitTwisty = false;
|
|
||||||
if (this.hasClass(target, "twisty")) {
|
|
||||||
node = this.getRepObject(aEvent.target.nextSibling);
|
|
||||||
hitTwisty = true;
|
|
||||||
} else {
|
|
||||||
node = this.getRepObject(aEvent.target);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node) {
|
|
||||||
if (hitTwisty) {
|
|
||||||
this.ioBox.toggleObject(node);
|
|
||||||
} else {
|
|
||||||
if (this.IUI.inspecting) {
|
|
||||||
this.IUI.stopInspecting(true);
|
|
||||||
} else {
|
|
||||||
this.navigate(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle double-click events in the html tree panel.
|
|
||||||
* Double-clicking an attribute name or value allows it to be edited.
|
|
||||||
* @param aEvent
|
|
||||||
* The mouse event.
|
|
||||||
*/
|
|
||||||
onTreeDblClick: function TP_onTreeDblClick(aEvent)
|
|
||||||
{
|
|
||||||
// if already editing an attribute value, double-clicking elsewhere
|
|
||||||
// in the tree is the same as a click, which dismisses the editor
|
|
||||||
if (this.editingContext)
|
|
||||||
this.closeEditor();
|
|
||||||
|
|
||||||
let target = aEvent.target;
|
|
||||||
|
|
||||||
if (!this.hasClass(target, "editable")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let repObj = this.getRepObject(target);
|
|
||||||
|
|
||||||
if (this.hasClass(target, "nodeValue")) {
|
|
||||||
let attrName = target.getAttribute("data-attributeName");
|
|
||||||
let attrVal = target.innerHTML;
|
|
||||||
|
|
||||||
this.editAttribute(target, repObj, attrName, attrVal);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.hasClass(target, "nodeName")) {
|
|
||||||
let attrName = target.innerHTML;
|
|
||||||
let attrValNode = target.nextSibling.nextSibling; // skip 2 (=)
|
|
||||||
|
|
||||||
if (attrValNode)
|
|
||||||
this.editAttribute(target, repObj, attrName, attrValNode.innerHTML);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
navigate: function TP_navigate(node)
|
|
||||||
{
|
|
||||||
if (!node)
|
|
||||||
return;
|
|
||||||
this.ioBox.select(node, false, false, true);
|
|
||||||
|
|
||||||
if (this.IUI.highlighter.isNodeHighlightable(node)) {
|
|
||||||
this.IUI.select(node, true, false, "treepanel");
|
|
||||||
this.IUI.highlighter.highlight(node);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onTreeKeyPress: function TP_onTreeKeyPress(aEvent)
|
|
||||||
{
|
|
||||||
let handled = true;
|
|
||||||
switch(aEvent.keyCode) {
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_LEFT:
|
|
||||||
this.ioBox.contractObjectBox(this.ioBox.selectedObjectBox);
|
|
||||||
break;
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_RIGHT:
|
|
||||||
this.ioBox.expandObjectBox(this.ioBox.selectedObjectBox);
|
|
||||||
break;
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_UP:
|
|
||||||
this.navigate(this.ioBox.previousObject());
|
|
||||||
break;
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_DOWN:
|
|
||||||
this.navigate(this.ioBox.nextObject());
|
|
||||||
break;
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP:
|
|
||||||
this.navigate(this.ioBox.farPreviousObject(10));
|
|
||||||
break;
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN:
|
|
||||||
this.navigate(this.ioBox.farNextObject(10));
|
|
||||||
break;
|
|
||||||
case Ci.nsIDOMKeyEvent.DOM_VK_HOME:
|
|
||||||
this.navigate(this.ioBox.rootObject);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
handled = false;
|
|
||||||
}
|
|
||||||
if (handled) {
|
|
||||||
aEvent.stopPropagation();
|
|
||||||
aEvent.preventDefault();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Starts the editor for an attribute name or value.
|
|
||||||
* @param aAttrObj
|
|
||||||
* The DOM object representing the attribute name or value in the HTML
|
|
||||||
* Tree.
|
|
||||||
* @param aRepObj
|
|
||||||
* The original DOM (target) object being inspected/edited
|
|
||||||
* @param aAttrName
|
|
||||||
* The name of the attribute being edited
|
|
||||||
* @param aAttrVal
|
|
||||||
* The current value of the attribute being edited
|
|
||||||
*/
|
|
||||||
editAttribute:
|
|
||||||
function TP_editAttribute(aAttrObj, aRepObj, aAttrName, aAttrVal)
|
|
||||||
{
|
|
||||||
let editor = this.treeBrowserDocument.getElementById("attribute-editor");
|
|
||||||
let editorInput =
|
|
||||||
this.treeBrowserDocument.getElementById("attribute-editor-input");
|
|
||||||
let attrDims = aAttrObj.getBoundingClientRect();
|
|
||||||
// figure out actual viewable viewport dimensions (sans scrollbars)
|
|
||||||
let viewportWidth = this.treeBrowserDocument.documentElement.clientWidth;
|
|
||||||
let viewportHeight = this.treeBrowserDocument.documentElement.clientHeight;
|
|
||||||
|
|
||||||
// saves the editing context for use when the editor is saved/closed
|
|
||||||
this.editingContext = {
|
|
||||||
attrObj: aAttrObj,
|
|
||||||
repObj: aRepObj,
|
|
||||||
attrName: aAttrName,
|
|
||||||
attrValue: aAttrVal
|
|
||||||
};
|
|
||||||
|
|
||||||
// highlight attribute-value node in tree while editing
|
|
||||||
this.addClass(aAttrObj, "editingAttributeValue");
|
|
||||||
|
|
||||||
// show the editor
|
|
||||||
this.addClass(editor, "editing");
|
|
||||||
|
|
||||||
// offset the editor below the attribute-value node being edited
|
|
||||||
let editorVerticalOffset = 2;
|
|
||||||
|
|
||||||
// keep the editor comfortably within the bounds of the viewport
|
|
||||||
let editorViewportBoundary = 5;
|
|
||||||
|
|
||||||
// outer editor is sized based on the <input> box inside it
|
|
||||||
editorInput.style.width = Math.min(attrDims.width, viewportWidth -
|
|
||||||
editorViewportBoundary) + "px";
|
|
||||||
editorInput.style.height = Math.min(attrDims.height, viewportHeight -
|
|
||||||
editorViewportBoundary) + "px";
|
|
||||||
let editorDims = editor.getBoundingClientRect();
|
|
||||||
|
|
||||||
// calculate position for the editor according to the attribute node
|
|
||||||
let editorLeft = attrDims.left + this.treeIFrame.contentWindow.scrollX -
|
|
||||||
// center the editor against the attribute value
|
|
||||||
((editorDims.width - attrDims.width) / 2);
|
|
||||||
let editorTop = attrDims.top + this.treeIFrame.contentWindow.scrollY +
|
|
||||||
attrDims.height + editorVerticalOffset;
|
|
||||||
|
|
||||||
// but, make sure the editor stays within the visible viewport
|
|
||||||
editorLeft = Math.max(0, Math.min(
|
|
||||||
(this.treeIFrame.contentWindow.scrollX +
|
|
||||||
viewportWidth - editorDims.width),
|
|
||||||
editorLeft)
|
|
||||||
);
|
|
||||||
editorTop = Math.max(0, Math.min(
|
|
||||||
(this.treeIFrame.contentWindow.scrollY +
|
|
||||||
viewportHeight - editorDims.height),
|
|
||||||
editorTop)
|
|
||||||
);
|
|
||||||
|
|
||||||
// position the editor
|
|
||||||
editor.style.left = editorLeft + "px";
|
|
||||||
editor.style.top = editorTop + "px";
|
|
||||||
|
|
||||||
// set and select the text
|
|
||||||
if (this.hasClass(aAttrObj, "nodeValue")) {
|
|
||||||
editorInput.value = aAttrVal;
|
|
||||||
editorInput.select();
|
|
||||||
} else {
|
|
||||||
editorInput.value = aAttrName;
|
|
||||||
editorInput.select();
|
|
||||||
}
|
|
||||||
|
|
||||||
// listen for editor specific events
|
|
||||||
this.bindEditorEvent(editor, "click", function(aEvent) {
|
|
||||||
aEvent.stopPropagation();
|
|
||||||
});
|
|
||||||
this.bindEditorEvent(editor, "dblclick", function(aEvent) {
|
|
||||||
aEvent.stopPropagation();
|
|
||||||
});
|
|
||||||
this.bindEditorEvent(editor, "keypress",
|
|
||||||
this.handleEditorKeypress.bind(this));
|
|
||||||
|
|
||||||
// event notification
|
|
||||||
Services.obs.notifyObservers(null, this.IUI.INSPECTOR_NOTIFICATIONS.EDITOR_OPENED,
|
|
||||||
null);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle binding an event handler for the editor.
|
|
||||||
* (saves the callback for easier unbinding later)
|
|
||||||
* @param aEditor
|
|
||||||
* The DOM object for the editor
|
|
||||||
* @param aEventName
|
|
||||||
* The name of the event to listen for
|
|
||||||
* @param aEventCallback
|
|
||||||
* The callback to bind to the event (and also to save for later
|
|
||||||
* unbinding)
|
|
||||||
*/
|
|
||||||
bindEditorEvent:
|
|
||||||
function TP_bindEditorEvent(aEditor, aEventName, aEventCallback)
|
|
||||||
{
|
|
||||||
this.editingEvents[aEventName] = aEventCallback;
|
|
||||||
aEditor.addEventListener(aEventName, aEventCallback, false);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle unbinding an event handler from the editor.
|
|
||||||
* (unbinds the previously bound and saved callback)
|
|
||||||
* @param aEditor
|
|
||||||
* The DOM object for the editor
|
|
||||||
* @param aEventName
|
|
||||||
* The name of the event being listened for
|
|
||||||
*/
|
|
||||||
unbindEditorEvent: function TP_unbindEditorEvent(aEditor, aEventName)
|
|
||||||
{
|
|
||||||
aEditor.removeEventListener(aEventName, this.editingEvents[aEventName],
|
|
||||||
false);
|
|
||||||
this.editingEvents[aEventName] = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle keypress events in the editor.
|
|
||||||
* @param aEvent
|
|
||||||
* The keyboard event.
|
|
||||||
*/
|
|
||||||
handleEditorKeypress: function TP_handleEditorKeypress(aEvent)
|
|
||||||
{
|
|
||||||
if (aEvent.which == this.window.KeyEvent.DOM_VK_RETURN) {
|
|
||||||
this.saveEditor();
|
|
||||||
aEvent.preventDefault();
|
|
||||||
aEvent.stopPropagation();
|
|
||||||
} else if (aEvent.keyCode == this.window.KeyEvent.DOM_VK_ESCAPE) {
|
|
||||||
this.closeEditor();
|
|
||||||
aEvent.preventDefault();
|
|
||||||
aEvent.stopPropagation();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Close the editor and cleanup.
|
|
||||||
*/
|
|
||||||
closeEditor: function TP_closeEditor()
|
|
||||||
{
|
|
||||||
if (!this.treeBrowserDocument) // already closed, bug 706092
|
|
||||||
return;
|
|
||||||
|
|
||||||
let editor = this.treeBrowserDocument.getElementById("attribute-editor");
|
|
||||||
|
|
||||||
let editorInput =
|
|
||||||
this.treeBrowserDocument.getElementById("attribute-editor-input");
|
|
||||||
|
|
||||||
// remove highlight from attribute-value node in tree
|
|
||||||
this.removeClass(this.editingContext.attrObj, "editingAttributeValue");
|
|
||||||
|
|
||||||
// hide editor
|
|
||||||
this.removeClass(editor, "editing");
|
|
||||||
|
|
||||||
// stop listening for editor specific events
|
|
||||||
this.unbindEditorEvent(editor, "click");
|
|
||||||
this.unbindEditorEvent(editor, "dblclick");
|
|
||||||
this.unbindEditorEvent(editor, "keypress");
|
|
||||||
|
|
||||||
// clean up after the editor
|
|
||||||
editorInput.value = "";
|
|
||||||
editorInput.blur();
|
|
||||||
this.editingContext = null;
|
|
||||||
this.editingEvents = {};
|
|
||||||
|
|
||||||
// event notification
|
|
||||||
Services.obs.notifyObservers(null, this.IUI.INSPECTOR_NOTIFICATIONS.EDITOR_CLOSED,
|
|
||||||
null);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Commit the edits made in the editor, then close it.
|
|
||||||
*/
|
|
||||||
saveEditor: function TP_saveEditor()
|
|
||||||
{
|
|
||||||
let editorInput =
|
|
||||||
this.treeBrowserDocument.getElementById("attribute-editor-input");
|
|
||||||
let dirty = false;
|
|
||||||
|
|
||||||
if (this.hasClass(this.editingContext.attrObj, "nodeValue")) {
|
|
||||||
// set the new attribute value on the original target DOM element
|
|
||||||
this.editingContext.repObj.setAttribute(this.editingContext.attrName,
|
|
||||||
editorInput.value);
|
|
||||||
|
|
||||||
// update the HTML tree attribute value
|
|
||||||
this.editingContext.attrObj.innerHTML = editorInput.value;
|
|
||||||
dirty = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.hasClass(this.editingContext.attrObj, "nodeName")) {
|
|
||||||
// remove the original attribute from the original target DOM element
|
|
||||||
this.editingContext.repObj.removeAttribute(this.editingContext.attrName);
|
|
||||||
|
|
||||||
// set the new attribute value on the original target DOM element
|
|
||||||
this.editingContext.repObj.setAttribute(editorInput.value,
|
|
||||||
this.editingContext.attrValue);
|
|
||||||
|
|
||||||
// update the HTML tree attribute value
|
|
||||||
this.editingContext.attrObj.innerHTML = editorInput.value;
|
|
||||||
dirty = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.IUI.isDirty = dirty;
|
|
||||||
this.IUI.nodeChanged("treepanel");
|
|
||||||
|
|
||||||
// event notification
|
|
||||||
Services.obs.notifyObservers(null, this.IUI.INSPECTOR_NOTIFICATIONS.EDITOR_SAVED,
|
|
||||||
null);
|
|
||||||
|
|
||||||
this.closeEditor();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Simple tree select method.
|
|
||||||
* @param aNode the DOM node in the content document to select.
|
|
||||||
* @param aScroll boolean scroll to the visible node?
|
|
||||||
*/
|
|
||||||
select: function TP_select(aNode, aScroll, aFrom)
|
|
||||||
{
|
|
||||||
if (this.ioBox) {
|
|
||||||
this.ioBox.select(aNode, true, aFrom != "treepanel", aScroll);
|
|
||||||
} else {
|
|
||||||
this.pendingSelection = { node: aNode, scroll: aScroll };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
|
||||||
//// Utility functions
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Does the given object have a class attribute?
|
|
||||||
* @param aNode
|
|
||||||
* the DOM node.
|
|
||||||
* @param aClass
|
|
||||||
* The class string.
|
|
||||||
* @returns boolean
|
|
||||||
*/
|
|
||||||
hasClass: function TP_hasClass(aNode, aClass)
|
|
||||||
{
|
|
||||||
if (!(aNode instanceof this.window.Element))
|
|
||||||
return false;
|
|
||||||
return aNode.classList.contains(aClass);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the class name to the given object.
|
|
||||||
* @param aNode
|
|
||||||
* the DOM node.
|
|
||||||
* @param aClass
|
|
||||||
* The class string.
|
|
||||||
*/
|
|
||||||
addClass: function TP_addClass(aNode, aClass)
|
|
||||||
{
|
|
||||||
if (aNode instanceof this.window.Element)
|
|
||||||
aNode.classList.add(aClass);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the class name from the given object
|
|
||||||
* @param aNode
|
|
||||||
* the DOM node.
|
|
||||||
* @param aClass
|
|
||||||
* The class string.
|
|
||||||
*/
|
|
||||||
removeClass: function TP_removeClass(aNode, aClass)
|
|
||||||
{
|
|
||||||
if (aNode instanceof this.window.Element)
|
|
||||||
aNode.classList.remove(aClass);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the "repObject" from the HTML panel's domplate-constructed DOM node.
|
|
||||||
* In this system, a "repObject" is the Object being Represented by the box
|
|
||||||
* object. It is the "real" object that we're building our facade around.
|
|
||||||
*
|
|
||||||
* @param element
|
|
||||||
* The element in the HTML panel the user clicked.
|
|
||||||
* @returns either a real node or null
|
|
||||||
*/
|
|
||||||
getRepObject: function TP_getRepObject(element)
|
|
||||||
{
|
|
||||||
let target = null;
|
|
||||||
for (let child = element; child; child = child.parentNode) {
|
|
||||||
if (this.hasClass(child, "repTarget"))
|
|
||||||
target = child;
|
|
||||||
|
|
||||||
if (child.repObject) {
|
|
||||||
if (!target && this.hasClass(child.repObject, "repIgnore"))
|
|
||||||
break;
|
|
||||||
else
|
|
||||||
return child.repObject;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove a node box from the tree view.
|
|
||||||
* @param aElement
|
|
||||||
* The DOM node to remove from the HTML IOBox.
|
|
||||||
*/
|
|
||||||
deleteChildBox: function TP_deleteChildBox(aElement)
|
|
||||||
{
|
|
||||||
let childBox = this.ioBox.findObjectBox(aElement);
|
|
||||||
if (!childBox) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
childBox.parentNode.removeChild(childBox);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Destructor function. Cleanup.
|
|
||||||
*/
|
|
||||||
destroy: function TP_destroy()
|
|
||||||
{
|
|
||||||
if (this.isOpen()) {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
domplateUtils.setDOM(null);
|
|
||||||
|
|
||||||
if (this.DOMHelpers) {
|
|
||||||
this.DOMHelpers.destroy();
|
|
||||||
delete this.DOMHelpers;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.treePanelDiv) {
|
|
||||||
this.treePanelDiv.ownerPanel = null;
|
|
||||||
let parent = this.treePanelDiv.parentNode;
|
|
||||||
parent.removeChild(this.treePanelDiv);
|
|
||||||
delete this.treePanelDiv;
|
|
||||||
delete this.treeBrowserDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.treeIFrame) {
|
|
||||||
this.treeIFrame.removeEventListener("dblclick", this.onTreeDblClick, false);
|
|
||||||
this.treeIFrame.removeEventListener("click", this.onTreeClick, false);
|
|
||||||
let parent = this.treeIFrame.parentNode;
|
|
||||||
parent.removeChild(this.treeIFrame);
|
|
||||||
delete this.treeIFrame;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* DOMHelpers
|
|
||||||
* Makes DOM traversal easier. Goes through iframes.
|
|
||||||
*
|
|
||||||
* @constructor
|
|
||||||
* @param nsIDOMWindow aWindow
|
|
||||||
* The content window, owning the document to traverse.
|
|
||||||
*/
|
|
||||||
function DOMHelpers(aWindow) {
|
|
||||||
this.window = aWindow;
|
|
||||||
};
|
|
||||||
|
|
||||||
DOMHelpers.prototype = {
|
|
||||||
getParentObject: function Helpers_getParentObject(node)
|
|
||||||
{
|
|
||||||
let parentNode = node ? node.parentNode : null;
|
|
||||||
|
|
||||||
if (!parentNode) {
|
|
||||||
// Documents have no parentNode; Attr, Document, DocumentFragment, Entity,
|
|
||||||
// and Notation. top level windows have no parentNode
|
|
||||||
if (node && node == this.window.Node.DOCUMENT_NODE) {
|
|
||||||
// document type
|
|
||||||
if (node.defaultView) {
|
|
||||||
let embeddingFrame = node.defaultView.frameElement;
|
|
||||||
if (embeddingFrame)
|
|
||||||
return embeddingFrame.parentNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// a Document object without a parentNode or window
|
|
||||||
return null; // top level has no parent
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parentNode.nodeType == this.window.Node.DOCUMENT_NODE) {
|
|
||||||
if (parentNode.defaultView) {
|
|
||||||
return parentNode.defaultView.frameElement;
|
|
||||||
}
|
|
||||||
// parent is document element, but no window at defaultView.
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!parentNode.localName)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
return parentNode;
|
|
||||||
},
|
|
||||||
|
|
||||||
getChildObject: function Helpers_getChildObject(node, index, previousSibling,
|
|
||||||
showTextNodesWithWhitespace)
|
|
||||||
{
|
|
||||||
if (!node)
|
|
||||||
return null;
|
|
||||||
|
|
||||||
if (node.contentDocument) {
|
|
||||||
// then the node is a frame
|
|
||||||
if (index == 0) {
|
|
||||||
return node.contentDocument.documentElement; // the node's HTMLElement
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node instanceof this.window.GetSVGDocument) {
|
|
||||||
let svgDocument = node.getSVGDocument();
|
|
||||||
if (svgDocument) {
|
|
||||||
// then the node is a frame
|
|
||||||
if (index == 0) {
|
|
||||||
return svgDocument.documentElement; // the node's SVGElement
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let child = null;
|
|
||||||
if (previousSibling) // then we are walking
|
|
||||||
child = this.getNextSibling(previousSibling);
|
|
||||||
else
|
|
||||||
child = this.getFirstChild(node);
|
|
||||||
|
|
||||||
if (showTextNodesWithWhitespace)
|
|
||||||
return child;
|
|
||||||
|
|
||||||
for (; child; child = this.getNextSibling(child)) {
|
|
||||||
if (!this.isWhitespaceText(child))
|
|
||||||
return child;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null; // we have no children worth showing.
|
|
||||||
},
|
|
||||||
|
|
||||||
getFirstChild: function Helpers_getFirstChild(node)
|
|
||||||
{
|
|
||||||
let SHOW_ALL = Components.interfaces.nsIDOMNodeFilter.SHOW_ALL;
|
|
||||||
this.treeWalker = node.ownerDocument.createTreeWalker(node,
|
|
||||||
SHOW_ALL, null, false);
|
|
||||||
return this.treeWalker.firstChild();
|
|
||||||
},
|
|
||||||
|
|
||||||
getNextSibling: function Helpers_getNextSibling(node)
|
|
||||||
{
|
|
||||||
let next = this.treeWalker.nextSibling();
|
|
||||||
|
|
||||||
if (!next)
|
|
||||||
delete this.treeWalker;
|
|
||||||
|
|
||||||
return next;
|
|
||||||
},
|
|
||||||
|
|
||||||
isWhitespaceText: function Helpers_isWhitespaceText(node)
|
|
||||||
{
|
|
||||||
return node.nodeType == this.window.Node.TEXT_NODE &&
|
|
||||||
!/[^\s]/.exec(node.nodeValue);
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function Helpers_destroy()
|
|
||||||
{
|
|
||||||
delete this.window;
|
|
||||||
delete this.treeWalker;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,18 +0,0 @@
|
|||||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
||||||
|
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
|
|
||||||
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
||||||
<link rel="stylesheet" href="chrome://browser/skin/devtools/htmlpanel.css" type="text/css"/>
|
|
||||||
</head>
|
|
||||||
<body role="application">
|
|
||||||
<div id="attribute-editor">
|
|
||||||
<input id="attribute-editor-input" />
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -13,12 +13,12 @@ var EXPORTED_SYMBOLS = ["InspectorUI"];
|
|||||||
|
|
||||||
Cu.import("resource://gre/modules/Services.jsm");
|
Cu.import("resource://gre/modules/Services.jsm");
|
||||||
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
||||||
Cu.import("resource:///modules/TreePanel.jsm");
|
|
||||||
Cu.import("resource:///modules/devtools/MarkupView.jsm");
|
Cu.import("resource:///modules/devtools/MarkupView.jsm");
|
||||||
Cu.import("resource:///modules/highlighter.jsm");
|
Cu.import("resource:///modules/highlighter.jsm");
|
||||||
Cu.import("resource:///modules/devtools/LayoutView.jsm");
|
Cu.import("resource:///modules/devtools/LayoutView.jsm");
|
||||||
Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
|
Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
|
||||||
Cu.import("resource:///modules/devtools/EventEmitter.jsm");
|
Cu.import("resource:///modules/devtools/EventEmitter.jsm");
|
||||||
|
Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
|
||||||
|
|
||||||
// Inspector notifications dispatched through the nsIObserverService.
|
// Inspector notifications dispatched through the nsIObserverService.
|
||||||
const INSPECTOR_NOTIFICATIONS = {
|
const INSPECTOR_NOTIFICATIONS = {
|
||||||
|
|||||||
@ -3,7 +3,6 @@
|
|||||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
|
||||||
browser.jar:
|
browser.jar:
|
||||||
content/browser/inspector.html (highlighter/inspector.html)
|
|
||||||
content/browser/devtools/markup-view.xhtml (markupview/markup-view.xhtml)
|
content/browser/devtools/markup-view.xhtml (markupview/markup-view.xhtml)
|
||||||
content/browser/devtools/markup-view.css (markupview/markup-view.css)
|
content/browser/devtools/markup-view.css (markupview/markup-view.css)
|
||||||
content/browser/NetworkPanel.xhtml (webconsole/NetworkPanel.xhtml)
|
content/browser/NetworkPanel.xhtml (webconsole/NetworkPanel.xhtml)
|
||||||
|
|||||||
124
browser/devtools/shared/DOMHelpers.jsm
Normal file
124
browser/devtools/shared/DOMHelpers.jsm
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||||
|
|
||||||
|
const EXPORTED_SYMBOLS = ["DOMHelpers"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DOMHelpers
|
||||||
|
* Makes DOM traversal easier. Goes through iframes.
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param nsIDOMWindow aWindow
|
||||||
|
* The content window, owning the document to traverse.
|
||||||
|
*/
|
||||||
|
function DOMHelpers(aWindow) {
|
||||||
|
this.window = aWindow;
|
||||||
|
};
|
||||||
|
|
||||||
|
DOMHelpers.prototype = {
|
||||||
|
getParentObject: function Helpers_getParentObject(node)
|
||||||
|
{
|
||||||
|
let parentNode = node ? node.parentNode : null;
|
||||||
|
|
||||||
|
if (!parentNode) {
|
||||||
|
// Documents have no parentNode; Attr, Document, DocumentFragment, Entity,
|
||||||
|
// and Notation. top level windows have no parentNode
|
||||||
|
if (node && node == this.window.Node.DOCUMENT_NODE) {
|
||||||
|
// document type
|
||||||
|
if (node.defaultView) {
|
||||||
|
let embeddingFrame = node.defaultView.frameElement;
|
||||||
|
if (embeddingFrame)
|
||||||
|
return embeddingFrame.parentNode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// a Document object without a parentNode or window
|
||||||
|
return null; // top level has no parent
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parentNode.nodeType == this.window.Node.DOCUMENT_NODE) {
|
||||||
|
if (parentNode.defaultView) {
|
||||||
|
return parentNode.defaultView.frameElement;
|
||||||
|
}
|
||||||
|
// parent is document element, but no window at defaultView.
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!parentNode.localName)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
return parentNode;
|
||||||
|
},
|
||||||
|
|
||||||
|
getChildObject: function Helpers_getChildObject(node, index, previousSibling,
|
||||||
|
showTextNodesWithWhitespace)
|
||||||
|
{
|
||||||
|
if (!node)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
if (node.contentDocument) {
|
||||||
|
// then the node is a frame
|
||||||
|
if (index == 0) {
|
||||||
|
return node.contentDocument.documentElement; // the node's HTMLElement
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node instanceof this.window.GetSVGDocument) {
|
||||||
|
let svgDocument = node.getSVGDocument();
|
||||||
|
if (svgDocument) {
|
||||||
|
// then the node is a frame
|
||||||
|
if (index == 0) {
|
||||||
|
return svgDocument.documentElement; // the node's SVGElement
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let child = null;
|
||||||
|
if (previousSibling) // then we are walking
|
||||||
|
child = this.getNextSibling(previousSibling);
|
||||||
|
else
|
||||||
|
child = this.getFirstChild(node);
|
||||||
|
|
||||||
|
if (showTextNodesWithWhitespace)
|
||||||
|
return child;
|
||||||
|
|
||||||
|
for (; child; child = this.getNextSibling(child)) {
|
||||||
|
if (!this.isWhitespaceText(child))
|
||||||
|
return child;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null; // we have no children worth showing.
|
||||||
|
},
|
||||||
|
|
||||||
|
getFirstChild: function Helpers_getFirstChild(node)
|
||||||
|
{
|
||||||
|
let SHOW_ALL = Components.interfaces.nsIDOMNodeFilter.SHOW_ALL;
|
||||||
|
this.treeWalker = node.ownerDocument.createTreeWalker(node,
|
||||||
|
SHOW_ALL, null, false);
|
||||||
|
return this.treeWalker.firstChild();
|
||||||
|
},
|
||||||
|
|
||||||
|
getNextSibling: function Helpers_getNextSibling(node)
|
||||||
|
{
|
||||||
|
let next = this.treeWalker.nextSibling();
|
||||||
|
|
||||||
|
if (!next)
|
||||||
|
delete this.treeWalker;
|
||||||
|
|
||||||
|
return next;
|
||||||
|
},
|
||||||
|
|
||||||
|
isWhitespaceText: function Helpers_isWhitespaceText(node)
|
||||||
|
{
|
||||||
|
return node.nodeType == this.window.Node.TEXT_NODE &&
|
||||||
|
!/[^\s]/.exec(node.nodeValue);
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function Helpers_destroy()
|
||||||
|
{
|
||||||
|
delete this.window;
|
||||||
|
delete this.treeWalker;
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,402 +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)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
background-color: -moz-dialog;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
overflow: auto;
|
|
||||||
font-family: Lucida Grande, sans-serif;
|
|
||||||
font-size: 11px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 17px;
|
|
||||||
border-bottom: 1px solid threedlightshadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #0000ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
font: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
display: block;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* DOMPlate */
|
|
||||||
|
|
||||||
.objectLink-element,
|
|
||||||
.objectLink-textNode,
|
|
||||||
.objectLink-function,
|
|
||||||
.objectBox-stackTrace,
|
|
||||||
.objectLink-profile {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.objectLink-textNode {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.objectLink-styleRule,
|
|
||||||
.objectLink-element,
|
|
||||||
.objectLink-textNode {
|
|
||||||
color: #000088;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorTag,
|
|
||||||
.selectorId,
|
|
||||||
.selectorClass {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorTag {
|
|
||||||
color: #0000FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorId {
|
|
||||||
color: DarkBlue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorClass {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorTag {
|
|
||||||
color: #5F82D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorId {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorClass {
|
|
||||||
color: #D86060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorValue {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-style: italic;
|
|
||||||
color: #555555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panelNode-html {
|
|
||||||
-moz-box-sizing: padding-box;
|
|
||||||
padding: 4px 0 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox {
|
|
||||||
position: relative;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
padding-left: 13px;
|
|
||||||
-moz-user-select: -moz-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.search-selection {
|
|
||||||
-moz-user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.twisty {
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeChildBox {
|
|
||||||
margin-left: 12px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeLabel,
|
|
||||||
.nodeCloseLabel {
|
|
||||||
margin: -2px 2px 0 2px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0 2px;
|
|
||||||
color: #000088;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeCloseLabel {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeTag {
|
|
||||||
cursor: pointer;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeValue {
|
|
||||||
color: #FF0000;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeText,
|
|
||||||
.nodeComment {
|
|
||||||
margin: 0 2px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeText {
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docType {
|
|
||||||
position: absolute;
|
|
||||||
/* position DOCTYPE element above/outside the "nodeBox" that contains it */
|
|
||||||
/* Note: to be fixed in Bug #688439 */
|
|
||||||
top: -16px;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
padding-left: 8px;
|
|
||||||
color: #999;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.htmlNodeBox {
|
|
||||||
/* make room for DOCTYPE element to be rendered above/outside "nodeBox" */
|
|
||||||
/* Note: to be fixed in Bug #688439 */
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeWhiteSpace {
|
|
||||||
border: 1px solid LightGray;
|
|
||||||
white-space: pre; /* otherwise the border will be collapsed around zero pixels */
|
|
||||||
margin-left: 1px;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeWhiteSpace_Space {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeTextEntity {
|
|
||||||
border: 1px solid gray;
|
|
||||||
white-space: pre; /* otherwise the border will be collapsed around zero pixels */
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeComment {
|
|
||||||
color: DarkGreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeLabel {
|
|
||||||
background-color: #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeCloseLabel,
|
|
||||||
.nodeBox.highlightOpen > .nodeChildBox,
|
|
||||||
.nodeBox.open > .nodeCloseLabel,
|
|
||||||
.nodeBox.open > .nodeChildBox {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: Highlight;
|
|
||||||
background-color: Highlight;
|
|
||||||
color: HighlightText !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: Highlight !important;
|
|
||||||
background-color: cyan !important;
|
|
||||||
color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.nodeHidden .nodeCloseLabel,
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeText,
|
|
||||||
.nodeBox.nodeHidden .nodeText {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.nodeHidden .nodeCloseLabel > .nodeCloseLabelBox > .nodeTag {
|
|
||||||
color: #5F82D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue {
|
|
||||||
color: #D86060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: SkyBlue !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.mutated > .nodeLabel,
|
|
||||||
.nodeAttr.mutated,
|
|
||||||
.nodeValue.mutated,
|
|
||||||
.nodeText.mutated,
|
|
||||||
.nodeBox.mutated > .nodeText {
|
|
||||||
background-color: #EFFF79;
|
|
||||||
color: #FF0000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected.mutated > .nodeLabel,
|
|
||||||
.nodeBox.selected.mutated > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr.mutated > .nodeValue,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue.mutated,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText.mutated {
|
|
||||||
background-color: #EFFF79;
|
|
||||||
border-color: #EFFF79;
|
|
||||||
color: #FF0000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logRow-dirxml {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.soloElement > .nodeBox {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.useA11y .nodeLabel.focused {
|
|
||||||
outline: 2px solid #FF9933;
|
|
||||||
-moz-outline-radius: 3px;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.useA11y .nodeLabelBox:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* from panel.css */
|
|
||||||
|
|
||||||
/* HTML panel */
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: #3875d7;
|
|
||||||
background-color: #3875d7;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: #3875d7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/************************************************************************************************/
|
|
||||||
/* Twisties */
|
|
||||||
|
|
||||||
.twisty
|
|
||||||
{
|
|
||||||
-moz-appearance: treetwisty;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeLabel > .twisty,
|
|
||||||
.nodeBox.open > .nodeLabel > .twisty
|
|
||||||
{
|
|
||||||
-moz-appearance: treetwistyopen;
|
|
||||||
}
|
|
||||||
|
|
||||||
/************************************************************************************************/
|
|
||||||
/* HTML panel */
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: #3875d7;
|
|
||||||
background-color: #3875d7;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: #3875d7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editingAttributeValue {
|
|
||||||
background-color: #492;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor {
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 5000;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor.editing {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor-input {
|
|
||||||
border: none;
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
@ -108,7 +108,6 @@ browser.jar:
|
|||||||
skin/classic/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css)
|
skin/classic/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css)
|
||||||
skin/classic/browser/devtools/webconsole.png (devtools/webconsole.png)
|
skin/classic/browser/devtools/webconsole.png (devtools/webconsole.png)
|
||||||
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
||||||
skin/classic/browser/devtools/htmlpanel.css (devtools/htmlpanel.css)
|
|
||||||
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
|
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
|
||||||
skin/classic/browser/devtools/orion.css (devtools/orion.css)
|
skin/classic/browser/devtools/orion.css (devtools/orion.css)
|
||||||
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
|
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
|
||||||
|
|||||||
@ -1,392 +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)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
background-color: -moz-dialog;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
overflow: auto;
|
|
||||||
font-family: Lucida Grande, sans-serif;
|
|
||||||
font-size: 11px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 17px;
|
|
||||||
border-bottom: 1px solid threedlightshadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #0000ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
font: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
display: block;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* DOMPlate */
|
|
||||||
|
|
||||||
.objectLink-element,
|
|
||||||
.objectLink-textNode,
|
|
||||||
.objectLink-function,
|
|
||||||
.objectBox-stackTrace,
|
|
||||||
.objectLink-profile {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.objectLink-textNode {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.objectLink-styleRule,
|
|
||||||
.objectLink-element,
|
|
||||||
.objectLink-textNode {
|
|
||||||
color: #000088;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorTag,
|
|
||||||
.selectorId,
|
|
||||||
.selectorClass {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorTag {
|
|
||||||
color: #0000FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorId {
|
|
||||||
color: DarkBlue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorClass {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorTag {
|
|
||||||
color: #5F82D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorId {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorClass {
|
|
||||||
color: #D86060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorValue {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-style: italic;
|
|
||||||
color: #555555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panelNode-html {
|
|
||||||
-moz-box-sizing: padding-box;
|
|
||||||
padding: 4px 0 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox {
|
|
||||||
position: relative;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
padding-left: 13px;
|
|
||||||
-moz-user-select: -moz-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.search-selection {
|
|
||||||
-moz-user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.twisty {
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeChildBox {
|
|
||||||
margin-left: 12px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeLabel,
|
|
||||||
.nodeCloseLabel {
|
|
||||||
margin: -2px 2px 0 2px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0 2px;
|
|
||||||
color: #000088;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeCloseLabel {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeTag {
|
|
||||||
cursor: pointer;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeValue {
|
|
||||||
color: #FF0000;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeText,
|
|
||||||
.nodeComment {
|
|
||||||
margin: 0 2px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeText {
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docType {
|
|
||||||
position: absolute;
|
|
||||||
/* position DOCTYPE element above/outside the "nodeBox" that contains it */
|
|
||||||
/* Note: to be fixed in Bug #688439 */
|
|
||||||
top: -16px;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
padding-left: 8px;
|
|
||||||
color: #999;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.htmlNodeBox {
|
|
||||||
/* make room for DOCTYPE element to be rendered above/outside "nodeBox" */
|
|
||||||
/* Note: to be fixed in Bug #688439 */
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeWhiteSpace {
|
|
||||||
border: 1px solid LightGray;
|
|
||||||
white-space: pre; /* otherwise the border will be collapsed around zero pixels */
|
|
||||||
margin-left: 1px;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeWhiteSpace_Space {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeTextEntity {
|
|
||||||
border: 1px solid gray;
|
|
||||||
white-space: pre; /* otherwise the border will be collapsed around zero pixels */
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeComment {
|
|
||||||
color: DarkGreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeLabel {
|
|
||||||
background-color: #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeCloseLabel,
|
|
||||||
.nodeBox.highlightOpen > .nodeChildBox,
|
|
||||||
.nodeBox.open > .nodeCloseLabel,
|
|
||||||
.nodeBox.open > .nodeChildBox {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: Highlight;
|
|
||||||
background-color: Highlight;
|
|
||||||
color: HighlightText !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: Highlight !important;
|
|
||||||
background-color: cyan !important;
|
|
||||||
color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.nodeHidden .nodeCloseLabel,
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeText,
|
|
||||||
.nodeBox.nodeHidden .nodeText {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.nodeHidden .nodeCloseLabel > .nodeCloseLabelBox > .nodeTag {
|
|
||||||
color: #5F82D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue {
|
|
||||||
color: #D86060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: SkyBlue !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.mutated > .nodeLabel,
|
|
||||||
.nodeAttr.mutated,
|
|
||||||
.nodeValue.mutated,
|
|
||||||
.nodeText.mutated,
|
|
||||||
.nodeBox.mutated > .nodeText {
|
|
||||||
background-color: #EFFF79;
|
|
||||||
color: #FF0000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected.mutated > .nodeLabel,
|
|
||||||
.nodeBox.selected.mutated > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr.mutated > .nodeValue,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue.mutated,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText.mutated {
|
|
||||||
background-color: #EFFF79;
|
|
||||||
border-color: #EFFF79;
|
|
||||||
color: #FF0000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logRow-dirxml {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.soloElement > .nodeBox {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: #3875d7;
|
|
||||||
background-color: #3875d7;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: #3875d7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/************************************************************************************************/
|
|
||||||
/* Twisties */
|
|
||||||
|
|
||||||
.twisty
|
|
||||||
{
|
|
||||||
-moz-appearance: treetwisty;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeLabel > .twisty,
|
|
||||||
.nodeBox.open > .nodeLabel > .twisty
|
|
||||||
{
|
|
||||||
-moz-appearance: treetwistyopen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.memberRow.hasChildren > .memberLabelCell > .memberLabel,
|
|
||||||
.hasHeaders .netHrefLabel {
|
|
||||||
background-position: 2px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: #3875d7;
|
|
||||||
background-color: #3875d7;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: #3875d7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editingAttributeValue {
|
|
||||||
background-color: #492;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor {
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 5000;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor.editing {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor-input {
|
|
||||||
border: none;
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
@ -173,7 +173,6 @@ browser.jar:
|
|||||||
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
|
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
|
||||||
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
|
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
|
||||||
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
||||||
skin/classic/browser/devtools/htmlpanel.css (devtools/htmlpanel.css)
|
|
||||||
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
|
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
|
||||||
skin/classic/browser/devtools/orion.css (devtools/orion.css)
|
skin/classic/browser/devtools/orion.css (devtools/orion.css)
|
||||||
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
|
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
|
||||||
|
|||||||
@ -1,377 +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)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
background-color: -moz-dialog;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
overflow: auto;
|
|
||||||
font-family: Lucida Grande, sans-serif;
|
|
||||||
font-size: 11px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 17px;
|
|
||||||
border-bottom: 1px solid threedlightshadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #0000ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
font: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
display: block;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* DOMPlate */
|
|
||||||
|
|
||||||
.objectLink-element,
|
|
||||||
.objectLink-textNode,
|
|
||||||
.objectLink-function,
|
|
||||||
.objectBox-stackTrace,
|
|
||||||
.objectLink-profile {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.objectLink-textNode {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.objectLink-styleRule,
|
|
||||||
.objectLink-element,
|
|
||||||
.objectLink-textNode {
|
|
||||||
color: #000088;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorTag,
|
|
||||||
.selectorId,
|
|
||||||
.selectorClass {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorTag {
|
|
||||||
color: #0000FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorId {
|
|
||||||
color: DarkBlue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorClass {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorTag {
|
|
||||||
color: #5F82D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorId {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorHidden > .selectorClass {
|
|
||||||
color: #D86060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectorValue {
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-style: italic;
|
|
||||||
color: #555555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panelNode-html {
|
|
||||||
-moz-box-sizing: padding-box;
|
|
||||||
padding: 4px 0 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox {
|
|
||||||
position: relative;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
padding-left: 13px;
|
|
||||||
-moz-user-select: -moz-none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.search-selection {
|
|
||||||
-moz-user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.twisty {
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeChildBox {
|
|
||||||
margin-left: 12px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeLabel,
|
|
||||||
.nodeCloseLabel {
|
|
||||||
margin: -2px 2px 0 2px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0 2px;
|
|
||||||
color: #000088;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeCloseLabel {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeTag {
|
|
||||||
cursor: pointer;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeValue {
|
|
||||||
color: #FF0000;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeText,
|
|
||||||
.nodeComment {
|
|
||||||
margin: 0 2px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeText {
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docType {
|
|
||||||
position: absolute;
|
|
||||||
/* position DOCTYPE element above/outside the "nodeBox" that contains it */
|
|
||||||
/* Note: to be fixed in Bug #688439 */
|
|
||||||
top: -16px;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
padding-left: 8px;
|
|
||||||
color: #999;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.htmlNodeBox {
|
|
||||||
/* make room for DOCTYPE element to be rendered above/outside "nodeBox" */
|
|
||||||
/* Note: to be fixed in Bug #688439 */
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeWhiteSpace {
|
|
||||||
border: 1px solid LightGray;
|
|
||||||
white-space: pre;
|
|
||||||
margin-left: 1px;
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeWhiteSpace_Space {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeTextEntity {
|
|
||||||
border: 1px solid gray;
|
|
||||||
white-space: pre;
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeComment {
|
|
||||||
color: DarkGreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeLabel {
|
|
||||||
background-color: #EEEEEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeCloseLabel,
|
|
||||||
.nodeBox.highlightOpen > .nodeChildBox,
|
|
||||||
.nodeBox.open > .nodeCloseLabel,
|
|
||||||
.nodeBox.open > .nodeChildBox {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: Highlight;
|
|
||||||
background-color: Highlight;
|
|
||||||
color: HighlightText !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: inherit !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: Highlight !important;
|
|
||||||
background-color: cyan !important;
|
|
||||||
color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: #000000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.nodeHidden .nodeCloseLabel,
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeText,
|
|
||||||
.nodeBox.nodeHidden .nodeText {
|
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.nodeHidden .nodeCloseLabel > .nodeCloseLabelBox > .nodeTag {
|
|
||||||
color: #5F82D9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue {
|
|
||||||
color: #D86060;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
|
|
||||||
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeText {
|
|
||||||
color: SkyBlue !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.mutated > .nodeLabel,
|
|
||||||
.nodeAttr.mutated,
|
|
||||||
.nodeValue.mutated,
|
|
||||||
.nodeText.mutated,
|
|
||||||
.nodeBox.mutated > .nodeText {
|
|
||||||
background-color: #EFFF79;
|
|
||||||
color: #FF0000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected.mutated > .nodeLabel,
|
|
||||||
.nodeBox.selected.mutated > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr.mutated > .nodeValue,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue.mutated,
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText.mutated {
|
|
||||||
background-color: #EFFF79;
|
|
||||||
border-color: #EFFF79;
|
|
||||||
color: #FF0000 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logRow-dirxml {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.soloElement > .nodeBox {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
|
|
||||||
.nodeBox.selected > .nodeLabel {
|
|
||||||
border-color: #3875d7;
|
|
||||||
background-color: #3875d7;
|
|
||||||
color: #FFFFFF !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlighted > .nodeLabel {
|
|
||||||
border-color: #3875d7 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Twisties */
|
|
||||||
|
|
||||||
.twisty
|
|
||||||
{
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-image: url("chrome://global/skin/tree/twisty-clsd.png") !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nodeBox.highlightOpen > .nodeLabel > .twisty,
|
|
||||||
.nodeBox.open > .nodeLabel > .twisty
|
|
||||||
{
|
|
||||||
background-image: url("chrome://global/skin/tree/twisty-open.png") !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editingAttributeValue {
|
|
||||||
background-color: #492;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor {
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 5000;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor.editing {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#attribute-editor-input {
|
|
||||||
border: none;
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-family: Menlo, Andale Mono, monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
@ -131,7 +131,6 @@ browser.jar:
|
|||||||
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
|
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
|
||||||
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
|
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
|
||||||
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
|
||||||
skin/classic/browser/devtools/htmlpanel.css (devtools/htmlpanel.css)
|
|
||||||
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
|
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
|
||||||
skin/classic/browser/devtools/orion.css (devtools/orion.css)
|
skin/classic/browser/devtools/orion.css (devtools/orion.css)
|
||||||
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
|
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
|
||||||
@ -335,7 +334,6 @@ browser.jar:
|
|||||||
skin/classic/aero/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
|
skin/classic/aero/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
|
||||||
skin/classic/aero/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
|
skin/classic/aero/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
|
||||||
skin/classic/aero/browser/devtools/commandline.css (devtools/commandline.css)
|
skin/classic/aero/browser/devtools/commandline.css (devtools/commandline.css)
|
||||||
skin/classic/aero/browser/devtools/htmlpanel.css (devtools/htmlpanel.css)
|
|
||||||
skin/classic/aero/browser/devtools/markup-view.css (devtools/markup-view.css)
|
skin/classic/aero/browser/devtools/markup-view.css (devtools/markup-view.css)
|
||||||
skin/classic/aero/browser/devtools/orion.css (devtools/orion.css)
|
skin/classic/aero/browser/devtools/orion.css (devtools/orion.css)
|
||||||
skin/classic/aero/browser/devtools/orion-container.css (devtools/orion-container.css)
|
skin/classic/aero/browser/devtools/orion-container.css (devtools/orion-container.css)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user