Bug 797527 - Remove InsideOutBox.jsm, DOMPlate.jsm and friends; r=dcamp
authorRob Campbell <rcampbell@mozilla.com>
Wed, 03 Oct 2012 13:41:00 -0400
changeset 109634 b34419698e9690c61da628e316a87bbcfb9c9392
parent 109158 4cb8f88213f5e8c108103f7f167463bedd798542
child 109635 003656caed2a481eb7976423e3ea40a516b9b170
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersdcamp
bugs797527
milestone18.0a1
Bug 797527 - Remove InsideOutBox.jsm, DOMPlate.jsm and friends; r=dcamp
browser/devtools/highlighter/InsideOutBox.jsm
browser/devtools/highlighter/Makefile.in
browser/devtools/highlighter/TreePanel.jsm
browser/devtools/highlighter/domplate.jsm
browser/devtools/highlighter/inspector.html
browser/devtools/highlighter/inspector.jsm
browser/devtools/jar.mn
browser/devtools/shared/DOMHelpers.jsm
browser/themes/gnomestripe/devtools/htmlpanel.css
browser/themes/gnomestripe/jar.mn
browser/themes/pinstripe/devtools/htmlpanel.css
browser/themes/pinstripe/jar.mn
browser/themes/winstripe/devtools/htmlpanel.css
browser/themes/winstripe/jar.mn
deleted file mode 100644
--- a/browser/devtools/highlighter/InsideOutBox.jsm
+++ /dev/null
@@ -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;
-  }
-};
--- a/browser/devtools/highlighter/Makefile.in
+++ b/browser/devtools/highlighter/Makefile.in
@@ -6,19 +6,16 @@
 DEPTH		= @DEPTH@
 topsrcdir	= @top_srcdir@
 srcdir		= @srcdir@
 VPATH		= @srcdir@
 
 include $(DEPTH)/config/autoconf.mk
 
 EXTRA_JS_MODULES = \
-	domplate.jsm \
-	InsideOutBox.jsm \
-	TreePanel.jsm \
 	highlighter.jsm \
 	$(NULL)
 
 EXTRA_PP_JS_MODULES = \
 	inspector.jsm \
 	$(NULL)
 
 TEST_DIRS += test
