diff --git a/browser/base/Makefile.in b/browser/base/Makefile.in
index 1933342e952d..827ed2bc7eb3 100644
--- a/browser/base/Makefile.in
+++ b/browser/base/Makefile.in
@@ -56,7 +56,6 @@ endif
 EXTRA_JS_MODULES = \
 	content/openLocationLastURL.jsm \
 	content/NetworkPrioritizer.jsm \
-	content/domplate.jsm \
 	content/stylePanel.jsm \
 	$(NULL)
 
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 552ada67ce31..a18f45ce0a03 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -234,15 +234,13 @@
            onmousemove="InspectorUI.highlighter.handleMouseMove(event);"
            onMozMousePixelScroll="InspectorUI.highlighter.handlePixelScroll(event);"/>
 
-    <panel id="inspector-tree-panel"
+    <panel id="inspector-panel"
            orient="vertical"
            hidden="true"
            ignorekeys="true"
            noautofocus="true"
            noautohide="true"
            titlebar="normal"
-           close="true"
-           onpopuphiding="InspectorUI.closeInspectorUI(true);"
            label="&inspectPanelTitle.label;">
       <toolbar id="inspector-toolbar"
                nowindowdrag="true">
@@ -272,13 +270,20 @@
                        class="toolbarbutton-text"
                        oncommand="InspectorUI.toggleDOMPanel();"/>
       </toolbar>
-      <browser id="inspector-tree-browser"
-               flex="1"
-               type="content"
-               disablesecurity="true"
-               src="chrome://browser/content/inspector.html"
-               onclick="InspectorUI.onTreeClick(event);"
-               disablehistory="true" />
+      <tree id="inspector-tree" class="plain"
+            seltype="single"
+            treelines="true"
+            onselect="InspectorUI.onTreeSelected()"
+            flex="1">
+        <treecols>
+          <treecol id="colNodeName" label="nodeName" primary="true"
+                   persist="width,hidden,ordinal" flex="1"/>
+          <splitter class="tree-splitter"/>
+          <treecol id="colNodeValue" label="nodeValue"
+                   persist="width,hidden,ordinal" flex="1"/>
+        </treecols>
+        <treechildren id="inspector-tree-body"/>
+      </tree>
       <hbox align="end">
         <spacer flex="1" />
         <resizer dir="bottomend" />
diff --git a/browser/base/content/domplate.jsm b/browser/base/content/domplate.jsm
deleted file mode 100644
index 16ef0bf16f70..000000000000
--- a/browser/base/content/domplate.jsm
+++ /dev/null
@@ -1,1888 +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;
-};
-
-/**
- * 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"}, "$attr.nodeValue"),
-    "&quot;");
-
-BaseTemplates.TextTag =
-  domplate.SPAN({"class": "nodeText editable"},
-    domplate.FOR("char", "$object|getNodeTextGroups",
-      domplate.SPAN({"class": "$char.class $char.extra"},
-        "$char.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"
-});
-
diff --git a/browser/base/content/insideOutBox.js b/browser/base/content/insideOutBox.js
deleted file mode 100644
index e632a13eb2bb..000000000000
--- a/browser/base/content/insideOutBox.js
+++ /dev/null
@@ -1,639 +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).
- */
-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 objectBox
-   */
-  select:
-  function IOBox_select(aObject, makeBoxVisible, forceOpen, scrollIntoView)
-  {
-    let objectBox = this.createObjectBox(aObject);
-    this.selectObjectBox(objectBox, forceOpen);
-    if (makeBoxVisible) {
-      this.openObjectBox(objectBox);
-      if (scrollIntoView) {
-        objectBox.scrollIntoView(true);
-      }
-    }
-    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);
-    }
-  },
-
-  /**
-   * 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) {
-            InspectorUI._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;
-  },
-};
diff --git a/browser/base/content/inspector.html b/browser/base/content/inspector.html
deleted file mode 100644
index f37a7f610b1b..000000000000
--- a/browser/base/content/inspector.html
+++ /dev/null
@@ -1,11 +0,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/inspector.css" type="text/css"/>
-</head>
-<body role="application">
-</body>
-</html>
diff --git a/browser/base/content/inspector.js b/browser/base/content/inspector.js
index f9c2de2c8d40..01171936cb0e 100644
--- a/browser/base/content/inspector.js
+++ b/browser/base/content/inspector.js
@@ -41,8 +41,6 @@
  * ***** END LICENSE BLOCK ***** */
 #endif
 
