зеркало из https://github.com/mozilla/gecko-dev.git
Bug 797527 - Remove InsideOutBox.jsm, DOMPlate.jsm and friends; r=dcamp
This commit is contained in:
Родитель
ab5493f19c
Коммит
6c17af6214
|
@ -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
|
||||
|
||||
EXTRA_JS_MODULES = \
|
||||
domplate.jsm \
|
||||
InsideOutBox.jsm \
|
||||
TreePanel.jsm \
|
||||
highlighter.jsm \
|
||||
$(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;
|
||||
}
|
||||
};
|
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
@ -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/XPCOMUtils.jsm");
|
||||
Cu.import("resource:///modules/TreePanel.jsm");
|
||||
Cu.import("resource:///modules/devtools/MarkupView.jsm");
|
||||
Cu.import("resource:///modules/highlighter.jsm");
|
||||
Cu.import("resource:///modules/devtools/LayoutView.jsm");
|
||||
Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
|
||||
Cu.import("resource:///modules/devtools/EventEmitter.jsm");
|
||||
Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
|
||||
|
||||
// Inspector notifications dispatched through the nsIObserverService.
|
||||
const INSPECTOR_NOTIFICATIONS = {
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
browser.jar:
|
||||
content/browser/inspector.html (highlighter/inspector.html)
|
||||
content/browser/devtools/markup-view.xhtml (markupview/markup-view.xhtml)
|
||||
content/browser/devtools/markup-view.css (markupview/markup-view.css)
|
||||
content/browser/NetworkPanel.xhtml (webconsole/NetworkPanel.xhtml)
|
||||
|
|
|
@ -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.png (devtools/webconsole.png)
|
||||
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/orion.css (devtools/orion.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/csshtmltree.css (devtools/csshtmltree.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/orion.css (devtools/orion.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/csshtmltree.css (devtools/csshtmltree.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/orion.css (devtools/orion.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/csshtmltree.css (devtools/csshtmltree.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/orion.css (devtools/orion.css)
|
||||
skin/classic/aero/browser/devtools/orion-container.css (devtools/orion-container.css)
|
||||
|
|
Загрузка…
Ссылка в новой задаче