deleted file mode 100644
--- a/browser/devtools/highlighter/TreePanel.jsm
+++ /dev/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;
-  }
-};
deleted file mode 100644
--- a/browser/devtools/highlighter/domplate.jsm
+++ /dev/null
@@ -1,1891 +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)
- * Firefox Port Contributors:
- *  Rob Campbell
- *  Julian Viereck
- *  Mihai Sucan
- */
-
-var EXPORTED_SYMBOLS = ["domplate", "HTMLTemplates", "domplateUtils"];
-
-const Ci = Components.interfaces;
-const Cu = Components.utils;
-
-const invisibleTags = {
-  "head": true,
-  "base": true,
-  "basefont": true,
-  "isindex": true,
-  "link": true,
-  "meta": true,
-  "script": true,
-  "style": true,
-  "title": true,
-};
-
-// End tags for void elements are forbidden
-// http://wiki.whatwg.org/wiki/HTML_vs._XHTML
-const selfClosingTags = {
-  "meta": 1,
-  "link": 1,
-  "area": 1,
-  "base": 1,
-  "col": 1,
-  "input": 1,
-  "img": 1,
-  "br": 1,
-  "hr": 1,
-  "param": 1,
-  "embed": 1
-};
-
-const reNotWhitespace = /[^\s]/;
-const showTextNodesWithWhitespace = false;
-
-var DOM = {};
-var domplateUtils = {};
-
-/**
- * Utility function to allow outside caller to set a global scope within
- * domplate's DOM object. Specifically for access to DOM constants and classes.
- * @param aGlobal
- *        The global object whose scope we wish to capture.
- */
-domplateUtils.setDOM = function(aGlobal)
-{
-  DOM = aGlobal;
-  if (!aGlobal) {
-    womb = null;
-  }
-};
-
-/**
- * main domplate constructor function.
- */
-
-let domplate = function()
-{
-  let lastSubject;
-  for (let i = 0; i < arguments.length; ++i)
-    lastSubject = lastSubject ? copyObject(lastSubject, arguments[i]) : arguments[i];
-
-  for (let name in lastSubject) {
-    let val = lastSubject[name];
-    if (isTag(val))
-      val.tag.subject = lastSubject;
-  }
-
-  return lastSubject;
-};
-
-var womb = null;
-
-///////////////////////////////////////////////////////////////////////////
-//// Base functions
-
-function DomplateTag(tagName)
-{
-  this.tagName = tagName;
-}
-
-function DomplateEmbed()
-{
-}
-
-function DomplateLoop()
-{
-}
-
-///////////////////////////////////////////////////////////////////////////
-//// Definitions
-
-domplate.context = function(context, fn)
-{
-  let lastContext = domplate.lastContext;
-  domplate.topContext = context;
-  fn.apply(context);
-  domplate.topContext = lastContext;
-};
-
-domplate.TAG = function()
-{
-  let embed = new DomplateEmbed();
-  return embed.merge(arguments);
-};
-
-domplate.FOR = function()
-{
-  let loop = new DomplateLoop();
-  return loop.merge(arguments);
-};
-
-DomplateTag.prototype =
-{
-  /**
-   * Initializer for DOM templates. Called to create new Functions objects
-   * like TR, TD, OBJLINK, etc. See defineTag
-   * @param args keyword argments for the template, the {} brace stuff after
-   *        the tag name, eg TR({...}, TD(...
-   * @param oldTag a nested tag, eg the TD tag in TR({...}, TD(...
-   */
-  merge: function(args, oldTag)
-  {
-    if (oldTag)
-      this.tagName = oldTag.tagName;
-
-    this.context = oldTag ? oldTag.context : null;  // normally null on construction
-    this.subject = oldTag ? oldTag.subject : null;
-    this.attrs = oldTag ? copyObject(oldTag.attrs) : {};
-    this.classes = oldTag ? copyObject(oldTag.classes) : {};
-    this.props = oldTag ? copyObject(oldTag.props) : null;
-    this.listeners = oldTag ? copyArray(oldTag.listeners) : null;
-    this.children = oldTag ? copyArray(oldTag.children) : [];
-    this.vars = oldTag ? copyArray(oldTag.vars) : [];
-
-    let attrs = args.length ? args[0] : null;
-    let hasAttrs = typeof(attrs) == "object" && !isTag(attrs);
-
-    // Do not clear children, they can be copied from the oldTag.
-    //this.children = [];
-
-    if (domplate.topContext)
-      this.context = domplate.topContext;
-
-    if (args.length)
-      parseChildren(args, hasAttrs ? 1 : 0, this.vars, this.children);
-
-    if (hasAttrs)
-      this.parseAttrs(attrs);
-
-    return creator(this, DomplateTag);
-  },
-
-  /**
-   * Parse node attributes.
-   * @param args
-   *        Object of arguments to process.
-   */
-  parseAttrs: function(args)
-  {
-    for (let name in args) {
-      let val = parseValue(args[name]);
-      readPartNames(val, this.vars);
-
-      if (name.indexOf("on") == 0) {
-        let eventName = name.substr(2);
-        if (!this.listeners)
-          this.listeners = [];
-        this.listeners.push(eventName, val);
-      } else if (name[0] == "_") {
-        let propName = name.substr(1);
-        if (!this.props)
-          this.props = {};
-        this.props[propName] = val;
-      } else if (name[0] == "$") {
-        let className = name.substr(1);
-        if (!this.classes)
-          this.classes = {};
-        this.classes[className] = val;
-      } else {
-        if (name == "class" && this.attrs.hasOwnProperty(name))
-          this.attrs[name] += " " + val;
-        else
-          this.attrs[name] = val;
-      }
-    }
-  },
-
-  compile: function()
-  {
-    if (this.renderMarkup)
-      return;
-
-    this.compileMarkup();
-    this.compileDOM();
-  },
-
-  compileMarkup: function()
-  {
-    this.markupArgs = [];
-    let topBlock = [], topOuts = [], blocks = [],
-      info = {args: this.markupArgs, argIndex: 0};
-
-    this.generateMarkup(topBlock, topOuts, blocks, info);
-    this.addCode(topBlock, topOuts, blocks);
-
-    let fnBlock = ['(function (__code__, __context__, __in__, __out__'];
-    for (let i = 0; i < info.argIndex; ++i)
-      fnBlock.push(', s', i);
-    fnBlock.push(') {\n');
-
-    if (this.subject)
-      fnBlock.push('with (this) {\n');
-    if (this.context)
-      fnBlock.push('with (__context__) {\n');
-    fnBlock.push('with (__in__) {\n');
-
-    fnBlock.push.apply(fnBlock, blocks);
-
-    if (this.subject)
-      fnBlock.push('}\n');
-    if (this.context)
-      fnBlock.push('}\n');
-
-    fnBlock.push('}})\n');
-
-    function __link__(tag, code, outputs, args)
-    {
-      tag.tag.compile();
-
-      let tagOutputs = [];
-      let markupArgs = [code, tag.tag.context, args, tagOutputs];
-      markupArgs.push.apply(markupArgs, tag.tag.markupArgs);
-      tag.tag.renderMarkup.apply(tag.tag.subject, markupArgs);
-
-      outputs.push(tag);
-      outputs.push(tagOutputs);
-    }
-
-    function __escape__(value)
-    {
-      function replaceChars(ch)
-      {
-        switch (ch) {
-          case "<":
-            return "&lt;";
-          case ">":
-            return "&gt;";
-          case "&":
-            return "&amp;";
-          case "'":
-            return "&#39;";
-          case '"':
-            return "&quot;";
-        }
-        return "?";
-      };
-      return String(value).replace(/[<>&"']/g, replaceChars);
-    }
-
-    function __loop__(iter, outputs, fn)
-    {
-      let iterOuts = [];
-      outputs.push(iterOuts);
-
-      if (iter instanceof Array)
-        iter = new ArrayIterator(iter);
-
-      try {
-        while (1) {
-          let value = iter.next();
-          let itemOuts = [0, 0];
-          iterOuts.push(itemOuts);
-          fn.apply(this, [value, itemOuts]);
-        }
-      } catch (exc) {
-        if (exc != StopIteration)
-          throw exc;
-      }
-    }
-
-    let js = fnBlock.join("");
-    this.renderMarkup = eval(js);
-  },
-
-  getVarNames: function(args)
-  {
-    if (this.vars)
-      args.push.apply(args, this.vars);
-
-    for (let i = 0; i < this.children.length; ++i) {
-      let child = this.children[i];
-      if (isTag(child))
-        child.tag.getVarNames(args);
-      else if (child instanceof Parts) {
-        for (let i = 0; i < child.parts.length; ++i) {
-          if (child.parts[i] instanceof Variable) {
-            let name = child.parts[i].name;
-            let names = name.split(".");
-            args.push(names[0]);
-          }
-        }
-      }
-    }
-  },
-
-  generateMarkup: function(topBlock, topOuts, blocks, info)
-  {
-    topBlock.push(',"<', this.tagName, '"');
-
-    for (let name in this.attrs) {
-      if (name != "class") {
-        let val = this.attrs[name];
-        topBlock.push(', " ', name, '=\\""');
-        addParts(val, ',', topBlock, info, true);
-        topBlock.push(', "\\""');
-      }
-    }
-
-    if (this.listeners) {
-      for (let i = 0; i < this.listeners.length; i += 2)
-        readPartNames(this.listeners[i+1], topOuts);
-    }
-
-    if (this.props) {
-      for (let name in this.props)
-        readPartNames(this.props[name], topOuts);
-    }
-
-    if (this.attrs.hasOwnProperty("class") || this.classes) {
-      topBlock.push(', " class=\\""');
-      if (this.attrs.hasOwnProperty("class"))
-        addParts(this.attrs["class"], ',', topBlock, info, true);
-      topBlock.push(', " "');
-      for (let name in this.classes) {
-        topBlock.push(', (');
-        addParts(this.classes[name], '', topBlock, info);
-        topBlock.push(' ? "', name, '" + " " : "")');
-      }
-      topBlock.push(', "\\""');
-    }
-    topBlock.push(',">"');
-
-    this.generateChildMarkup(topBlock, topOuts, blocks, info);
-    topBlock.push(',"</', this.tagName, '>"');
-  },
-
-  generateChildMarkup: function(topBlock, topOuts, blocks, info)
-  {
-    for (let i = 0; i < this.children.length; ++i) {
-      let child = this.children[i];
-      if (isTag(child))
-        child.tag.generateMarkup(topBlock, topOuts, blocks, info);
-      else
-        addParts(child, ',', topBlock, info, true);
-    }
-  },
-
-  addCode: function(topBlock, topOuts, blocks)
-  {
-    if (topBlock.length)
-      blocks.push('__code__.push(""', topBlock.join(""), ');\n');
-    if (topOuts.length)
-      blocks.push('__out__.push(', topOuts.join(","), ');\n');
-    topBlock.splice(0, topBlock.length);
-    topOuts.splice(0, topOuts.length);
-  },
-
-  addLocals: function(blocks)
-  {
-    let varNames = [];
-    this.getVarNames(varNames);
-
-    let map = {};
-    for (let i = 0; i < varNames.length; ++i) {
-      let name = varNames[i];
-      if ( map.hasOwnProperty(name) )
-        continue;
-
-      map[name] = 1;
-      let names = name.split(".");
-      blocks.push('var ', names[0] + ' = ' + '__in__.' + names[0] + ';\n');
-    }
-  },
-
-  compileDOM: function()
-  {
-    let path = [];
-    let blocks = [];
-    this.domArgs = [];
-    path.embedIndex = 0;
-    path.loopIndex = 0;
-    path.staticIndex = 0;
-    path.renderIndex = 0;
-    let nodeCount = this.generateDOM(path, blocks, this.domArgs);
-
-    let fnBlock = ['(function (root, context, o'];
-
-    for (let i = 0; i < path.staticIndex; ++i)
-      fnBlock.push(', ', 's'+i);
-
-    for (let i = 0; i < path.renderIndex; ++i)
-      fnBlock.push(', ', 'd'+i);
-
-    fnBlock.push(') {\n');
-    for (let i = 0; i < path.loopIndex; ++i)
-      fnBlock.push('var l', i, ' = 0;\n');
-    for (let i = 0; i < path.embedIndex; ++i)
-      fnBlock.push('var e', i, ' = 0;\n');
-
-    if (this.subject)
-      fnBlock.push('with (this) {\n');
-    if (this.context)
-      fnBlock.push('with (context) {\n');
-
-    fnBlock.push(blocks.join(""));
-
-    if (this.subject)
-      fnBlock.push('}\n');
-    if (this.context)
-      fnBlock.push('}\n');
-
-    fnBlock.push('return ', nodeCount, ';\n');
-    fnBlock.push('})\n');
-
-    function __bind__(object, fn)
-    {
-      return function(event) { return fn.apply(object, [event]); }
-    }
-
-    function __link__(node, tag, args)
-    {
-      if (!tag || !tag.tag)
-        return;
-
-      tag.tag.compile();
-
-      let domArgs = [node, tag.tag.context, 0];
-      domArgs.push.apply(domArgs, tag.tag.domArgs);
-      domArgs.push.apply(domArgs, args);
-
-      return tag.tag.renderDOM.apply(tag.tag.subject, domArgs);
-    }
-
-    function __loop__(iter, fn)
-    {
-      let nodeCount = 0;
-      for (let i = 0; i < iter.length; ++i) {
-        iter[i][0] = i;
-        iter[i][1] = nodeCount;
-        nodeCount += fn.apply(this, iter[i]);
-      }
-      return nodeCount;
-    }
-
-    function __path__(parent, offset)
-    {
-      let root = parent;
-
-      for (let i = 2; i < arguments.length; ++i) {
-        let index = arguments[i];
-        if (i == 3)
-          index += offset;
-
-        if (index == -1)
-          parent = parent.parentNode;
-        else
-          parent = parent.childNodes[index];
-      }
-
-      return parent;
-    }
-    let js = fnBlock.join("");
-    // Exceptions on this line are often in the eval
-    this.renderDOM = eval(js);
-  },
-
-  generateDOM: function(path, blocks, args)
-  {
-    if (this.listeners || this.props)
-      this.generateNodePath(path, blocks);
-
-    if (this.listeners) {
-      for (let i = 0; i < this.listeners.length; i += 2) {
-        let val = this.listeners[i+1];
-        let arg = generateArg(val, path, args);
-        blocks.push('node.addEventListener("', this.listeners[i],
-          '", __bind__(this, ', arg, '), false);\n');
-      }
-    }
-
-    if (this.props) {
-      for (let name in this.props) {
-        let val = this.props[name];
-        let arg = generateArg(val, path, args);
-        blocks.push('node.', name, ' = ', arg, ';\n');
-      }
-    }
-
-    this.generateChildDOM(path, blocks, args);
-    return 1;
-  },
-
-  generateNodePath: function(path, blocks)
-  {
-    blocks.push("var node = __path__(root, o");
-    for (let i = 0; i < path.length; ++i)
-      blocks.push(",", path[i]);
-    blocks.push(");\n");
-  },
-
-  generateChildDOM: function(path, blocks, args)
-  {
-    path.push(0);
-    for (let i = 0; i < this.children.length; ++i) {
-      let child = this.children[i];
-      if (isTag(child))
-        path[path.length - 1] += '+' + child.tag.generateDOM(path, blocks, args);
-      else
-        path[path.length - 1] += '+1';
-    }
-    path.pop();
-  },
-
-  /*
-   * We are just hiding from javascript.options.strict. For some reasons it's
-   * ok if we return undefined here.
-   * @return null or undefined or possibly a context.
-   */
-  getContext: function()
-  {
-    return this.context;
-  }
-};
-
-// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-
-DomplateEmbed.prototype = copyObject(DomplateTag.prototype,
-{
-  merge: function(args, oldTag)
-  {
-    this.value = oldTag ? oldTag.value : parseValue(args[0]);
-    this.attrs = oldTag ? oldTag.attrs : {};
-    this.vars = oldTag ? copyArray(oldTag.vars) : [];
-
-    let attrs = args[1];
-    for (let name in attrs) {
-      let val = parseValue(attrs[name]);
-      this.attrs[name] = val;
-      readPartNames(val, this.vars);
-    }
-
-    return creator(this, DomplateEmbed);
-  },
-
-  getVarNames: function(names)
-  {
-    if (this.value instanceof Parts)
-      names.push(this.value.parts[0].name);
-
-    if (this.vars)
-      names.push.apply(names, this.vars);
-  },
-
-  generateMarkup: function(topBlock, topOuts, blocks, info)
-  {
-    this.addCode(topBlock, topOuts, blocks);
-
-    blocks.push('__link__(');
-    addParts(this.value, '', blocks, info);
-    blocks.push(', __code__, __out__, {\n');
-
-    let lastName = null;
-    for (let name in this.attrs) {
-      if (lastName)
-        blocks.push(',');
-      lastName = name;
-
-      let val = this.attrs[name];
-      blocks.push('"', name, '":');
-      addParts(val, '', blocks, info);
-    }
-
-    blocks.push('});\n');
-  },
-
-  generateDOM: function(path, blocks, args)
-  {
-    let embedName = 'e' + path.embedIndex++;
-
-    this.generateNodePath(path, blocks);
-
-    let valueName = 'd' + path.renderIndex++;
-    let argsName = 'd' + path.renderIndex++;
-    blocks.push(embedName + ' = __link__(node, ', valueName, ', ',
-      argsName, ');\n');
-
-    return embedName;
-  }
-});
-
-// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-
-DomplateLoop.prototype = copyObject(DomplateTag.prototype,
-{
-  merge: function(args, oldTag)
-  {
-    this.isLoop = true;
-    this.varName = oldTag ? oldTag.varName : args[0];
-    this.iter = oldTag ? oldTag.iter : parseValue(args[1]);
-    this.vars = [];
-
-    this.children = oldTag ? copyArray(oldTag.children) : [];
-
-    let offset = Math.min(args.length, 2);
-    parseChildren(args, offset, this.vars, this.children);
-
-    return creator(this, DomplateLoop);
-  },
-
-  getVarNames: function(names)
-  {
-    if (this.iter instanceof Parts)
-      names.push(this.iter.parts[0].name);
-
-    DomplateTag.prototype.getVarNames.apply(this, [names]);
-  },
-
-  generateMarkup: function(topBlock, topOuts, blocks, info)
-  {
-    this.addCode(topBlock, topOuts, blocks);
-
-    let iterName;
-    if (this.iter instanceof Parts) {
-      let part = this.iter.parts[0];
-      iterName = part.name;
-
-      if (part.format) {
-        for (let i = 0; i < part.format.length; ++i)
-          iterName = part.format[i] + "(" + iterName + ")";
-      }
-    } else
-      iterName = this.iter;
-
-    blocks.push('__loop__.apply(this, [', iterName, ', __out__, function(', this.varName, ', __out__) {\n');
-    this.generateChildMarkup(topBlock, topOuts, blocks, info);
-    this.addCode(topBlock, topOuts, blocks);
-    blocks.push('}]);\n');
-  },
-
-  generateDOM: function(path, blocks, args)
-  {
-    let iterName = 'd' + path.renderIndex++;
-    let counterName = 'i' + path.loopIndex;
-    let loopName = 'l' + path.loopIndex++;
-
-    if (!path.length)
-      path.push(-1, 0);
-
-    let preIndex = path.renderIndex;
-    path.renderIndex = 0;
-
-    let nodeCount = 0;
-
-    let subBlocks = [];
-    let basePath = path[path.length-1];
-    for (let i = 0; i < this.children.length; ++i) {
-      path[path.length - 1] = basePath + '+' + loopName + '+' + nodeCount;
-
-      let child = this.children[i];
-      if (isTag(child))
-        nodeCount += '+' + child.tag.generateDOM(path, subBlocks, args);
-      else
-        nodeCount += '+1';
-    }
-
-    path[path.length - 1] = basePath + '+' + loopName;
-
-    blocks.push(loopName,' = __loop__.apply(this, [',
-      iterName, ', function(', counterName, ',', loopName);
-    for (let i = 0; i < path.renderIndex; ++i)
-      blocks.push(',d' + i);
-    blocks.push(') {\n');
-    blocks.push(subBlocks.join(""));
-    blocks.push('return ', nodeCount, ';\n');
-    blocks.push('}]);\n');
-
-    path.renderIndex = preIndex;
-
-    return loopName;
-  }
-});
-
-///////////////////////////////////////////////////////////////////////////
-
-function Variable(name, format)
-{
-  this.name = name;
-  this.format = format;
-}
-
-function Parts(parts)
-{
-  this.parts = parts;
-}
-
-///////////////////////////////////////////////////////////////////////////
-
-function parseParts(str)
-{
-  let re = /\$([_A-Za-z][_A-Za-z0-9.|]*)/g;
-  let index = 0;
-  let parts = [];
-
-  let m;
-  while (m = re.exec(str)) {
-    let pre = str.substr(index, (re.lastIndex-m[0].length)-index);
-    if (pre)
-      parts.push(pre);
-
-    let expr = m[1].split("|");
-    parts.push(new Variable(expr[0], expr.slice(1)));
-    index = re.lastIndex;
-  }
-
-  if (!index)
-    return str;
-
-  let post = str.substr(index);
-  if (post)
-    parts.push(post);
-
-  return new Parts(parts);
-}
-
-function parseValue(val)
-{
-  return typeof(val) == 'string' ? parseParts(val) : val;
-}
-
-function parseChildren(args, offset, vars, children)
-{
-  for (let i = offset; i < args.length; ++i) {
-    let val = parseValue(args[i]);
-    children.push(val);
-    readPartNames(val, vars);
-  }
-}
-
-function readPartNames(val, vars)
-{
-  if (val instanceof Parts) {
-    for (let i = 0; i < val.parts.length; ++i) {
-      let part = val.parts[i];
-      if (part instanceof Variable)
-        vars.push(part.name);
-    }
-  }
-}
-
-function generateArg(val, path, args)
-{
-  if (val instanceof Parts) {
-    let vals = [];
-    for (let i = 0; i < val.parts.length; ++i) {
-      let part = val.parts[i];
-      if (part instanceof Variable) {
-        let varName = 'd' + path.renderIndex++;
-        if (part.format) {
-          for (let j = 0; j < part.format.length; ++j)
-            varName = part.format[j] + '(' + varName + ')';
-        }
-
-        vals.push(varName);
-      }
-      else
-        vals.push('"' + part.replace(/"/g, '\\"') + '"');
-    }
-
-    return vals.join('+');
-  } else {
-    args.push(val);
-    return 's' + path.staticIndex++;
-  }
-}
-
-function addParts(val, delim, block, info, escapeIt)
-{
-  let vals = [];
-  if (val instanceof Parts) {
-    for (let i = 0; i < val.parts.length; ++i) {
-      let part = val.parts[i];
-      if (part instanceof Variable) {
-        let partName = part.name;
-        if (part.format) {
-          for (let j = 0; j < part.format.length; ++j)
-            partName = part.format[j] + "(" + partName + ")";
-        }
-
-        if (escapeIt)
-          vals.push("__escape__(" + partName + ")");
-        else
-          vals.push(partName);
-      }
-      else
-        vals.push('"' + part + '"');
-    }
-  } else if (isTag(val)) {
-    info.args.push(val);
-    vals.push('s' + info.argIndex++);
-  } else
-    vals.push('"' + val + '"');
-
-  let parts = vals.join(delim);
-  if (parts)
-    block.push(delim, parts);
-}
-
-function isTag(obj)
-{
-  return (typeof(obj) == "function" || obj instanceof Function) && !!obj.tag;
-}
-
-///////////////////////////////////////////////////////////////////////////
-//// creator
-
-function creator(tag, cons)
-{
-  let fn = new Function(
-    "var tag = arguments.callee.tag;" +
-    "var cons = arguments.callee.cons;" +
-    "var newTag = new cons();" +
-    "return newTag.merge(arguments, tag);");
-
-  fn.tag = tag;
-  fn.cons = cons;
-  extend(fn, Renderer);
-
-  return fn;
-}
-
-///////////////////////////////////////////////////////////////////////////
-//// Utility functions
-
-function arrayInsert(array, index, other)
-{
-  for (let i = 0; i < other.length; ++i)
-    array.splice(i+index, 0, other[i]);
-
-  return array;
-}
-
-function cloneArray(array, fn)
-{
-  let newArray = [];
-
-  if (fn)
-    for (let i = 0; i < array.length; ++i)
-      newArray.push(fn(array[i]));
-  else
-    for (let i = 0; i < array.length; ++i)
-      newArray.push(array[i]);
-
-  return newArray;
-}
-
-// fn, thisObject, args => thisObject.fn(args, arguments);
-function bind()
-{
-  let args = cloneArray(arguments), fn = args.shift(), object = args.shift();
-  return function bind()
-  {
-    return fn.apply(object, arrayInsert(cloneArray(args), 0, arguments));
-  }
-}
-
-function copyArray(oldArray)
-{
-  let array = [];
-  if (oldArray)
-    for (let i = 0; i < oldArray.length; ++i)
-      array.push(oldArray[i]);
-  return array;
-}
-
-function copyObject(l, r)
-{
-  let m = {};
-  extend(m, l);
-  extend(m, r);
-  return m;
-}
-
-function escapeNewLines(value)
-{
-  return value.replace(/\r/gm, "\\r").replace(/\n/gm, "\\n");
-}
-
-function extend(l, r)
-{
-  for (let n in r)
-    l[n] = r[n];
-}
-
-function cropString(text, limit, alterText)
-{
-  if (!alterText)
-    alterText = "..."; //…
-
-  text = text + "";
-
-  if (!limit)
-    limit = 88; // todo
-  var halfLimit = (limit / 2);
-  halfLimit -= 2; // adjustment for alterText's increase in size
-
-  if (text.length > limit)
-    return text.substr(0, halfLimit) + alterText +
-      text.substr(text.length - halfLimit);
-  else
-    return text;
-}
-
-function cropMultipleLines(text, limit)
-{
-  return escapeNewLines(this.cropString(text, limit));
-}
-
-function isVisible(elt)
-{
-  if (elt.localName) {
-    return elt.offsetWidth > 0 || elt.offsetHeight > 0 ||
-      elt.localName.toLowerCase() in invisibleTags;
-  } else {
-    return elt.offsetWidth > 0 || elt.offsetHeight > 0;
-  }
-    // || isElementSVG(elt) || isElementMathML(elt);
-}
-
-// Local Helpers
-
-function isElementXHTML(node)
-{
-  return node.nodeName == node.nodeName.toLowerCase();
-}
-
-function isContainerElement(element)
-{
-  let tag = element.localName.toLowerCase();
-  switch (tag) {
-    case "script":
-    case "style":
-    case "iframe":
-    case "frame":
-    case "tabbrowser":
-    case "browser":
-      return true;
-    case "link":
-      return element.getAttribute("rel") == "stylesheet";
-    case "embed":
-      return element.getSVGDocument();
-  }
-  return false;
-}
-
-domplateUtils.isWhitespace = function isWhitespace(text)
-{
-  return !reNotWhitespace.exec(text);
-};
-
-domplateUtils.isWhitespaceText = function isWhitespaceText(node)
-{
-  if (node instanceof DOM.HTMLAppletElement)
-    return false;
-  return node.nodeType == DOM.Node.TEXT_NODE && this.isWhitespace(node.nodeValue);
-}
-
-function isSelfClosing(element)
-{
-  //if (isElementSVG(element) || isElementMathML(element))
-  //    return true;
-  var tag = element.localName.toLowerCase();
-  return (selfClosingTags.hasOwnProperty(tag));
-};
-
-function isEmptyElement(element)
-{
-  if (showTextNodesWithWhitespace) {
-    return !element.firstChild && isSelfClosing(element);
-  } else {
-    for (let child = element.firstChild; child; child = child.nextSibling) {
-      if (!domplateUtils.isWhitespaceText(child))
-        return false;
-    }
-  }
-  return isSelfClosing(element);
-}
-
-function getEmptyElementTag(node)
-{
-  let isXhtml= isElementXHTML(node);
-  if (isXhtml)
-    return HTMLTemplates.XEmptyElement.tag;
-  else
-    return HTMLTemplates.EmptyElement.tag;
-}
-
-/**
- * Determines if the given node has any children which are elements.
- *
- * @param {Element} element Element to test.
- * @return true if immediate children of type Element exist, false otherwise
- */
-function hasNoElementChildren(element)
-{
-  if (element.childElementCount != 0)
-    return false;
-
-  return true;
-}
-
-domplateUtils.getNodeTag = function getNodeTag(node, expandAll)
-{
-  if (node instanceof DOM.Element) {
-    if (node instanceof DOM.HTMLHtmlElement && node.ownerDocument
-        && node.ownerDocument.doctype)
-      return HTMLTemplates.HTMLHtmlElement.tag;
-    else if (node instanceof DOM.HTMLAppletElement)
-      return getEmptyElementTag(node);
-    else if (isContainerElement(node))
-      return HTMLTemplates.Element.tag;
-    else if (isEmptyElement(node))
-      return getEmptyElementTag(node);
-    else if (hasNoElementChildren(node))
-      return HTMLTemplates.TextElement.tag;
-    else
-      return HTMLTemplates.Element.tag;
-  }
-  else if (node instanceof DOM.Text)
-    return HTMLTemplates.TextNode.tag;
-  else if (node instanceof DOM.CDATASection)
-    return HTMLTemplates.CDATANode.tag;
-  else if (node instanceof DOM.Comment)
-    return HTMLTemplates.CommentNode.tag;
-  else if (node instanceof DOM.SourceText)
-    return HTMLTemplates.SourceText.tag;
-  else
-    return HTMLTemplates.Nada.tag;
-}
-
-function getNodeBoxTag(nodeBox)
-{
-  let re = /([^\s]+)NodeBox/;
-  let m = re.exec(nodeBox.className);
-  if (!m)
-    return null;
-
-  let nodeBoxType = m[1];
-  if (nodeBoxType == "container")
-    return HTMLTemplates.Element.tag;
-  else if (nodeBoxType == "text")
-    return HTMLTemplates.TextElement.tag;
-  else if (nodeBoxType == "empty")
-    return HTMLTemplates.EmptyElement.tag;
-}
-
-///////////////////////////////////////////////////////////////////////////
-//// ArrayIterator
-
-function ArrayIterator(array)
-{
-  let index = -1;
-
-  this.next = function()
-  {
-    if (++index >= array.length)
-      throw StopIteration;
-
-    return array[index];
-  };
-}
-
-function StopIteration() {}
-
-domplate.$break = function()
-{
-  throw StopIteration;
-};
-
-///////////////////////////////////////////////////////////////////////////
-//// Renderer
-
-var Renderer =
-{
-  renderHTML: function(args, outputs, self)
-  {
-    let code = [];
-    let markupArgs = [code, this.tag.getContext(), args, outputs];
-    markupArgs.push.apply(markupArgs, this.tag.markupArgs);
-    this.tag.renderMarkup.apply(self ? self : this.tag.subject, markupArgs);
-    return code.join("");
-  },
-
-  insertRows: function(args, before, self)
-  {
-    if (!args)
-      args = {};
-
-    this.tag.compile();
-
-    let outputs = [];
-    let html = this.renderHTML(args, outputs, self);
-
-    let doc = before.ownerDocument;
-    let table = doc.createElement("table");
-    table.innerHTML = html;
-
-    let tbody = table.firstChild;
-    let parent = before.localName.toLowerCase() == "tr" ? before.parentNode : before;
-    let after = before.localName.toLowerCase() == "tr" ? before.nextSibling : null;
-
-    let firstRow = tbody.firstChild, lastRow;
-    while (tbody.firstChild) {
-      lastRow = tbody.firstChild;
-      if (after)
-        parent.insertBefore(lastRow, after);
-      else
-        parent.appendChild(lastRow);
-    }
-
-    // To save the next poor soul:
-    // In order to properly apply properties and event handlers on elements
-    // constructed by a FOR tag, the tag needs to be able to iterate up and
-    // down the tree, meaning if FOR is the root element as is the case with
-    // many insertRows calls, it will need to iterator over portions of the
-    // new parent.
-    //
-    // To achieve this end, __path__ defines the -1 operator which allows
-    // parent traversal. When combined with the offset that we calculate
-    // below we are able to iterate over the elements.
-    //
-    // This fails when applied to a non-loop element as non-loop elements
-    // Do not generate to proper path to bounce up and down the tree.
-    let offset = 0;
-    if (this.tag.isLoop) {
-      let node = firstRow.parentNode.firstChild;
-      for (; node && node != firstRow; node = node.nextSibling)
-        ++offset;
-    }
-
-    // strict warning: this.tag.context undefined
-    let domArgs = [firstRow, this.tag.getContext(), offset];
-    domArgs.push.apply(domArgs, this.tag.domArgs);
-    domArgs.push.apply(domArgs, outputs);
-
-    this.tag.renderDOM.apply(self ? self : this.tag.subject, domArgs);
-    return [firstRow, lastRow];
-  },
-
-  insertBefore: function(args, before, self)
-  {
-    return this.insertNode(args, before.ownerDocument,
-      function(frag) {
-        before.parentNode.insertBefore(frag, before);
-      }, self);
-  },
-
-  insertAfter: function(args, after, self)
-  {
-    return this.insertNode(args, after.ownerDocument,
-      function(frag) {
-        after.parentNode.insertBefore(frag, after.nextSibling);
-      }, self);
-  },
-
-  insertNode: function(args, doc, inserter, self)
-  {
-    if (!args)
-      args = {};
-
-    this.tag.compile();
-
-    let outputs = [];
-    let html = this.renderHTML(args, outputs, self);
-
-    let range = doc.createRange();
-    range.selectNode(doc.body);
-    let frag = range.createContextualFragment(html);
-
-    let root = frag.firstChild;
-    root = inserter(frag) || root;
-
-    let domArgs = [root, this.tag.context, 0];
-    domArgs.push.apply(domArgs, this.tag.domArgs);
-    domArgs.push.apply(domArgs, outputs);
-
-    this.tag.renderDOM.apply(self ? self : this.tag.subject, domArgs);
-
-    return root;
-  },
-
-  replace: function(args, parent, self)
-  {
-    if (!args)
-      args = {};
-
-    this.tag.compile();
-
-    let outputs = [];
-    let html = this.renderHTML(args, outputs, self);
-
-    let root;
-    if (parent.nodeType == DOM.Node.ELEMENT_NODE) {
-      parent.innerHTML = html;
-      root = parent.firstChild;
-    } else {
-      if (!parent || parent.nodeType != DOM.Node.DOCUMENT_NODE)
-        return;
-
-      if (!womb || womb.ownerDocument != parent)
-        womb = parent.createElement("div");
-
-      womb.innerHTML = html;
-
-      root = womb.firstChild;
-    }
-
-    let domArgs = [root, this.tag.context, 0];
-    domArgs.push.apply(domArgs, this.tag.domArgs);
-    domArgs.push.apply(domArgs, outputs);
-    this.tag.renderDOM.apply(self ? self : this.tag.subject, domArgs);
-
-    return root;
-  },
-
-  append: function(args, parent, self)
-  {
-    if (!args)
-      args = {};
-
-    this.tag.compile();
-
-    let outputs = [];
-    let html = this.renderHTML(args, outputs, self);
-
-    if (!womb || womb.ownerDocument != parent.ownerDocument)
-      womb = parent.ownerDocument.createElement("div");
-    womb.innerHTML = html;
-
-    let root = womb.firstChild;
-    while (womb.firstChild)
-      parent.appendChild(womb.firstChild);
-
-    let domArgs = [root, this.tag.context, 0];
-    domArgs.push.apply(domArgs, this.tag.domArgs);
-    domArgs.push.apply(domArgs, outputs);
-
-    this.tag.renderDOM.apply(self ? self : this.tag.subject, domArgs);
-
-    return root;
-  }
-};
-
-///////////////////////////////////////////////////////////////////////////
-//// defineTags macro
-
-/**
- * Create default tags for a list of tag names.
- * @param Arguments
- *        list of string arguments
- */
-
-function defineTags()
-{
-  for (let i = 0; i < arguments.length; ++i) {
-    let tagName = arguments[i];
-    let fn = new Function("var newTag = new DomplateTag('" + tagName +
-      "'); return newTag.merge(arguments);");
-
-    let fnName = tagName.toUpperCase();
-    domplate[fnName] = fn;
-  }
-}
-
-defineTags(
-  "a", "button", "br", "canvas", "col", "colgroup", "div", "fieldset", "form",
-  "h1", "h2", "h3", "hr", "img", "input", "label", "legend", "li", "ol",
-  "optgroup", "option", "p", "pre", "select", "b", "span", "strong", "table",
-  "tbody", "td", "textarea", "tfoot", "th", "thead", "tr", "tt", "ul", "iframe",
-  "code"
-);
-
-///////////////////////////////////////////////////////////////////////////
-//// HTMLTemplates
-
-let HTMLTemplates = {
-  showTextNodesWithWhitespace: false
-};
-
-let BaseTemplates = {
-  showTextNodesWithWhitespace: false
-};
-
-///////////////////////////////////////////////////////////////////////////
-//// HTMLTemplates.Reps
-
-BaseTemplates.OBJECTLINK = domplate.A({
-  "class": "objectLink objectLink-$className a11yFocus",
-  _repObject: "$object"
-});
-
-BaseTemplates.Rep = domplate(
-{
-  className: "",
-  inspectable: true,
-
-  supportsObject: function(object, type)
-  {
-    return false;
-  },
-
-  inspectObject: function(object, context)
-  {
-    // Firebug.chrome.select(object);  // todo
-  },
-
-  browseObject: function(object, context)
-  {
-  },
-
-  persistObject: function(object, context)
-  {
-  },
-
-  getRealObject: function(object, context)
-  {
-    return object;
-  },
-
-  /**
-   * Return a sensible string title for the given object, removing any wrapper
-   * information from it.
-   * @param aObject
-   *        The object to get the title of.
-   * @returns string
-   */
-
-  getTitle: function(aObject)
-  {
-    // e.g., [object XPCWrappedNative [object foo]]
-    let label = safeToString(aObject);
-
-    const re =/\[object ([^\]]*)/;
-    let objectMatch = re.exec(label);
-    let secondObjectMatch = null;
-    if (objectMatch) {
-      // e.g., XPCWrappedNative [object foo
-      secondObjectMatch = re.exec(objectMatch[1]);
-    }
-
-    if (secondObjectMatch)
-      return secondObjectMatch[1];  // eg foo
-    else
-      return objectMatch ? objectMatch[1] : label;
-  },
-
-  getTooltip: function(object)
-  {
-    return null;
-  },
-
-  /**
-   * Called by chrome.onContextMenu to build the context menu when the
-   * underlying object has this rep.
-   * See also Panel for a similar function also called by onContextMenu.
-   * Extensions may monkey patch and chain off this call.
-   * @param object: the 'realObject', a model value, eg a DOM property
-   * @param target: the HTML element clicked on.
-   * @param context: the context, probably FirebugContext
-   * @returns an array of menu items.
-   */
-  getContextMenuItems: function(object, target, context)
-  {
-    return [];
-  },
-
-  /////////////////////////////////////////////////////////////////////////
-  // Convenience for domplates
-
-  STR: function(name)
-  {
-    return name; // todo getproperty?
-  },
-
-  cropString: function(text)
-  {
-    return cropString(text);
-  },
-
-  cropMultipleLines: function(text, limit)
-  {
-    return cropMultipleLines(text, limit);
-  },
-
-  toLowerCase: function(text)
-  {
-    return text ? text.toLowerCase() : text;
-  },
-
-  plural: function(n)
-  {
-    return n == 1 ? "" : "s";
-  }
-});
-
-BaseTemplates.Element = domplate(BaseTemplates.Rep,
-{
-  tag:
-    BaseTemplates.OBJECTLINK(
-      "&lt;",
-      domplate.SPAN({"class": "nodeTag"},
-        "$object.localName|toLowerCase"),
-      domplate.FOR("attr", "$object|attrIterator",
-        "&nbsp;$attr.localName=&quot;",
-        domplate.SPAN({"class": "nodeValue"},
-          "$attr.nodeValue"),
-        "&quot;"
-      ),
-      "&gt;"
-    ),
-
-  shortTag:
-    BaseTemplates.OBJECTLINK(
-      domplate.SPAN({"class": "$object|getVisible"},
-        domplate.SPAN({"class": "selectorTag"},
-          "$object|getSelectorTag"),
-        domplate.SPAN({"class": "selectorId"},
-          "$object|getSelectorId"),
-        domplate.SPAN({"class": "selectorClass"},
-          "$object|getSelectorClass"),
-        domplate.SPAN({"class": "selectorValue"},
-          "$object|getValue")
-      )
-    ),
-
-  getVisible: function(elt)
-  {
-    return isVisible(elt) ? "" : "selectorHidden";
-  },
-
-  getSelectorTag: function(elt)
-  {
-    return elt.localName.toLowerCase();
-  },
-
-  getSelectorId: function(elt)
-  {
-    return elt.id ? ("#" + elt.id) : "";
-  },
-
-  getSelectorClass: function(elt)
-  {
-    return elt.getAttribute("class")
-      ? ("." + elt.getAttribute("class").split(" ")[0])
-      : "";
-  },
-
-  getValue: function(elt)
-  { // todo getFileName
-    let value;
-/*
-    if (elt instanceof HTMLImageElement)
-      value = getFileName(elt.getAttribute("src"));
-    else if (elt instanceof HTMLAnchorElement)
-      value = getFileName(elt.getAttribute("href"));
-    else if (elt instanceof HTMLInputElement)
-      value = elt.getAttribute("value");
-    else if (elt instanceof HTMLFormElement)
-      value = getFileName(elt.getAttribute("action"));
-    else if (elt instanceof HTMLScriptElement)
-      value = getFileName(elt.getAttribute("src"));
-
-    return value ? " " + cropMultipleLines(value, 20) : ""; */
-    // trying a simplified version from above commented section
-    // todo
-    if (elt instanceof DOM.HTMLImageElement)
-      value = elt.getAttribute("src");
-    else if (elt instanceof DOM.HTMLAnchorElement)
-      value = elt.getAttribute("href");
-    else if (elt instanceof DOM.HTMLInputElement)
-      value = elt.getAttribute("value");
-    else if (elt instanceof DOM.HTMLFormElement)
-      value = elt.getAttribute("action");
-    else if (elt instanceof DOM.HTMLScriptElement)
-      value = elt.getAttribute("src");
-
-    return value ? " " + cropMultipleLines(value, 20) : "";
-  },
-
-  attrIterator: function(elt)
-  {
-    let attrs = [];
-    let idAttr, classAttr;
-    if (elt.attributes) {
-      for (let i = 0; i < elt.attributes.length; ++i) {
-        var attr = elt.attributes[i];
-        if (attr.localName.indexOf("-moz-math") != -1)
-          continue;
-        else if (attr.localName == "id")
-          idAttr = attr;
-        else if (attr.localName == "class")
-          classAttr = attr;
-        else
-          attrs.push(attr);
-      }
-    }
-    if (classAttr)
-      attrs.unshift(classAttr);
-    if (idAttr)
-      attrs.unshift(idAttr);
-    return attrs;
-  },
-
-  shortAttrIterator: function(elt)
-  {
-    let attrs = [];
-    if (elt.attributes) {
-      for (let i = 0; i < elt.attributes.length; ++i) {
-        let attr = elt.attributes[i];
-          if (attr.localName == "id" || attr.localName == "class")
-            attrs.push(attr);
-      }
-    }
-
-    return attrs;
-  },
-
-  getHidden: function(elt)
-  {
-    return isVisible(elt) ? "" : "nodeHidden";
-  },
-
-/* getXPath: function(elt)
-  {
-    return getElementTreeXPath(elt); // todo
-  }, */
-
-  getNodeTextGroups: function(element)
-  {
-    let text =  element.textContent;
-    return [{str: text, 'class': '', extra: ''}];
-  },
-
-  className: "element",
-
-  supportsObject: function(object, type)
-  {
-    return object instanceof DOM.Element;
-  },
-
-  browseObject: function(elt, context)
-  {
-    let tag = elt.localName.toLowerCase();
-    return true;
-  },
-});
-
-
-///////////////////////////////////////////////////////////////////////////
-//// HTMLTemplates.tags
-
-BaseTemplates.AttrTag =
-  domplate.SPAN({"class": "nodeAttr editGroup"},
-    "&nbsp;",
-    domplate.SPAN({"class": "nodeName editable"}, "$attr.nodeName"),
-    "=&quot;",
-    domplate.SPAN({"class": "nodeValue editable", "data-attributeName": "$attr.nodeName"}, "$attr.nodeValue"),
-    "&quot;");
-
-BaseTemplates.TextTag =
-  domplate.SPAN({"class": "nodeText editable"},
-    domplate.FOR("chr", "$object|getNodeTextGroups",
-      domplate.SPAN({"class": "$chr.class $chr.extra"},
-        "$chr.str")));
-
-///////////////////////////////////////////////////////////////////////////
-//// HTMLTemplates
-
-
-
-HTMLTemplates.CompleteElement = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class":
-        "nodeBox open $object|getHidden repIgnore",
-        _repObject: "$object", role : 'presentation'},
-      domplate.DIV({"class": "nodeLabel", role: "presentation"},
-        domplate.SPAN({"class": "nodeLabelBox repTarget repTarget",
-          role : 'treeitem', 'aria-expanded' : 'false'},
-          "&lt;",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          domplate.FOR("attr", "$object|attrIterator", BaseTemplates.AttrTag),
-          domplate.SPAN({"class": "nodeBracket"}, "&gt;")
-        )
-      ),
-      domplate.DIV({"class": "nodeChildBox", role :"group"},
-        domplate.FOR("child", "$object|childIterator",
-          domplate.TAG("$child|getNodeTag", {object: "$child"})
-        )
-      ),
-      domplate.DIV({"class": "nodeCloseLabel", role:"presentation"},
-        "&lt;/",
-        domplate.SPAN({"class": "nodeTag"},
-          "$object.nodeName|toLowerCase"),
-        "&gt;"
-      )
-    ),
-
-  getNodeTag: function(node)
-  {
-    return domplateUtils.getNodeTag(node, true);
-  },
-
-  childIterator: function(node)
-  {
-    if (node.contentDocument)
-      return [node.contentDocument.documentElement];
-
-    if (this.showTextNodesWithWhitespace)
-      return cloneArray(node.childNodes);
-    else {
-      let nodes = [];
-      for (let child = node.firstChild; child; child = child.nextSibling) {
-        if (child.nodeType != DOM.Node.TEXT_NODE || !domplateUtils.isWhitespaceText(child))
-          nodes.push(child);
-      }
-      return nodes;
-    }
-  }
-});
-
-HTMLTemplates.SoloElement = domplate(HTMLTemplates.CompleteElement,
-{
-  tag:
-    domplate.DIV({"class": "soloElement",
-      onmousedown: "$onMouseDown"},
-      HTMLTemplates.CompleteElement.tag),
-
-  onMouseDown: function(event)
-  {
-    for (let child = event.target; child; child = child.parentNode) {
-      if (child.repObject) { // todo
-          // let panel = Firebug.getElementPanel(child);
-          // Firebug.chrome.select(child.repObject);
-          break;
-      }
-    }
-  }
-});
-
-HTMLTemplates.Element = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class": "nodeBox containerNodeBox $object|getHidden repIgnore",
-      _repObject: "$object", role: "presentation"},
-      domplate.DIV({"class": "nodeLabel", role: "presentation"},
-        domplate.IMG({"class": "twisty", role: "presentation"}),
-        domplate.SPAN({"class": "nodeLabelBox repTarget",
-          role: 'treeitem', 'aria-expanded': 'false'},
-          "&lt;",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          domplate.FOR("attr", "$object|attrIterator", BaseTemplates.AttrTag),
-          domplate.SPAN({"class": "nodeBracket editable insertBefore"},
-            "&gt;")
-        )
-      ),
-      domplate.DIV({"class": "nodeChildBox", role: "group"}), /* nodeChildBox is special signal in insideOutBox */
-      domplate.DIV({"class": "nodeCloseLabel", role: "presentation"},
-        domplate.SPAN({"class": "nodeCloseLabelBox repTarget"},
-          "&lt;/",
-          domplate.SPAN({"class": "nodeTag"}, "$object.nodeName|toLowerCase"),
-          "&gt;"
-        )
-      )
-    )
-});
-
-HTMLTemplates.HTMLHtmlElement = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class":
-        "nodeBox htmlNodeBox containerNodeBox $object|getHidden repIgnore",
-        _repObject: "$object", role: "presentation"},
-      domplate.DIV({"class": "docType"},
-        "$object|getDocType"),
-      domplate.DIV({"class": "nodeLabel", role: "presentation"},
-        domplate.IMG({"class": "twisty", role: "presentation"}),
-        domplate.SPAN({"class": "nodeLabelBox repTarget",
-            role: 'treeitem', 'aria-expanded' : 'false'},
-          "&lt;",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          domplate.FOR("attr", "$object|attrIterator", BaseTemplates.AttrTag),
-          domplate.SPAN({"class":
-            "nodeBracket editable insertBefore"}, "&gt;")
-        )
-      ), /* nodeChildBox is special signal in insideOutBox */
-      domplate.DIV({"class": "nodeChildBox", role: "group"}),
-      domplate.DIV({"class": "nodeCloseLabel", role:  "presentation"},
-        domplate.SPAN({"class": "nodeCloseLabelBox repTarget"},
-          "&lt;/",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          "&gt;"
-        )
-      )
-    ),
-
-  getDocType: function(obj)
-  {
-    let doctype = obj.ownerDocument.doctype;
-    return '<!DOCTYPE ' + doctype.name + (doctype.publicId ? ' PUBLIC "' +
-      doctype.publicId + '"': '') + (doctype.systemId ? ' "' +
-      doctype.systemId + '"' : '') + '>';
-  }
-});
-
-HTMLTemplates.TextElement = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class":
-        "nodeBox textNodeBox $object|getHidden repIgnore",
-        _repObject: "$object", role: 'presentation'},
-      domplate.DIV({"class": "nodeLabel", role: "presentation"},
-        domplate.SPAN({"class": "nodeLabelBox repTarget",
-            role: 'treeitem'},
-          "&lt;",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          domplate.FOR("attr", "$object|attrIterator", BaseTemplates.AttrTag),
-          domplate.SPAN({"class":
-            "nodeBracket editable insertBefore"}, "&gt;"),
-          BaseTemplates.TextTag,
-          "&lt;/",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          "&gt;"
-        )
-      )
-    )
-});
-
-HTMLTemplates.EmptyElement = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class":
-        "nodeBox emptyNodeBox $object|getHidden repIgnore",
-        _repObject: "$object", role: 'presentation'},
-      domplate.DIV({"class": "nodeLabel", role: "presentation"},
-        domplate.SPAN({"class": "nodeLabelBox repTarget",
-            role: 'treeitem'},
-          "&lt;",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          domplate.FOR("attr", "$object|attrIterator", BaseTemplates.AttrTag),
-          domplate.SPAN({"class":
-            "nodeBracket editable insertBefore"}, "&gt;")
-        )
-      )
-    )
-});
-
-HTMLTemplates.XEmptyElement = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class":
-        "nodeBox emptyNodeBox $object|getHidden repIgnore",
-        _repObject: "$object", role: 'presentation'},
-      domplate.DIV({"class": "nodeLabel", role: "presentation"},
-        domplate.SPAN({"class": "nodeLabelBox repTarget",
-            role : 'treeitem'},
-          "&lt;",
-          domplate.SPAN({"class": "nodeTag"},
-            "$object.nodeName|toLowerCase"),
-          domplate.FOR("attr", "$object|attrIterator", BaseTemplates.AttrTag),
-          domplate.SPAN({"class":
-            "nodeBracket editable insertBefore"}, "/&gt;")
-        )
-      )
-    )
-});
-
-HTMLTemplates.AttrNode = domplate(BaseTemplates.Element,
-{
-  tag: BaseTemplates.AttrTag
-});
-
-HTMLTemplates.TextNode = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class": "nodeBox", _repObject: "$object",
-      role: 'presentation'}, BaseTemplates.TextTag)
-});
-
-HTMLTemplates.CDATANode = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class": "nodeBox", _repObject: "$object",
-      role: 'presentation'},
-        "&lt;![CDATA[",
-        domplate.SPAN({"class": "nodeText nodeCDATA editable"},
-          "$object.nodeValue"),
-        "]]&gt;")
-});
-
-HTMLTemplates.CommentNode = domplate(BaseTemplates.Element,
-{
-  tag:
-    domplate.DIV({"class": "nodeBox nodeComment",
-        _repObject: "$object", role : 'presentation'},
-      "&lt;!--",
-      domplate.SPAN({"class": "nodeComment editable"},
-        "$object.nodeValue"),
-      "--&gt;")
-});
-
-HTMLTemplates.Nada = domplate(BaseTemplates.Rep,
-{
-  tag: domplate.SPAN(""),
-  className: "nada"
-});
-
deleted file mode 100644
--- a/browser/devtools/highlighter/inspector.html
+++ /dev/null
@@ -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>
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -8,22 +8,22 @@ const Cc = Components.classes;
 const Cu = Components.utils;
 const Ci = Components.interfaces;
 const Cr = Components.results;
 
 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 = {
   // Fires once the Inspector completes the initialization and opens up on
   // screen.
   OPENED: "inspector-opened",
 
   // Fires once the Inspector is closed.
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -1,14 +1,13 @@
 # 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/.
 
 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)
     content/browser/devtools/HUDService-content.js (webconsole/HUDService-content.js)
     content/browser/devtools/webconsole.js        (webconsole/webconsole.js)
 *   content/browser/devtools/webconsole.xul       (webconsole/webconsole.xul)
 *   content/browser/scratchpad.xul                (scratchpad/scratchpad.xul)
     content/browser/scratchpad.js                 (scratchpad/scratchpad.js)