-#include insideOutBox.js
-
 const INSPECTOR_INVISIBLE_ELEMENTS = {
   "head": true,
   "base": true,
@@ -274,7 +272,7 @@ PanelHighlighter.prototype = {
     let visibleWidth = this.win.innerWidth;
     let visibleHeight = this.win.innerHeight;
 
-    return ((0 <= aRect.left) && (aRect.right <= visibleWidth) &&
+    return ((0 <= aRect.left) && (aRect.right <= visibleWidth) && 
         (0 <= aRect.top) && (aRect.bottom <= visibleHeight))
   },
 
@@ -324,6 +322,169 @@ PanelHighlighter.prototype = {
   }
 };
 
+///////////////////////////////////////////////////////////////////////////
+//// InspectorTreeView
+
+/**
+ * TreeView object to manage the view of the DOM tree. Wraps and provides an
+ * interface to an inIDOMView object
+ *
+ * @param aWindow
+ *        a top-level window object
+ */
+function InspectorTreeView(aWindow)
+{
+  this.tree = document.getElementById("inspector-tree");
+  this.treeBody = document.getElementById("inspector-tree-body");
+  this.view = Cc["@mozilla.org/inspector/dom-view;1"]
+              .createInstance(Ci.inIDOMView);
+  this.view.showSubDocuments = true;
+  this.view.whatToShow = NodeFilter.SHOW_ALL;
+  this.tree.view = this.view;
+  this.contentWindow = aWindow;
+  this.view.rootNode = aWindow.document;
+  this.view.rebuild();
+}
+
+InspectorTreeView.prototype = {
+  get editable() { return false; },
+  get selection() { return this.view.selection; },
+
+  /**
+   * Destroy the view.
+   */
+  destroy: function ITV_destroy()
+  {
+    this.tree.view = null;
+    this.view = null;
+    this.tree = null;
+  },
+
+  /**
+   * Get the cell text at a given row and column.
+   *
+   * @param aRow
+   *        The row index of the desired cell.
+   * @param aCol
+   *        The column index of the desired cell.
+   * @returns string
+   */
+  getCellText: function ITV_getCellText(aRow, aCol)
+  {
+    return this.view.getCellText(aRow, aCol);
+  },
+
+  /**
+   * Get the index of the selected row.
+   *
+   * @returns number -1 if there is no row selected.
+   */
+  get selectionIndex()
+  {
+    return this.selection ? this.selection.currentIndex : -1;
+  },
+
+  /**
+   * Get the corresponding node for the currently-selected row in the tree.
+   *
+   * @returns DOMNode|null
+   */
+  get selectedNode()
+  {
+    let rowIndex = this.selectionIndex;
+    return rowIndex > -1 ? this.view.getNodeFromRowIndex(rowIndex) : null;
+  },
+
+  /**
+   * Set the selected row in the table to the specified index.
+   *
+   * @param anIndex
+   *        The index to set the selection to.
+   */
+  set selectedRow(anIndex)
+  {
+    this.view.selection.select(anIndex);
+    this.tree.treeBoxObject.ensureRowIsVisible(anIndex);
+  },
+
+  /**
+   * Set the selected node to the specified document node.
+   *
+   * @param aNode
+   *        The document node to select in the tree.
+   */
+  set selectedNode(aNode)
+  {
+    let rowIndex = this.view.getRowIndexFromNode(aNode);
+    if (rowIndex > -1) {
+      this.selectedRow = rowIndex;
+    } else {
+      this.selectElementInTree(aNode);
+    }
+  },
+
+  /**
+   * Select the given node in the tree, searching for and expanding rows
+   * as-needed.
+   *
+   * @param aNode
+   *        The document node to select in the three.
+   * @returns boolean
+   *          Whether a node was selected or not if not found.
+   */
+  selectElementInTree: function ITV_selectElementInTree(aNode)
+  {
+    if (!aNode) {
+      this.view.selection.select(null);
+      return false;      
+    }
+
+    // Keep searching until a pre-created ancestor is found, then 
+    // open each ancestor until the found element is created.
+    let domUtils = Cc["@mozilla.org/inspector/dom-utils;1"].
+                    getService(Ci.inIDOMUtils);
+    let line = [];
+    let parent = aNode;
+    let index = null;
+
+    while (parent) {
+      index = this.view.getRowIndexFromNode(parent);
+      line.push(parent);
+      if (index < 0) {
+        // Row for this node hasn't been created yet.
+        parent = domUtils.getParentForNode(parent,
+          this.view.showAnonymousContent);
+      } else {
+        break;
+      }
+    }
+
+    // We have all the ancestors, now open them one-by-one from the top
+    // to bottom.
+    let lastIndex;
+    let view = this.tree.treeBoxObject.view;
+
+    for (let i = line.length - 1; i >= 0; --i) {
+      index = this.view.getRowIndexFromNode(line[i]);
+      if (index < 0) {
+        // Can't find the row, so stop trying to descend.
+        break;
+      }
+      if (i > 0 && !view.isContainerOpen(index)) {
+        view.toggleOpenState(index);
+      }
+      lastIndex = index;
+    }
+
+    if (lastIndex >= 0) {
+      this.selectedRow = lastIndex;
+      return true;
+    }
+    
+    return false;
+  },
+};
+
 ///////////////////////////////////////////////////////////////////////////
 //// InspectorUI
 
@@ -333,7 +494,6 @@ PanelHighlighter.prototype = {
 var InspectorUI = {
   browser: null,
   selectEventsSuppressed: false,
-  showTextNodesWithWhitespace: false,
   inspecting: false,
 
   /**
@@ -344,7 +504,7 @@ var InspectorUI = {
    */
   toggleInspectorUI: function IUI_toggleInspectorUI(aEvent)
   {
-    if (this.isTreePanelOpen) {
+    if (this.isPanelOpen) {
       this.closeInspectorUI(true);
     } else {
       this.openInspectorUI();
@@ -373,8 +533,8 @@ var InspectorUI = {
       this.stylePanel.hidePopup();
     } else {
       this.openStylePanel();
-      if (this.selection) {
-        this.updateStylePanel(this.selection);
+      if (this.treeView.selectedNode) {
+        this.updateStylePanel(this.treeView.selectedNode);
       }
     }
   },
@@ -389,8 +549,8 @@ var InspectorUI = {
     } else {
       this.clearDOMPanel();
       this.openDOMPanel();
-      if (this.selection) {
-        this.updateDOMPanel(this.selection);
+      if (this.treeView.selectedNode) {
+        this.updateDOMPanel(this.treeView.selectedNode);
       }
     }
   },
@@ -400,7 +560,7 @@ var InspectorUI = {
    *
    * @returns boolean
    */
-  get isTreePanelOpen()
+  get isPanelOpen()
   {
     return this.treePanel && this.treePanel.state == "open";
   },
@@ -425,165 +585,26 @@ var InspectorUI = {
     return this.domPanel && this.domPanel.state == "open";
   },
 
-  /**
-   * Return the default selection element for the inspected document.
-   */
-  get defaultSelection()
-  {
-    let doc = this.win.document;
-    return doc.documentElement.lastElementChild;
-  },
-
   /**
    * Open the inspector's tree panel and initialize it.
    */
   openTreePanel: function IUI_openTreePanel()
   {
     if (!this.treePanel) {
-      this.treePanel = document.getElementById("inspector-tree-panel");
+      this.treePanel = document.getElementById("inspector-panel");
       this.treePanel.hidden = false;
     }
-
-    const panelWidthRatio = 7 / 8;
-    const panelHeightRatio = 1 / 5;
-    this.treePanel.openPopup(this.browser, "overlap", 80, this.win.innerHeight,
-      false, false);
-    this.treePanel.sizeTo(this.win.outerWidth * panelWidthRatio,
-      this.win.outerHeight * panelHeightRatio);
-
-    this.treeBrowser = document.getElementById("inspector-tree-browser");
-    let self = this;
-
-    this.treeBrowser.addEventListener("load", function() {
-      self.treeBrowser.removeEventListener("load", arguments.callee, true);
-      self.treeBrowserDocument = self.treeBrowser.contentDocument;
-      self.treePanelDiv = self.treeBrowserDocument.createElement("div");
-      self.treeBrowserDocument.body.appendChild(self.treePanelDiv);
-      self.treePanelDiv.ownerPanel = self;
-      self.ioBox = new InsideOutBox(self, self.treePanelDiv);
-      self.ioBox.createObjectBox(self.win.document.documentElement);
-
-      if (InspectorStore.hasID(self.winID)) {
-        let selectedNode = InspectorStore.getValue(self.winID, "selectedNode");
-        if (selectedNode) {
-          self.inspectNode(selectedNode);
-        }
-      } else {
-        InspectorStore.addStore(self.winID);
-        InspectorStore.setValue(self.winID, "selectedNode", null);
-        self.win.addEventListener("pagehide", self, true);
-      }
-
-      Services.obs.notifyObservers(null, "inspector-opened", null);
-    }, true);
-
-    this.treeBrowser.reload();
-  },
-
-  createObjectBox: function IUI_createObjectBox(object, isRoot)
-  {
-    let tag = this.domplateUtils.getNodeTag(object);
-    if (tag)
-      return tag.replace({object: object}, this.treeBrowserDocument);
-  },
-
-  getParentObject: function IUI_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 == 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 (!this.isPanelOpen) {
+      const panelWidthRatio = 7 / 8;
+      const panelHeightRatio = 1 / 5;
+      let bar = document.getElementById("status-bar");
+      this.treePanel.openPopupAtScreen(this.win.screenX + 80,
+        this.win.outerHeight + this.win.screenY);
+      this.treePanel.sizeTo(this.win.outerWidth * panelWidthRatio, 
+        this.win.outerHeight * panelHeightRatio);
+      this.tree = document.getElementById("inspector-tree");
+      this.createDocumentModel();
     }
-
-    if (parentNode.nodeType == Node.DOCUMENT_NODE) {
-      if (parentNode.defaultView) {
-        return parentNode.defaultView.frameElement;
-      }
-      if (this.embeddedBrowserParents) {
-        let skipParent = this.embeddedBrowserParents[node];
-        // HTML element? could be iframe?
-        if (skipParent)
-          return skipParent;
-      } else // parent is document element, but no window at defaultView.
-        return null;
-    } else if (!parentNode.localName) {
-      return null;
-    }
-    return parentNode;
-  },
-
-  getChildObject: function IUI_getChildObject(node, index, previousSibling)
-  {
-    if (!node)
-      return null;
-
-    if (node.contentDocument) {
-      // then the node is a frame
-      if (index == 0) {
-        if (!this.embeddedBrowserParents)
-          this.embeddedBrowserParents = {};
-        let skipChild = node.contentDocument.documentElement;
-        this.embeddedBrowserParents[skipChild] = node;
-        return skipChild;  // the node's HTMLElement
-      }
-      return null;
-    }
-
-    if (node instanceof GetSVGDocument) {
-      // then the node is a frame
-      if (index == 0) {
-        if (!this.embeddedBrowserParents)
-          this.embeddedBrowserParents = {};
-        let skipChild = node.getSVGDocument().documentElement;
-        this.embeddedBrowserParents[skipChild] = node;
-        return skipChild;  // 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 (this.showTextNodesWithWhitespace)
-      return child;
-
-    for (; child; child = this.getNextSibling(child)) {
-      if (!this.domplateUtils.isWhitespaceText(child))
-        return child;
-    }
-
-    return null;  // we have no children worth showing.
-  },
-
-  getFirstChild: function IUI_getFirstChild(node)
-  {
-    this.treeWalker = node.ownerDocument.createTreeWalker(node,
-      NodeFilter.SHOW_ALL, null, false);
-    return this.treeWalker.firstChild();
-  },
-
-  getNextSibling: function IUI_getNextSibling(node)
-  {
-    let next = this.treeWalker.nextSibling();
-
-    if (!next)
-      delete this.treeWalker;
-
-    return next;
   },
 
   /**
@@ -643,10 +664,6 @@ var InspectorUI = {
     this.browser = gBrowser.selectedBrowser;
     this.win = this.browser.contentWindow;
     this.winID = this.getWindowID(this.win);
-    if (!this.domplate) {
-      Cu.import("resource:///modules/domplate.jsm", this);
-      this.domplateUtils.setDOM(window);
-    }
 
     // DOM panel initialization and loading (via PropertyPanel.jsm)
     let objectPanelTitle = this.strings.
@@ -688,6 +705,17 @@ var InspectorUI = {
     if (InspectorStore.isEmpty()) {
       gBrowser.tabContainer.addEventListener("TabSelect", this, false);
     }
+
+    if (InspectorStore.hasID(this.winID)) {
+      let selectedNode = InspectorStore.getValue(this.winID, "selectedNode");
+      if (selectedNode) {
+        this.inspectNode(selectedNode);
+      }
+    } else {
+      InspectorStore.addStore(this.winID);
+      InspectorStore.setValue(this.winID, "selectedNode", null);
+      this.win.addEventListener("pagehide", this, true);
+    }
   },
 
   /**
@@ -708,21 +736,13 @@ var InspectorUI = {
    */
   closeInspectorUI: function IUI_closeInspectorUI(aClearStore)
   {
-    if (this.closing || !this.win || !this.browser) {
-      return;
-    }
-
-    this.closing = true;
-
     if (aClearStore) {
       InspectorStore.deleteStore(this.winID);
       this.win.removeEventListener("pagehide", this, true);
     } else {
       // Update the store before closing.
-      if (this.selection) {
-        InspectorStore.setValue(this.winID, "selectedNode",
-          this.selection);
-      }
+      InspectorStore.setValue(this.winID, "selectedNode",
+        this.treeView.selectedNode);
       InspectorStore.setValue(this.winID, "inspecting", this.inspecting);
     }
 
@@ -736,19 +756,10 @@ var InspectorUI = {
     if (this.highlighter && this.highlighter.isHighlighting) {
       this.highlighter.unhighlight();
     }
-
-    if (this.isTreePanelOpen)
+    if (this.isPanelOpen) {
       this.treePanel.hidePopup();
-    if (this.treePanelDiv) {
-      this.treePanelDiv.ownerPanel = null;
-      delete this.treePanelDiv;
-      delete this.treeBrowserDocument;
+      this.treeView.destroy();
     }
-
-    if (this.treeBrowser)
-      delete this.treeBrowser;
-    delete this.ioBox;
-
     if (this.isStylePanelOpen) {
       this.stylePanel.hidePopup();
     }
@@ -761,9 +772,6 @@ var InspectorUI = {
     this.inspectCmd.setAttribute("checked", false);
     this.browser = this.win = null; // null out references to browser and window
     this.winID = null;
-    this.selection = null;
-    this.closing = false;
-    Services.obs.notifyObservers(null, "inspector-closed", null);
   },
 
   /**
@@ -790,40 +798,23 @@ var InspectorUI = {
     this.inspecting = false;
     this.toggleDimForPanel(this.stylePanel);
     this.toggleDimForPanel(this.domPanel);
-    if (this.highlighter.node) {
-      this.select(this.highlighter.node, true, true);
-    }
-  },
-
-  /**
-   * Select an object in the tree view.
-   * @param aNode
-   *        node to inspect
-   * @param forceUpdate
-   *        force an update?
-   * @param aScroll
-   *        force scroll?
-   */
-  select: function IUI_select(aNode, forceUpdate, aScroll)
-  {
-    if (!aNode)
-      aNode = this.defaultSelection;
-
-    if (forceUpdate || aNode != this.selection) {
-      this.selection = aNode;
-      let box = this.ioBox.createObjectBox(this.selection);
-      if (!this.inspecting) {
-        this.highlighter.highlightNode(this.selection);
-        this.updateStylePanel(this.selection);
-        this.updateDOMPanel(this.selection);
-      }
-      this.ioBox.select(aNode, true, true, aScroll);
+    if (this.treeView.selection) {
+      this.updateStylePanel(this.treeView.selectedNode);
+      this.updateDOMPanel(this.treeView.selectedNode);
     }
   },
 
   /////////////////////////////////////////////////////////////////////////
   //// Model Creation Methods
 
+  /**
+   * Create treeView object from content window.
+   */
+  createDocumentModel: function IUI_createDocumentModel()
+  {
+    this.treeView = new InspectorTreeView(this.win);
+  },
+
   /**
    * Add a new item to the style panel listbox.
    *
@@ -888,8 +879,8 @@ var InspectorUI = {
   createStyleItems: function IUI_createStyleItems(aRules, aSections)
   {
     this.createStyleRuleItems(aRules);
-    let inheritedString =
-      this.strings.GetStringFromName("style.inheritedFrom");
+    let inheritedString = 
+        this.strings.GetStringFromName("style.inheritedFrom");
     aSections.forEach(function(section) {
       let sectionTitle = section.element.tagName;
       if (section.element.id)
@@ -963,25 +954,19 @@ var InspectorUI = {
   {
     let winID = null;
     let win = null;
-    let inspectorClosed = false;
 
     switch (event.type) {
       case "TabSelect":
         winID = this.getWindowID(gBrowser.selectedBrowser.contentWindow);
-        if (this.isTreePanelOpen && winID != this.winID) {
+        if (this.isPanelOpen && winID != this.winID) {
           this.closeInspectorUI(false);
-          inspectorClosed = true;
         }
 
         if (winID && InspectorStore.hasID(winID)) {
-          if (inspectorClosed && this.closing) {
-            Services.obs.addObserver(function () {
-              InspectorUI.openInspectorUI();
-            }, "inspector-closed", false);
-          } else {
-            this.openInspectorUI();
-          }
-        } else if (InspectorStore.isEmpty()) {
+          this.openInspectorUI();
+        }
+
+        if (InspectorStore.isEmpty()) {
           gBrowser.tabContainer.removeEventListener("TabSelect", this, false);
         }
         break;
@@ -1029,31 +1014,24 @@ var InspectorUI = {
   },
 
   /**
-   * Handle click events in the html tree panel.
-   * @param aEvent
-   *        The mouse event.
+   * Event fired when a tree row is selected in the tree panel.
    */
-  onTreeClick: function IUI_onTreeClick(aEvent)
+  onTreeSelected: function IUI_onTreeSelected()
   {
-    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 (this.selectEventsSuppressed) {
+      return false;
     }
 
-    if (node) {
-      if (hitTwisty)
-        this.ioBox.toggleObject(node);
-      this.select(node, false, false);
-    }
+    let node = this.treeView.selectedNode;
+    this.highlighter.highlightNode(node);
+    this.stopInspecting();
+    this.updateStylePanel(node);
+    this.updateDOMPanel(node);
+    return true;
   },
 
   /**
-   * Attach event listeners to content window and child windows to enable
+   * Attach event listeners to content window and child windows to enable 
    * highlighting and click to stop inspection.
    */
   attachPageListeners: function IUI_attachPageListeners()
@@ -1088,14 +1066,14 @@ var InspectorUI = {
   {
     this.highlighter.highlightNode(aNode);
     this.selectEventsSuppressed = true;
-    this.select(aNode, true, true);
+    this.treeView.selectedNode = aNode;
     this.selectEventsSuppressed = false;
     this.updateStylePanel(aNode);
     this.updateDOMPanel(aNode);
   },
 
   /**
-   * Find an element from the given coordinates. This method descends through
+   * Find an element from the given coordinates. This method descends through 
    * frames to find the element the user clicked inside frames.
    *
    * @param DOMDocument aDocument the document to look into.
@@ -1126,47 +1104,6 @@ var InspectorUI = {
   ///////////////////////////////////////////////////////////////////////////
   //// Utility functions
 
-  /**
-   * Does the given object have a class attribute?
-   * @param aNode
-   *        the DOM node.
-   * @param aClass
-   *        The class string.
-   * @returns boolean
-   */
-  hasClass: function IUI_hasClass(aNode, aClass)
-  {
-    if (!(aNode instanceof 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 IUI_addClass(aNode, aClass)
-  {
-    if (aNode instanceof 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 IUI_removeClass(aNode, aClass)
-  {
-    if (aNode instanceof Element)
-      aNode.classList.remove(aClass);
-  },
-
   /**
    * Retrieve the unique ID of a window object.
    *
@@ -1190,32 +1127,7 @@ var InspectorUI = {
   },
 
   /**
-   * 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 IUI_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;
-  },
-
-  /**
+   * debug logging facility
    * @param msg
    *        text message to send to the log
    */
diff --git a/browser/base/content/stylePanel.jsm b/browser/base/content/stylePanel.jsm
index 21d8ceb1a1d8..f53a63d29b77 100644
--- a/browser/base/content/stylePanel.jsm
+++ b/browser/base/content/stylePanel.jsm
@@ -312,4 +312,3 @@ var style = {
     }
   },
 };
-
diff --git a/browser/base/content/test/Makefile.in b/browser/base/content/test/Makefile.in
index b17bcad774e2..62fe5b1628b1 100644
--- a/browser/base/content/test/Makefile.in
+++ b/browser/base/content/test/Makefile.in
@@ -161,9 +161,6 @@ _BROWSER_FILES = \
                  browser_inspector_scrolling.js \
                  browser_inspector_store.js \
                  browser_inspector_tab_switch.js \
-                 browser_inspector_treePanel_output.js \
-                 browser_inspector_treePanel_input.html \
-                 browser_inspector_treePanel_result.html \
                  browser_pageInfo.js \
                  browser_page_style_menu.js \
                  browser_pinnedTabs.js \
@@ -185,7 +182,6 @@ _BROWSER_FILES = \
                  browser_visibleTabs_bookmarkAllTabs.js \
                  browser_visibleTabs_tabPreview.js \
                  discovery.html \
-                 domplate_test.js \
                  moz.png \
                  test_bug435035.html \
                  test_bug462673.html \
@@ -201,7 +197,7 @@ _BROWSER_FILES = \
                  browser_tabMatchesInAwesomebar.js \
                  file_bug550565_popup.html \
                  file_bug550565_favicon.ico \
-                 $(NULL)
+    $(NULL)
 
 ifneq (cocoa,$(MOZ_WIDGET_TOOLKIT))
 _BROWSER_FILES += \
diff --git a/browser/base/content/test/browser_inspector_domPanel.js b/browser/base/content/test/browser_inspector_domPanel.js
index e2e3eb26be87..3055ec63b311 100644
--- a/browser/base/content/test/browser_inspector_domPanel.js
+++ b/browser/base/content/test/browser_inspector_domPanel.js
@@ -56,7 +56,7 @@ function createDocument()
     '<p id="closing">end transmission</p>\n' +
     '</div>';
   doc.title = "Inspector DOM Test";
-  Services.obs.addObserver(runDOMTests, "inspector-opened", false);
+  document.addEventListener("popupshown", runDOMTests, false);
   InspectorUI.openInspectorUI();
 }
 
@@ -71,17 +71,19 @@ function nodeGenerator()
   let first = doc.getElementById("first");
   InspectorUI.inspectNode(first);
   yield;
-  let closing = doc.getElementById("closing");
+  let closing = doc.getElementById("#closing");
   InspectorUI.inspectNode(closing);
   yield;
 }
 
-function runDOMTests()
+function runDOMTests(evt)
 {
+  if (evt.target.id != "inspector-dom-panel")
+    return true;
   InspectorUI._log("runDOMtests");
-  Services.obs.removeObserver(runDOMTests, "inspector-opened", false);
-  document.addEventListener("popupshown", performTestComparisons, false);
+  document.removeEventListener("popupshown", runDOMTests, false);
   InspectorUI.stopInspecting();
+  document.addEventListener("popupshown", performTestComparisons, false);
   testGen = nodeGenerator();
   testGen.next();
 }
@@ -92,7 +94,7 @@ function performTestComparisons(evt)
   if (evt.target.id != "highlighter-panel")
     return true;
 
-  ok(InspectorUI.selection, "selection");
+  ok(InspectorUI.treeView.selectedNode, "selection");
   ok(InspectorUI.isDOMPanelOpen, "DOM panel is open?");
   ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
   ok(InspectorUI.domTreeView.rowCount > 0, "domBox has items");
diff --git a/browser/base/content/test/browser_inspector_highlighter.js b/browser/base/content/test/browser_inspector_highlighter.js
index 82b2cab9fac5..826b14308934 100644
--- a/browser/base/content/test/browser_inspector_highlighter.js
+++ b/browser/base/content/test/browser_inspector_highlighter.js
@@ -78,13 +78,15 @@ function setupHighlighterTests()
 {
   h1 = doc.querySelectorAll("h1")[0];
   ok(h1, "we have the header node");
-  Services.obs.addObserver(runSelectionTests, "inspector-opened", false);
+  document.addEventListener("popupshown", runSelectionTests, false);
   InspectorUI.toggleInspectorUI();
 }
 
-function runSelectionTests()
+function runSelectionTests(evt)
 {
-  Services.obs.removeObserver(runSelectionTests, "inspector-opened", false);
+  if (evt.target.id != "inspector-panel")
+    return true;
+  document.removeEventListener("popupshown", runSelectionTests, false);
   document.addEventListener("popupshown", performTestComparisons, false);
   EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
 }
@@ -94,7 +96,7 @@ function performTestComparisons(evt)
   if (evt.target.id != "highlighter-panel")
     return true;
   document.removeEventListener("popupshown", performTestComparisons, false);
-  is(h1, InspectorUI.selection, "selection matches node");
+  is(h1, InspectorUI.treeView.selectedNode, "selection matches node");
   ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
   is(InspectorUI.highlighter.highlitNode, h1, "highlighter matches selection");
   executeSoon(finishUp);
diff --git a/browser/base/content/test/browser_inspector_iframeTest.js b/browser/base/content/test/browser_inspector_iframeTest.js
index 3ff84f853c5d..ddcc8ed35e36 100644
--- a/browser/base/content/test/browser_inspector_iframeTest.js
+++ b/browser/base/content/test/browser_inspector_iframeTest.js
@@ -79,27 +79,30 @@ function createDocument()
 
 function setupIframeTests()
 {
-  Services.obs.addObserver(runIframeTests, "inspector-opened", false);
-  InspectorUI.openInspectorUI();
+  document.addEventListener("popupshown", runIframeTests, false);
+  InspectorUI.toggleInspectorUI();
 }
 
-function runIframeTests()
+function runIframeTests(evt)
 {
-  Services.obs.removeObserver(runIframeTests, "inspector-opened", false);
+  if (evt.target.id != "inspector-panel")
+    return true;
+
+  document.removeEventListener("popupshown", runIframeTests, false);
   document.addEventListener("popupshown", performTestComparisons1, false);
+
   EventUtils.synthesizeMouse(div1, 2, 2, {type: "mousemove"},
     iframe1.contentWindow);
 }
 
 function performTestComparisons1(evt)
 {
-  if (evt.target.id != "highlighter-panel") {
+  if (evt.target.id != "highlighter-panel")
     return true;
-  }
 
-  document.removeEventListener(evt.type, arguments.callee, false);
+  document.removeEventListener("popupshown", performTestComparisons1, false);
 
-  is(InspectorUI.selection, div1, "selection matches div1 node");
+  is(InspectorUI.treeView.selectedNode, div1, "selection matches div1 node");
   is(InspectorUI.highlighter.highlitNode, div1, "highlighter matches selection");
 
   document.addEventListener("popupshown", performTestComparisons2, false);
@@ -110,13 +113,12 @@ function performTestComparisons1(evt)
 
 function performTestComparisons2(evt)
 {
-  if (evt.target.id != "highlighter-panel") {
+  if (evt.target.id != "highlighter-panel")
     return true;
-  }
 
-  document.removeEventListener(evt.type, arguments.callee, false);
+  document.removeEventListener("popupshown", performTestComparisons2, false);
 
-  is(InspectorUI.selection, div2, "selection matches div2 node");
+  is(InspectorUI.treeView.selectedNode, div2, "selection matches div2 node");
   is(InspectorUI.highlighter.highlitNode, div2, "highlighter matches selection");
 
   executeSoon(finishUp);
@@ -137,7 +139,7 @@ function test()
     doc = content.document;
     waitForFocus(createDocument, content);
   }, true);
-
+  
   content.location = "data:text/html,iframe tests for inspector";
 }
 
diff --git a/browser/base/content/test/browser_inspector_initialization.js b/browser/base/content/test/browser_inspector_initialization.js
index dfa493985cec..71e132aa9ab4 100644
--- a/browser/base/content/test/browser_inspector_initialization.js
+++ b/browser/base/content/test/browser_inspector_initialization.js
@@ -42,27 +42,31 @@ let doc;
 function startInspectorTests()
 {
   ok(InspectorUI, "InspectorUI variable exists");
-  Services.obs.addObserver(runInspectorTests, "inspector-opened", false);
+  document.addEventListener("popupshown", runInspectorTests, false);
   InspectorUI.toggleInspectorUI();
 }
 
-function runInspectorTests()
+function runInspectorTests(evt)
 {
-  Services.obs.removeObserver(runInspectorTests, "inspector-opened", false);
-  Services.obs.addObserver(finishInspectorTests, "inspector-closed", false);
+  if (evt.target.id != "inspector-dom-panel")
+    return true;
+  document.removeEventListener("popupshown", runInspectorTests, false);
+  document.addEventListener("popuphidden", finishInspectorTests, false);
   ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  ok(InspectorUI.isPanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
   ok(InspectorUI.isDOMPanelOpen, "Inspector DOM Panel is open");
   InspectorUI.toggleInspectorUI();
 }
 
-function finishInspectorTests()
+function finishInspectorTests(evt)
 {
-  Services.obs.removeObserver(finishInspectorTests, "inspector-closed", false);
+  if (evt.target.id != "inspector-dom-panel")
+    return true;
+  document.removeEventListener("popuphidden", finishInspectorTests, false);
   ok(!InspectorUI.isDOMPanelOpen, "Inspector DOM Panel is closed");
   ok(!InspectorUI.isStylePanelOpen, "Inspector Style Panel is closed");
-  ok(!InspectorUI.isTreePanelOpen, "Inspector Tree Panel is closed");
+  ok(!InspectorUI.isPanelOpen, "Inspector Tree Panel is closed");
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
   gBrowser.removeCurrentTab();
   finish();
diff --git a/browser/base/content/test/browser_inspector_scrolling.js b/browser/base/content/test/browser_inspector_scrolling.js
index 8bcc60ead766..69feaa30e221 100644
--- a/browser/base/content/test/browser_inspector_scrolling.js
+++ b/browser/base/content/test/browser_inspector_scrolling.js
@@ -65,13 +65,17 @@ function createDocument()
 
 function toggleInspector()
 {
-  Services.obs.addObserver(inspectNode, "inspector-opened", false);
+  document.addEventListener("popupshown", inspectNode, false);
   InspectorUI.toggleInspectorUI();
 }
 
-function inspectNode()
+function inspectNode(aEvent)
 {
-  Services.obs.removeObserver(inspectNode, "inspector-opened", false);
+  if (aEvent.target.id != "inspector-panel") {
+    return true;
+  }
+
+  document.removeEventListener("popupshown", inspectNode, false);
   document.addEventListener("popupshown", performScrollingTest, false);
 
   InspectorUI.inspectNode(div)
diff --git a/browser/base/content/test/browser_inspector_stylePanel.js b/browser/base/content/test/browser_inspector_stylePanel.js
index d4d2e7d165f2..fd06ccef16d9 100644
--- a/browser/base/content/test/browser_inspector_stylePanel.js
+++ b/browser/base/content/test/browser_inspector_stylePanel.js
@@ -64,7 +64,7 @@ function setupStyleTests()
 {
   spans = doc.querySelectorAll("span");
   ok(spans, "captain, we have the spans");
-  Services.obs.addObserver(runStyleTests, "inspector-opened", false);
+  document.addEventListener("popupshown", runStyleTests, false);
   InspectorUI.openInspectorUI();
 }
 
@@ -76,9 +76,11 @@ function spanGenerator()
   }
 }
 
-function runStyleTests()
+function runStyleTests(evt)
 {
-  Services.obs.removeObserver(runStyleTests, "inspector-opened", false);
+  if (evt.target.id != "inspector-style-panel")
+    return true;
+  document.removeEventListener("popupshown", runStyleTests, false);
   document.addEventListener("popupshown", performTestComparisons, false);
   InspectorUI.stopInspecting();
   testGen = spanGenerator();
@@ -90,7 +92,7 @@ function performTestComparisons(evt)
   if (evt.target.id != "highlighter-panel")
     return true;
 
-  ok(InspectorUI.selection, "selection");
+  ok(InspectorUI.treeView.selectedNode, "selection");
   ok(InspectorUI.isStylePanelOpen, "style panel is open?");
   ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
   ok(InspectorUI.styleBox.itemCount > 0, "styleBox has items");
diff --git a/browser/base/content/test/browser_inspector_tab_switch.js b/browser/base/content/test/browser_inspector_tab_switch.js
index 07980d051f12..a77c13dd430f 100644
--- a/browser/base/content/test/browser_inspector_tab_switch.js
+++ b/browser/base/content/test/browser_inspector_tab_switch.js
@@ -49,17 +49,21 @@ function inspectorTabOpen1()
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
   ok(InspectorStore.isEmpty(), "InspectorStore is empty");
 
-  Services.obs.addObserver(inspectorUIOpen1, "inspector-opened", false);
-  InspectorUI.openInspectorUI();
+  document.addEventListener("popupshown", inspectorUIOpen1, false);
+  InspectorUI.toggleInspectorUI();
 }
 
-function inspectorUIOpen1()
+function inspectorUIOpen1(evt)
 {
-  Services.obs.removeObserver(inspectorUIOpen1, "inspector-opened", false);
+  if (evt.target.id != "inspector-style-panel") {
+    return true;
+  }
+
+  document.removeEventListener(evt.type, arguments.callee, false);
 
   // Make sure the inspector is open.
   ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  ok(InspectorUI.isPanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
   ok(!InspectorStore.isEmpty(), "InspectorStore is not empty");
   is(InspectorStore.length, 1, "InspectorStore.length = 1");
@@ -67,7 +71,8 @@ function inspectorUIOpen1()
   // Highlight a node.
   div = content.document.getElementsByTagName("div")[0];
   InspectorUI.inspectNode(div);
-  is(InspectorUI.selection, div, "selection matches the div element");
+  is(InspectorUI.treeView.selectedNode, div,
+    "selection matches the div element");
 
   // Open the second tab.
   tab2 = gBrowser.addTab();
@@ -90,17 +95,21 @@ function inspectorTabOpen2()
   is(InspectorStore.length, 1, "InspectorStore.length = 1");
 
   // Activate the inspector again.
-  Services.obs.addObserver(inspectorUIOpen2, "inspector-opened", false);
-  InspectorUI.openInspectorUI();
+  document.addEventListener("popupshown", inspectorUIOpen2, false);
+  InspectorUI.toggleInspectorUI();
 }
 
-function inspectorUIOpen2()
+function inspectorUIOpen2(evt)
 {
-  Services.obs.removeObserver(inspectorUIOpen2, "inspector-opened", false);
+  if (evt.target.id != "inspector-style-panel") {
+    return true;
+  }
+
+  document.removeEventListener(evt.type, arguments.callee, false);
 
   // Make sure the inspector is open.
   ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  ok(InspectorUI.isPanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
   is(InspectorStore.length, 2, "InspectorStore.length = 2");
 
@@ -109,40 +118,50 @@ function inspectorUIOpen2()
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
 
   // Switch back to tab 1.
-  Services.obs.addObserver(inspectorFocusTab1, "inspector-opened", false);
+  document.addEventListener("popupshown", inspectorFocusTab1, false);
   gBrowser.selectedTab = tab1;
 }
 
-function inspectorFocusTab1()
+function inspectorFocusTab1(evt)
 {
-  Services.obs.removeObserver(inspectorFocusTab1, "inspector-opened", false);
+  if (evt.target.id != "inspector-style-panel") {
+    return true;
+  }
+
+  document.removeEventListener(evt.type, arguments.callee, false);
 
   // Make sure the inspector is still open.
   ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  ok(InspectorUI.isPanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
   is(InspectorStore.length, 2, "InspectorStore.length = 2");
-  is(InspectorUI.selection, div, "selection matches the div element");
+  is(InspectorUI.treeView.selectedNode, div,
+    "selection matches the div element");
 
   // Switch back to tab 2.
-  Services.obs.addObserver(inspectorFocusTab2, "inspector-opened", false);
+  document.addEventListener("popupshown", inspectorFocusTab2, false);
   gBrowser.selectedTab = tab2;
 }
 
-function inspectorFocusTab2()
+function inspectorFocusTab2(evt)
 {
-  Services.obs.removeObserver(inspectorFocusTab2, "inspector-opened", false);
+  if (evt.target.id != "inspector-style-panel") {
+    return true;
+  }
+
+  document.removeEventListener(evt.type, arguments.callee, false);
 
   // Make sure the inspector is still open.
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  ok(InspectorUI.isPanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
   is(InspectorStore.length, 2, "InspectorStore.length = 2");
-  isnot(InspectorUI.selection, div, "selection does not match the div element");
+  isnot(InspectorUI.treeView.selectedNode, div,
+    "selection does not match the div element");
 
   // Remove tab 1.
   tab1window = gBrowser.getBrowserForTab(tab1).contentWindow;
-  tab1window.addEventListener("pagehide", inspectorTabUnload1, false);
+  tab1window.addEventListener("unload", inspectorTabUnload1, false);
   gBrowser.removeTab(tab1);
 }
 
@@ -153,7 +172,7 @@ function inspectorTabUnload1(evt)
 
   // Make sure the Inspector is still open and that the state is correct.
   ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
+  ok(InspectorUI.isPanelOpen, "Inspector Tree Panel is open");
   ok(InspectorUI.isStylePanelOpen, "Inspector Style Panel is open");
   is(InspectorStore.length, 1, "InspectorStore.length = 1");
 
diff --git a/browser/base/content/test/browser_inspector_treePanel_input.html b/browser/base/content/test/browser_inspector_treePanel_input.html
deleted file mode 100644
index 64b3d367bb39..000000000000
--- a/browser/base/content/test/browser_inspector_treePanel_input.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html xml:lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Inspector tree panel test</title>
-    <style type="text/css"><!--
-      #duplicate { color: green }
-    --></style>
-    <script type="text/javascript"><!--
-      function fooBarBaz(arg1) {
-        return true; // do nothing
-      }
-    // --></script>
-  </head>
-  <body arbitrary:attribute="value">
-    <p>Inspector tree panel test.</p>
-
-    <div id="foo" class="foo bar baz" style="border:1px solid red; 
-      unknownProperty: unknownValue; color: withUnkownValue">
-      <unknownTag unknownAttribute="fooBar">
-        <p unknownAttribute="fooBar" data-test1="value">hello world!</p>
-      </unknownTag>
-    </div>
-
-    <div id="duplicate" id="duplicate" id="different" class="test" class="foo" 
-      fooBar="baz" fooBar="bazbaz">test</div>
-
-    <iframe src="data:text/html,&lt;div&gt;hello from an iframe!&lt;/div&gt;">no 
-      frames!</iframe>
-
-    <!-- hello world from a comment! -->
-  </body>
-</html>
diff --git a/browser/base/content/test/browser_inspector_treePanel_output.js b/browser/base/content/test/browser_inspector_treePanel_output.js
deleted file mode 100644
index e2b729950d7e..000000000000
--- a/browser/base/content/test/browser_inspector_treePanel_output.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-/* ***** BEGIN LICENSE BLOCK *****
- * Version: MPL 1.1/GPL 2.0/LGPL 2.1
- *
- * The contents of this file are subject to the Mozilla Public License Version
- * 1.1 (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- * http://www.mozilla.org/MPL/
- *
- * Software distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- * for the specific language governing rights and limitations under the
- * License.
- *
- * The Original Code is Inspector iframe Tests.
- *
- * The Initial Developer of the Original Code is
- * The Mozilla Foundation.
- * Portions created by the Initial Developer are Copyright (C) 2010
- * the Initial Developer. All Rights Reserved.
- *
- * Contributor(s):
- *   Mihai Șucan <mihai.sucan@gmail.com>
- *   Rob Campbell <rcampbell@mozilla.com>
- *
- * Alternatively, the contents of this file may be used under the terms of
- * either the GNU General Public License Version 2 or later (the "GPL"), or
- * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
- * in which case the provisions of the GPL or the LGPL are applicable instead
- * of those above. If you wish to allow use of your version of this file only
- * under the terms of either the GPL or the LGPL, and not to allow others to
- * use your version of this file under the terms of the MPL, indicate your
- * decision by deleting the provisions above and replace them with the notice
- * and other provisions required by the GPL or the LGPL. If you do not delete
- * the provisions above, a recipient may use your version of this file under
- * the terms of any one of the MPL, the GPL or the LGPL.
- *
- * ***** END LICENSE BLOCK ***** */
-
-let doc = null;
-let xhr = null;
-let expectedResult = "";
-
-const TEST_URI = "http://mochi.test:8888/browser/browser/base/content/test/browser_inspector_treePanel_input.html";
-const RESULT_URI = "http://mochi.test:8888/browser/browser/base/content/test/browser_inspector_treePanel_result.html";
-
-function tabFocused()
-{
-  xhr = new XMLHttpRequest();
-  xhr.onreadystatechange = xhr_onReadyStateChange;
-  xhr.open("GET", RESULT_URI, true);
-  xhr.send(null);
-}
-
-function xhr_onReadyStateChange() {
-  if (xhr.readyState != 4) {
-    return;
-  }
-
-  is(xhr.status, 200, "xhr.status is 200");
-  ok(!!xhr.responseText, "xhr.responseText is available");
-  expectedResult = xhr.responseText.replace(/^\s+|\s+$/mg, '');
-  xhr = null;
-
-  Services.obs.addObserver(inspectorOpened, "inspector-opened", false);
-  InspectorUI.openInspectorUI();
-}
-
-function inspectorOpened()
-{
-  Services.obs.removeObserver(inspectorOpened, "inspector-opened", false);
-
-  ok(InspectorUI.inspecting, "Inspector is highlighting");
-  ok(InspectorUI.isTreePanelOpen, "Inspector Tree Panel is open");
-  InspectorUI.stopInspecting();
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-
-  let elements = doc.querySelectorAll("meta, script, style, p[unknownAttribute]");
-  for (let i = 0; i < elements.length; i++) {
-    InspectorUI.inspectNode(elements[i]);
-  }
-
-  let iframe = doc.querySelector("iframe");
-  ok(iframe, "Found the iframe tag");
-  ok(iframe.contentDocument, "Found the iframe.contentDocument");
-
-  let iframeDiv = iframe.contentDocument.querySelector("div");
-  ok(iframeDiv, "Found the div element inside the iframe");
-  InspectorUI.inspectNode(iframeDiv);
-
-  ok(InspectorUI.treePanelDiv, "InspectorUI.treePanelDiv is available");
-  is(InspectorUI.treePanelDiv.innerHTML.replace(/^\s+|\s+$/mg, ''),
-    expectedResult, "treePanelDiv.innerHTML is correct");
-  expectedResult = null;
-
-  Services.obs.addObserver(inspectorClosed, "inspector-closed", false);
-  InspectorUI.closeInspectorUI();
-}
-
-function inspectorClosed()
-{
-  Services.obs.removeObserver(inspectorClosed, "inspector-closed", false);
-
-  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
-  ok(!InspectorUI.isTreePanelOpen, "Inspector Tree Panel is not open");
-
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
-    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
-    doc = content.document;
-    waitForFocus(tabFocused, content);
-  }, true);
-  
-  content.location = TEST_URI;
-}
diff --git a/browser/base/content/test/browser_inspector_treePanel_result.html b/browser/base/content/test/browser_inspector_treePanel_result.html
deleted file mode 100644
index 1156a1f251ed..000000000000
--- a/browser/base/content/test/browser_inspector_treePanel_result.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div role="presentation" class="nodeBox htmlNodeBox containerNodeBox  repIgnore open"><div class="docType ">&lt;!DOCTYPE html&gt;</div><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">html</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">xml:lang</span>="<span class="nodeValue editable ">en</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">head</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox emptyNodeBox  repIgnore"><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">meta</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">charset</span>="<span class="nodeValue editable ">utf-8</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div></div><div role="presentation" class="nodeBox textNodeBox  repIgnore "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">title</span><span class="nodeBracket editable insertBefore ">&gt;</span><span class="nodeText editable "><span class="  ">Inspector tree panel test</span></span>&lt;/<span class="nodeTag ">title</span>&gt;</span></div></div><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">style</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text/css</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox "><span class="nodeText editable "><span class="  ">&lt;!--
-#duplicate { color: green }
---&gt;</span></span></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">style</span>&gt;</span></div></div><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">script</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text/javascript</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox "><span class="nodeText editable "><span class="  ">&lt;!--
-function fooBarBaz(arg1) {
-return true; // do nothing
-}
-// --&gt;</span></span></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">script</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">head</span>&gt;</span></div></div><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">body</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">arbitrary:attribute</span>="<span class="nodeValue editable ">value</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox textNodeBox  repIgnore "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">p</span><span class="nodeBracket editable insertBefore ">&gt;</span><span class="nodeText editable "><span class="  ">Inspector tree panel test.</span></span>&lt;/<span class="nodeTag ">p</span>&gt;</span></div></div><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">div</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">id</span>="<span class="nodeValue editable ">foo</span>"</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">class</span>="<span class="nodeValue editable ">foo bar baz</span>"</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">style</span>="<span class="nodeValue editable ">border:1px solid red;
-unknownProperty: unknownValue; color: withUnkownValue</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">unknowntag</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">unknownattribute</span>="<span class="nodeValue editable ">fooBar</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox textNodeBox  repIgnore"><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">p</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">data-test1</span>="<span class="nodeValue editable ">value</span>"</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">unknownattribute</span>="<span class="nodeValue editable ">fooBar</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span><span class="nodeText editable "><span class="  ">hello world!</span></span>&lt;/<span class="nodeTag ">p</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">unknowntag</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">div</span>&gt;</span></div></div><div role="presentation" class="nodeBox textNodeBox  repIgnore "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">div</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">id</span>="<span class="nodeValue editable ">duplicate</span>"</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">class</span>="<span class="nodeValue editable ">test</span>"</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">foobar</span>="<span class="nodeValue editable ">baz</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span><span class="nodeText editable "><span class="  ">test</span></span>&lt;/<span class="nodeTag ">div</span>&gt;</span></div></div><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">iframe</span><span class="nodeAttr editGroup ">&nbsp;<span class="nodeName editable ">src</span>="<span class="nodeValue editable ">data:text/html,&lt;div&gt;hello from an iframe!&lt;/div&gt;</span>"</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">html</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox textNodeBox  repIgnore "><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">head</span><span class="nodeBracket editable insertBefore ">&gt;</span><span class="nodeText editable "><span class="  "></span></span>&lt;/<span class="nodeTag ">head</span>&gt;</span></div></div><div role="presentation" class="nodeBox containerNodeBox  repIgnore open"><div role="presentation" class="nodeLabel "><img role="presentation" class="twisty "><span role="treeitem" aria-expanded="true" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">body</span><span class="nodeBracket editable insertBefore ">&gt;</span></span></div><div role="group" class="nodeChildBox "><div role="presentation" class="nodeBox textNodeBox  repIgnore selected"><div role="presentation" class="nodeLabel "><span role="treeitem" class="nodeLabelBox repTarget ">&lt;<span class="nodeTag ">div</span><span class="nodeBracket editable insertBefore ">&gt;</span><span class="nodeText editable "><span class="  ">hello from an iframe!</span></span>&lt;/<span class="nodeTag ">div</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">body</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">html</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">iframe</span>&gt;</span></div></div><div role="presentation" class="nodeBox nodeComment ">&lt;!--<span class="nodeComment editable "> hello world from a comment! </span>--&gt;</div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">body</span>&gt;</span></div></div></div><div role="presentation" class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&lt;/<span class="nodeTag ">html</span>&gt;</span></div></div>
diff --git a/browser/base/content/test/browser_inspector_treeSelection.js b/browser/base/content/test/browser_inspector_treeSelection.js
index 9f328d69e29f..6da08547f307 100644
--- a/browser/base/content/test/browser_inspector_treeSelection.js
+++ b/browser/base/content/test/browser_inspector_treeSelection.js
@@ -68,16 +68,18 @@ function setupSelectionTests()
 {
   h1 = doc.querySelectorAll("h1")[0];
   ok(h1, "we have the header node");
-  Services.obs.addObserver(runSelectionTests, "inspector-opened", false);
+  document.addEventListener("popupshown", runSelectionTests, false);
   InspectorUI.openInspectorUI();
 }
 
-function runSelectionTests()
+function runSelectionTests(evt)
 {
-  Services.obs.removeObserver(runSelectionTests, "inspector-opened", false);
+  if (evt.target.id != "inspector-panel")
+    return true;
+  document.removeEventListener("popupshown", runSelectionTests, false);
   InspectorUI.stopInspecting();
   document.addEventListener("popupshown", performTestComparisons, false);
-  InspectorUI.inspectNode(h1);
+  InspectorUI.treeView.selectedNode = h1;
 }
 
 function performTestComparisons(evt)
@@ -85,7 +87,7 @@ function performTestComparisons(evt)
   if (evt.target.id != "highlighter-panel")
     return true;
   document.removeEventListener("popupshown", performTestComparisons, false);
-  is(h1, InspectorUI.selection, "selection matches node");
+  is(h1, InspectorUI.treeView.selectedNode, "selection matches node");
   ok(InspectorUI.highlighter.isHighlighting, "panel is highlighting");
   is(h1, InspectorUI.highlighter.highlitNode, "highlighter highlighting correct node");
   finishUp();
diff --git a/browser/base/content/test/domplate_test.js b/browser/base/content/test/domplate_test.js
deleted file mode 100644
index 282a7edceb5f..000000000000
--- a/browser/base/content/test/domplate_test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-/* ***** BEGIN LICENSE BLOCK *****
- * Version: MPL 1.1/GPL 2.0/LGPL 2.1
- *
- * The contents of this file are subject to the Mozilla Public License Version
- * 1.1 (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- * http://www.mozilla.org/MPL/
- *
- * Software distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- * for the specific language governing rights and limitations under the
- * License.
- *
- * The Original Code is Domplate Test.
- *
- * The Initial Developer of the Original Code is
- * The Mozilla Foundation.
- * Portions created by the Initial Developer are Copyright (C) 2010
- * the Initial Developer. All Rights Reserved.
- *
- * Contributor(s):
- *   Rob Campbell <rcampbell@mozilla.com>
- *
- * Alternatively, the contents of this file may be used under the terms of
- * either the GNU General Public License Version 2 or later (the "GPL"), or
- * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
- * in which case the provisions of the GPL or the LGPL are applicable instead
- * of those above. If you wish to allow use of your version of this file only
- * under the terms of either the GPL or the LGPL, and not to allow others to
- * use your version of this file under the terms of the MPL, indicate your
- * decision by deleting the provisions above and replace them with the notice
- * and other provisions required by the GPL or the LGPL. If you do not delete
- * the provisions above, a recipient may use your version of this file under
- * the terms of any one of the MPL, the GPL or the LGPL.
- *
- * ***** END LICENSE BLOCK ***** */
-
-let doc;
-let div;
-let plate;
-
-Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
-Components.utils.import("resource:///modules/domplate.jsm");
-
-function createDocument()
-{
-  doc.body.innerHTML = '<div id="first">no</div>';
-  doc.title = "Domplate Test";
-  setupDomplateTests();
-}
-
-function setupDomplateTests()
-{
-  ok(domplate, "domplate is defined");
-  plate = domplate({tag: domplate.DIV("Hello!")});
-  ok(plate, "template is defined");
-  div = doc.getElementById("first");
-  ok(div, "we have our div");
-  plate.tag.replace({}, div, template);
-  is(div.innerText, "Hello!", "Is the div's innerText replaced?");
-  finishUp();
-}
-
-function finishUp()
-{
-  gBrowser.removeCurrentTab();
-  finish();
-}
-
-function test()
-{
-  waitForExplicitFinish();
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function() {
-    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
-    doc = content.document;
-    waitForFocus(createDocument, content);
-  }, true);
-
-  content.location = "data:text/html,basic domplate tests";
-}
-
diff --git a/browser/base/jar.mn b/browser/base/jar.mn
index 5f521ddcd9ae..abaabb6c9030 100644
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -30,7 +30,6 @@ browser.jar:
 *       content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
 *       content/browser/credits.xhtml                 (content/credits.xhtml)
 *       content/browser/fullscreen-video.xhtml        (content/fullscreen-video.xhtml)
-*       content/browser/inspector.html                (content/inspector.html)
 *       content/browser/pageinfo/pageInfo.xul         (content/pageinfo/pageInfo.xul)
 *       content/browser/pageinfo/pageInfo.js          (content/pageinfo/pageInfo.js)
 *       content/browser/pageinfo/pageInfo.css         (content/pageinfo/pageInfo.css)
diff --git a/browser/themes/gnomestripe/browser/inspector.css b/browser/themes/gnomestripe/browser/inspector.css
deleted file mode 100644
index c2764611e21a..000000000000
--- a/browser/themes/gnomestripe/browser/inspector.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;
-  border-top: 1px solid #BBB9BA;
-}
-
-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;
-  -moz-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;
-  top: -16px;
-  font-family: Menlo, Andale Mono, monospace;
-  padding-left: 8px;
-  color: #999;
-  white-space: nowrap;
-  font-style: italic;
-}
-
-.htmlNodeBox {
-  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;
-}
diff --git a/browser/themes/gnomestripe/browser/jar.mn b/browser/themes/gnomestripe/browser/jar.mn
index 89bc61623449..9acbfb90a0cd 100644
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@@ -13,7 +13,6 @@ browser.jar:
 * skin/classic/browser/browser.css                    (browser.css)
 * skin/classic/browser/engineManager.css              (engineManager.css)
   skin/classic/browser/fullscreen-video.css
-  skin/classic/browser/inspector.css
   skin/classic/browser/Geolocation-16.png
   skin/classic/browser/Geolocation-64.png
   skin/classic/browser/Go-arrow.png
diff --git a/browser/themes/pinstripe/browser/inspector.css b/browser/themes/pinstripe/browser/inspector.css
deleted file mode 100644
index 539a11f2ea44..000000000000
--- a/browser/themes/pinstripe/browser/inspector.css
+++ /dev/null
@@ -1,365 +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;
-  border-top: 1px solid #BBB9BA;
-}
-
-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;
-  -moz-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;
-  top: -16px;
-  font-family: Menlo, Andale Mono, monospace;
-  padding-left: 8px;
-  color: #999;
-  white-space: nowrap;
-  font-style: italic;
-}
-
-.htmlNodeBox {
-  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;
-}
diff --git a/browser/themes/pinstripe/browser/jar.mn b/browser/themes/pinstripe/browser/jar.mn
index 9482faf8881b..ba19934e32ca 100644
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -64,7 +64,6 @@ browser.jar:
   skin/classic/browser/feeds/audioFeedIcon.png              (feeds/audioFeedIcon.png)
   skin/classic/browser/feeds/audioFeedIcon16.png            (feeds/audioFeedIcon16.png)
   skin/classic/browser/setDesktopBackground.css
-  skin/classic/browser/inspector.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
   skin/classic/browser/places/allBookmarks.png              (places/allBookmarks.png)
diff --git a/browser/themes/winstripe/browser/inspector.css b/browser/themes/winstripe/browser/inspector.css
deleted file mode 100644
index f04bd6c86654..000000000000
--- a/browser/themes/winstripe/browser/inspector.css
+++ /dev/null
@@ -1,350 +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;
-}
-
-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;
-  -moz-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;
-  top: -16px;
-  font-family: Menlo, Andale Mono, monospace;
-  padding-left: 8px;
-  color: #999;
-  white-space: nowrap;
-  font-style: italic;
-}
-
-.htmlNodeBox {
-  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;
-}
-
diff --git a/browser/themes/winstripe/browser/jar.mn b/browser/themes/winstripe/browser/jar.mn
index c2fdbce25420..464609d177bc 100644
--- a/browser/themes/winstripe/browser/jar.mn
+++ b/browser/themes/winstripe/browser/jar.mn
@@ -57,7 +57,6 @@ browser.jar:
         skin/classic/browser/feeds/videoFeedIcon16.png               (feeds/videoFeedIcon16.png)
         skin/classic/browser/feeds/subscribe.css                     (feeds/subscribe.css)
         skin/classic/browser/feeds/subscribe-ui.css                  (feeds/subscribe-ui.css)
-        skin/classic/browser/inspector.css
         skin/classic/browser/places/places.css                       (places/places.css)
 *       skin/classic/browser/places/organizer.css                    (places/organizer.css)
         skin/classic/browser/places/bookmark.png                     (places/bookmark.png)
@@ -172,7 +171,6 @@ browser.jar:
         skin/classic/aero/browser/feeds/videoFeedIcon.png            (feeds/videoFeedIcon-aero.png)
         skin/classic/aero/browser/feeds/videoFeedIcon16.png          (feeds/videoFeedIcon16-aero.png)
         skin/classic/aero/browser/feeds/subscribe.css                (feeds/subscribe.css)
-        skin/classic/aero/browser/inspector.css
 *       skin/classic/aero/browser/places/places.css                  (places/places-aero.css)
 *       skin/classic/aero/browser/places/organizer.css               (places/organizer-aero.css)
         skin/classic/aero/browser/places/bookmark.png                (places/bookmark-aero.png)