new file mode 100644
--- /dev/null
+++ b/browser/devtools/shared/DOMHelpers.jsm
@@ -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;
+  }
+};
deleted file mode 100644
--- a/browser/themes/gnomestripe/devtools/htmlpanel.css
+++ /dev/null
@@ -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;
-}
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -103,17 +103,16 @@ browser.jar:
   skin/classic/browser/devtools/commandline.png       (devtools/commandline.png)
   skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
   skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
   skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
   skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
   skin/classic/browser/devtools/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)
   skin/classic/browser/devtools/orion-task.png        (devtools/orion-task.png)
   skin/classic/browser/devtools/orion-breakpoint.png  (devtools/orion-breakpoint.png)
   skin/classic/browser/devtools/orion-debug-location.png (devtools/orion-debug-location.png)
   skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
   skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
deleted file mode 100644
--- a/browser/themes/pinstripe/devtools/htmlpanel.css
+++ /dev/null
@@ -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;
-}
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -168,17 +168,16 @@ browser.jar:
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
 * skin/classic/browser/devtools/common.css                  (devtools/common.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
   skin/classic/browser/devtools/commandline.png             (devtools/commandline.png)
   skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
   skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
   skin/classic/browser/devtools/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)
   skin/classic/browser/devtools/orion-task.png              (devtools/orion-task.png)
   skin/classic/browser/devtools/orion-breakpoint.png        (devtools/orion-breakpoint.png)
   skin/classic/browser/devtools/orion-debug-location.png    (devtools/orion-debug-location.png)
   skin/classic/browser/devtools/toolbarbutton-close.png     (devtools/toolbarbutton-close.png)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
deleted file mode 100644
--- a/browser/themes/winstripe/devtools/htmlpanel.css
+++ /dev/null
@@ -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;
-}
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -126,17 +126,16 @@ browser.jar:
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
         skin/classic/browser/devtools/common.css                    (devtools/common.css)
         skin/classic/browser/devtools/arrows.png                    (devtools/arrows.png)
         skin/classic/browser/devtools/commandline.png               (devtools/commandline.png)
         skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
         skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
         skin/classic/browser/devtools/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)
         skin/classic/browser/devtools/orion-task.png                (devtools/orion-task.png)
         skin/classic/browser/devtools/orion-breakpoint.png          (devtools/orion-breakpoint.png)
         skin/classic/browser/devtools/orion-debug-location.png      (devtools/orion-debug-location.png)
         skin/classic/browser/devtools/toolbarbutton-close.png       (devtools/toolbarbutton-close.png)
         skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
@@ -330,17 +329,16 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
         skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
         skin/classic/aero/browser/devtools/commandline.png           (devtools/commandline.png)
         skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
         skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
         skin/classic/aero/browser/devtools/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)
         skin/classic/aero/browser/devtools/orion-task.png            (devtools/orion-task.png)
         skin/classic/aero/browser/devtools/orion-breakpoint.png      (devtools/orion-breakpoint.png)
         skin/classic/aero/browser/devtools/orion-debug-location.png  (devtools/orion-debug-location.png)
         skin/classic/aero/browser/devtools/toolbarbutton-close.png   (devtools/toolbarbutton-close.png)
         skin/classic/aero/browser/devtools/webconsole.css                  (devtools/webconsole.css)