diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..350959c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+/bower_components
+/node_modules
+/build
+deb_build.py
+.DS_Store
diff --git a/DOMJSONizer.js b/DOMJSONizer.js
new file mode 100644
index 0000000..d23e107
--- /dev/null
+++ b/DOMJSONizer.js
@@ -0,0 +1,443 @@
+// Contains a class DOMJSONizer used to JSONize DOM tree, objects, properties
+
+// TODO: Remove all logic that pertains to Polymer elements from here and pass them as callbacks
+function DOMJSONizer() {
+  function isPolymerElement(element) {
+    return element && ('element' in element) && (element.element.localName === 'polymer-element');
+  }
+
+  // Polymer-specific stuff (to flag them differently)
+  // Mostly taken from: http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods
+  var polymerSpecificProps = {
+    observe: true,
+    publish: true,
+    created: true,
+    ready: true,
+    attached: true,
+    domReady: true,
+    detached: true,
+    attributeChanged: true
+  };
+
+  /**
+   * Checks if a property is an accessor property.
+   * @param  {Object} obj  The exact object on which the property is present.
+   * @param  {String} prop Name of the property
+   * @return {Boolean}     Whether the property is an accessor (get/set) or not.
+   */
+  function propHasAccessor(obj, prop) {
+    var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
+    if (!descriptor) {
+      console.error(prop);
+    }
+    return Boolean(descriptor.set) || Boolean(descriptor.get);
+  }
+
+  /**
+   * Copies a property from oldObj to newObjArray and adds some metadata.
+   * @param  {Object} protoObject  The exact object in chain where the property exists.
+   * @param  {Object} oldObj       The source object
+   * @param  {Array}  newObjArray  The destination object (which is maintained as an Array).
+   * @param  {String} prop         Name of the property
+   */
+  function copyProperty(protoObject, oldObj, newObjArray, prop) {
+    try {
+      var tmp = oldObj[prop];
+    } catch (e) {
+      // We encountered an error trying to read the property.
+      // It must be a getter that is failing.
+      newObjArray.push({
+        type: 'error',
+        hasAccessor: true,
+        error: true,
+        value: e.message,
+        name: prop
+      });
+      return;
+    }
+    if (oldObj[prop] === null) {
+      newObjArray.push({
+        type: 'null',
+        hasAccessor: false,
+        value: 'null',
+        name: prop
+      });
+    } else if (typeof oldObj[prop] === 'string' ||
+      typeof oldObj[prop] === 'number' ||
+      typeof oldObj[prop] === 'boolean') {
+      newObjArray.push({
+        type: typeof oldObj[prop],
+        hasAccessor: propHasAccessor(protoObject, prop),
+        value: oldObj[prop].toString(),
+        name: prop
+      });
+    } else if (((typeof oldObj[prop] === 'object' &&
+        !(oldObj[prop] instanceof Array)) ||
+      typeof oldObj[prop] === 'function')) {
+      newObjArray.push({
+        type: typeof oldObj[prop],
+        hasAccessor: propHasAccessor(protoObject, prop),
+        value: [],
+        name: prop
+      });
+    } else if (typeof oldObj[prop] === 'object') {
+      newObjArray.push({
+        type: 'array',
+        hasAccessor: propHasAccessor(protoObject, prop),
+        length: oldObj[prop].length,
+        value: [],
+        name: prop
+      });
+    } else {
+      newObjArray.push({
+        type: 'undefined',
+        hasAccessor: false,
+        value: 'undefined',
+        name: prop
+      });
+    }
+  }
+
+  /**
+   * Converts an object to JSON but only one-level deep.
+   * @param {Object}   obj    The object to be converted.
+   * @param {Function} filter A filter function that is supposed to filter out properties.
+   */
+  function JSONize(obj, filter) {
+
+    /**
+     * Gets the own properties of an object.
+     * @param  {Object} obj The object whose properties we want.
+     * @return {Array}      An array of properties.
+     */
+    function getOwnFilteredProps(obj) {
+      var props = Object.getOwnPropertyNames(obj);
+      if (filter) {
+        props = props.filter(filter);
+      }
+      return props;
+    }
+
+    /**
+     * Explores a Polymer element for its properties by searching multiple
+     * prototype levels.
+     * @param  {HTMLElement} element The element that we want to explore.
+     * @param  {Array}       destObj The destination object (managed as an array) we want to populate.
+     */
+    function explorePolymerObject(element, destObj) {
+      var addedProps = {};
+      /** Tells if a property was already added */
+      function isAdded(el) {
+        return (el in addedProps);
+      }
+
+      function addToAddedProps(el) {
+        addedProps[el] = true;
+      }
+      if (isPolymerElement(element)) {
+        var proto = element;
+        // Go looking into the proto chain.
+        while (proto && !Polymer.isBase(proto)) {
+          var props = getOwnFilteredProps(proto);
+          for (var i = 0; i < props.length; i++) {
+            if (isAdded(props[i])) {
+              continue;
+            }
+            addToAddedProps(props[i]);
+            copyProperty(proto, element, destObj, props[i]);
+            // Add a flag to show Polymer implementation properties separately
+            if (props[i] in polymerSpecificProps) {
+              destObj[destObj.length - 1].polymer = true;
+            }
+            // Add a flag to show published properties differently
+            if (props[i] in element.publish) {
+              destObj[destObj.length - 1].published = true;
+            }
+          }
+          proto = proto.__proto__;
+        }
+        destObj.sort(function(a, b) {
+          return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+        });
+      }
+    }
+
+    /**
+     * Explores a non-Polymer object for own properties
+     * @param  {Object} obj     object to look in
+     * @param  {Array}  destObj destination object (managed as an array) to copy properties
+     */
+    function exploreObject(obj, destObj) {
+      var props = Object.getOwnPropertyNames(obj).sort();
+      for (var i = 0; i < props.length; i++) {
+        if (!filter || filter(props[i])) {
+          try {
+            copyProperty(obj, obj, destObj, props[i]);
+          } catch (e) {
+            // TODO: Some properties throw when read. Find out more.
+          }
+        }
+      }
+      // TODO: `__proto__` ?
+    }
+
+    /**
+     * Copies the contents of an array to destination.
+     * @param  {Array} arr     Source array
+     * @param  {Array} destObj Destination object (managed as an array)
+     */
+    function exploreArray(arr, destObj) {
+      for (var i = 0; i < arr.length; i++) {
+        try {
+          copyProperty(arr, arr, destObj, i);
+        } catch (e) {
+          // TODO: Some properties throw when read. Find out more.
+        }
+      }
+    }
+
+    // The root object is named as `Root`.
+    var res = {
+      name: 'Root',
+      value: []
+    };
+    if (isPolymerElement(obj)) {
+      res.type = 'object';
+      explorePolymerObject(obj, res.value);
+    } else {
+      if (obj instanceof Array) {
+        res.type = 'array';
+        exploreArray(obj, res.value);
+      } else if (typeof obj === 'object' ||
+        typeof obj === 'function') {
+        res.type = typeof obj;
+        exploreObject(obj, res.value);
+      }
+    }
+    return res;
+  }
+
+  /**
+   * Tells if an element is a script or style element.
+   * @param  {HTMLElement}  el The element we're checkin
+   * @return {Boolean}         whether it is a <script> or <style>
+   */
+  function isScriptOrStyle(el) {
+    return el && (el.tagName === 'SCRIPT' || el.tagName === 'STYLE');
+  }
+
+  /**
+   * Does a deep light DOM exploration.
+   * Puts the child tree under <shadow> and <content> tags if found
+   * @param  {HTMLElement}   root     The root element to traverse from.
+   * @param  {Function}      callback function to be called for every element found.
+   * @return {Object}                 Looks like this:
+   * {
+   *   tagName: <tagName>,
+   *   children: <list of other such objects>,
+   *   isLightDOMTree: true
+   * }
+   * unless callback does something else to it
+   */
+  function exploreLightDOM(root, callback) {
+    var res = {
+      children: [],
+      tagName: root.tagName.toLowerCase(),
+      isLightDOMTree: true
+    };
+    // Call the callback with the DOM node, the to-be-converted object
+    // and true to mean that it was found in the light DOM exploration
+    callback && callback(root, res, true);
+    if (root.tagName === 'CONTENT') {
+      // <content> must get replaced by what gets distributed into it
+      var children = root.getDistributedNodes();
+      for (var j = 0; j < children.length; j++) {
+        if ('tagName' in children[j]) {
+          res.children.push(exploreLightDOM(children[j], callback));
+        }
+      }
+    } else if (root.tagName === 'SHADOW') {
+      // <shadow> must get replaced by stuff from older shadow root
+      var children = getComposedDOMChildren(root);
+      for (var j = 0; j < children.length; j++) {
+        res.children.push(exploreLightDOM(children[j], callback));
+      }
+    } else {
+      for (var i = 0; i < root.children.length; i++) {
+        if (root.children[i] && 'tagName' in root.children[i]) {
+          if (!isScriptOrStyle(root.children[i])) {
+            res.children.push(exploreLightDOM(root.children[i], callback));
+          }
+        }
+      }
+    }
+    return res;
+  }
+
+  /**
+   * Gets the immediate children of root in the composed DOM tree.
+   * @param  {HTMLElement} root The element to look under.
+   * @return {Array}            A list of children in composed DOM tree.
+   */
+  function getComposedDOMChildren(root) {
+    if (root.tagName === 'CONTENT') {
+      // <content> must get replaced by what gets distributed into it
+      var children = [];
+      var distributedNodes = root.getDistributedNodes();
+      for (var j = 0; j < distributedNodes.length; j++) {
+        if ('tagName' in distributedNodes[j]) {
+          children.push(distributedNodes[j]);
+        }
+      }
+      return children;
+    }
+    if (root.tagName === 'SHADOW') {
+      // <shadow> must get replaced by stuff from older shadow root
+      var children = [];
+      var shadowRoot = root;
+      // The || is because <a> elements have a 'host' property which is a string.
+      while (!shadowRoot.host || typeof shadowRoot.host !== 'object') {
+        shadowRoot = shadowRoot.parentNode;
+      }
+      if (!shadowRoot.olderShadowRoot) {
+        // This is a mistake in the host page. A <shadow> was used
+        // when there is no olderShadowRoot.
+        // TODOD: We should warn the user somehow.
+        return [];
+      }
+      return getComposedDOMChildren(shadowRoot.olderShadowRoot);
+    }
+    if (root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    var children = [];
+    for (var i = 0; i < root.children.length; i++) {
+      if ('tagName' in root.children[i]) {
+        children.push(root.children[i]);
+      }
+    }
+    return children;
+  }
+
+  /**
+   * JSONizes the DOM tree and includes information about light DOM, shadow DOM and
+   * composed DOM.
+   * @param {HTMLElement}   root     The root of the DOM tree.
+   * @param {Function}      callback function to be called for every element discovered.
+   * @return {Object}                Looks like this:
+   * {
+   *   tagName: <tag-name>,
+   *   key: <unique-key>,
+   *   lightDOMTree: <what exploreLightDOM returns>
+   *   children: [<more such objects>]
+   * }
+   * unless callback does anything else to it.
+   */
+  this.JSONizeDOMObject = function(root, callback) {
+    function traverse(root) {
+      var res = {};
+      if ('tagName' in root) {
+        res.tagName = root.tagName.toLowerCase();
+      } else {
+        console.error(root);
+        throw 'tagName is a required property';
+      }
+      if (!root || isScriptOrStyle(root)) {
+        // We don't show script and style tags
+        return null;
+      }
+      callback && callback(root, res);
+      res.children = [];
+      var composedDOMChildren = getComposedDOMChildren(root);
+      // composedDOMChildren is an array of elements found at a level immediately below this
+      // in the composed tree (which we are sure, came from the shadow DOM and not light DOM)
+      for (var i = 0; i < composedDOMChildren.length; i++) {
+        if (composedDOMChildren[i]) {
+          var child = traverse(composedDOMChildren[i]);
+          if (child) {
+            res.children.push(child);
+          }
+        }
+      }
+      // With everything that is in the composed DOM tree at root being traversed through
+      // we can be sure `callback` has dealt with all the rendered elements.
+      res.lightDOMTree = exploreLightDOM(root, callback);
+      return res;
+    }
+    return traverse(root);
+  };
+
+  /**
+   * JSONizes an object considering only own properties.
+   * @param {Object}   obj      The object to JSONize.
+   * @param {Function} callback Function called with the result.
+   * @param {Function} filter   function that is to filter out properties.
+   * @return {Object}           Looks like:
+   * {
+   *   type: 'object',
+   *   name: 'Root',
+   *   value: [
+   *     {
+   *       type: <type>,
+   *       name: <name>,
+   *       value: <value>, (empty array if property is an object)
+   *       hasAccessor: <true|false>,
+   *       error: <true|false> (if there was an error while executing the getter (if there was one))
+   *     },
+   *     // More such objects for each property in the passed object
+   *   ]
+   * }
+   */
+  this.JSONizeObject = function(obj, callback, filter) {
+    var res = JSONize(obj, filter);
+    callback && callback(res);
+    return res;
+  };
+
+  /**
+   * JSONizes a property. Even though this seems unnecessary, it is required when
+   * single property requests arrive and the resulting representation still has to
+   * contain meta-data.
+   * @param {String} prop The name of the property.
+   * @param {Object} obj  The object which contains the property.
+   * @return {Object}     Looks like this:
+   * {
+   *   type: 'object',
+   *   name: 'Root',
+   *   value: [
+   *     // `value` array size is 1 and just contains the property asked for
+   *     {
+   *       name: <prop-name>,
+   *       ...
+   *     }
+   *   ]
+   * }
+   */
+  this.JSONizeProperty = function(prop, obj) {
+    // Get to the object in the prototype chain that actually contains the property
+    var actualObject = obj;
+    while (actualObject) {
+      if (actualObject.hasOwnProperty(prop)) {
+        break;
+      }
+      actualObject = actualObject.__proto__;
+    }
+    var res = {
+      name: 'Root',
+      type: 'object',
+      value: []
+    };
+    // Add the property to this wrapper object
+    copyProperty(actualObject, obj, res.value, prop);
+    if (isPolymerElement(obj)) {
+      // If it is a Polymer element, we may need to add a few flags to it
+      if (prop in polymerSpecificProps) {
+        res.value[0].polymer = true;
+      }
+      if (prop in obj.publish) {
+        res.value[0].published = true;
+      }
+    }
+    return res;
+  };
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..a3c479e
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2014 Google
+
+   Licensed under the Apache License, Version 2.0 (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.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7669920
--- /dev/null
+++ b/README.md
@@ -0,0 +1,56 @@
+Polymer debugging extension
+=========
+
+<b>How to run:</b>
+
+- Clone the repository.
+> git clone https://github.com/sachinhosmani/polymer-devtools-extension.git
+
+- Navigate to cloned directory.
+- Get dependencies with `bower` (Make sure `bower` is installed before this).
+
+> bower install
+
+- Get Closure compiler from <a href='//github.com/google/closure-compiler#getting-started'>here</a>.
+- Unzip file and put `compiler.jar` in `~/closureCompiler`.
+- Install [vulcanize](https://github.com/Polymer/vulcanize)
+
+> npm install -g vulcanize
+ 
+- Build the project.
+
+> python build.py
+
+- The extension was put into `build/`.
+- Open Chrome and go to `chrome://extensions`.
+- Check `developer mode`.
+- Click `Load unpacked extension`.
+- Browse `build/` select it, Chrome will install the extension
+- Open a web page written with Polymer
+- Open devtools and navigate to the `Polymer` pane
+
+<b>Basic Usage:</b>
+
+- You will see 2 sides in the `Polymer` pane.
+- The left side has two views of the DOM tree you can switch between.
+- One is the `Composed DOM view` and the other is the `Local DOM view`.
+- An element is either `blue` or `brown`. Blue ones are Polymer elements while the rest are not.
+- Polymer elements when hovered on, show a `View Source` button, which if you click will take you to the definition file of the Polymer element.
+- Hovering over an element highlights it in the page.
+- The DOM trees respond to DOM mutations and are hence up-to-date.
+- `Composed DOM view` gives you the entire composed DOM tree.
+- `Local DOM view` focuses more on a selected element and can show both light DOM and composed DOM separately.
+- In either of the views, clicking the `+` button to the left of a Polymer element will take you to the `local DOM view` (if you're not already in it) and show you the shadow DOM contents of the element. In this view, the entire composed DOM tree is never exposed. It goes one level deep into the shadow DOM and shows the light DOM of each child at that level.
+- Clicking the `-` button (when its shown) will zoom out of the shadow DOM and show just the light DOM of the element.
+- For convenience, one may find an element in the devtools inspector and select it. It will automatically get selected in the Polymer pane's composed DOM tree.
+- In the right hand side of the pane are 3 tabs.
+- They get filled up in response to what is selected in the element trees.
+- The `properties` tab shows the properties of the selected element. (These object-trees are shown slightly differently for Polymer elements)
+- The `model` tab shows the model that is behind an element (if any).
+- The `breakpoints` tab shows a list of methods of the selected element. Clicking on any will add a breakpoint to the first line of the method.
+- All properties/methods in the right side are live. They are kept up-to-date via O.o().
+- All properties can be modified by clicking on their values and entering new valuesand this change takes immediate effect in the page.
+- Some properties have a `refresh` button next to them. These properties are implemented as accessors and hence can't be kept up-to-date via O.o(). One has to refresh it to fetch the latest value.
+
+<b>Note:</b>
+It needs Object.observe() to work which means only Chrome 36 and above.
diff --git a/background.js b/background.js
new file mode 100644
index 0000000..2b9e8fd
--- /dev/null
+++ b/background.js
@@ -0,0 +1,142 @@
+// Responsible for channeling messages from devtools pane and content scripts
+// Here is where the associations between them are made across tabs.
+
+(function() {
+  var tabIdToPortMap = {};
+  var portIdToTabIdMap = {};
+  var portIdToPortMap = {};
+  var isFreshPage = {};
+  var isPolymerPage = {};
+  // To assign port IDs to ports because ports aren't hashable
+  var lastPortId = 0;
+
+  // A panel just tried to connect to the extension background
+  chrome.runtime.onConnect.addListener(function(port) {
+    var portId;
+
+    function onMessage(message, sender, sendResponse) {
+      switch (message.name) {
+        case 'panel-init':
+          portId = ++lastPortId;
+          tabIdToPortMap[message.tabId] = port;
+          portIdToTabIdMap[portId] = message.tabId;
+          portIdToPortMap[portId] = port;
+
+          chrome.tabs.executeScript(message.tabId, {
+            file: 'contentScript.js'
+          });
+          break;
+        case 'fresh-page':
+          // Tab's location had changed and the page confirmed that it was a refresh.
+          // Start the content script.
+          chrome.tabs.executeScript(message.tabId, {
+            file: 'contentScript.js'
+          });
+          // Mark it so.
+          isFreshPage[message.tabId] = true;
+          isPolymerPage[message.tabId] = message.isPolymerPage;
+          break;
+      }
+    }
+    // We expect a `panel-init` message from it soon after the connection.
+    port.onMessage.addListener(onMessage);
+    // When a panel closes
+    port.onDisconnect.addListener(function() {
+      // Find the tab
+      tabId = portIdToTabIdMap[portId];
+      // Delete all associations
+      delete portIdToTabIdMap[portId];
+      delete portIdToPortMap[portId];
+      delete tabIdToPortMap[tabId];
+      delete isFreshPage[tabId];
+      delete isPolymerPage[tabId];
+
+      // Send a message to the content script do necessary clean-up
+      chrome.tabs.sendMessage(tabId, {
+        name: 'clean-up'
+      });
+    });
+  });
+
+  // All the communcation
+  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+    var port = tabIdToPortMap[sender.tab.id];
+    if (!port) {
+      return;
+    }
+    switch (message.name) {
+      case 'object-changed':
+        // When an object changes
+        port.postMessage({
+          name: 'object-changed',
+          changeList: message.changeList
+        });
+        break;
+      case 'dom-mutation':
+        // When a DOM mutation occurs
+        port.postMessage({
+          name: 'dom-mutation',
+          changeList: message.changeList
+        });
+        break;
+      case 'inspected-element-changed':
+        // When element selection changes in the inspector
+        port.postMessage({
+          name: 'inspected-element-changed',
+          key: message.key
+        });
+        break;
+      case 'polymer-ready':
+        // If `polymer-ready` happens after chrome.tabs detects page reload.
+        port.postMessage({
+          name: 'refresh'
+        });
+        break;
+    }
+  });
+
+  // When a page navigation is initiated.
+  // Sequence of events that happen:
+  // 1. Background-page to panel => 'check-page-refresh'
+  // Possibly (if page is fresh):
+  // 2. panel to Background-page => 'fresh-page'
+  // 3. Background-page to panel => 'refresh'
+  // Possibly (if `polymer-ready` happened after content script was loaded):
+  // 4. content-script to background-page => 'polymer-ready'
+  // 5. background-page to panel => 'refresh'
+  chrome.webNavigation.onCommitted.addListener(function(details) {
+    if (details.frameId !== 0) {
+      // If it is not the top-frame, we just ignore it.
+      return;
+    }
+    var tabId = details.tabId;
+    if (tabId in tabIdToPortMap) {
+      // If extension was open in this tab, send a message to check if this was
+      // an actual page reload. Further action is based on the response to this.
+      var port = tabIdToPortMap[tabId];
+      isFreshPage[tabId] = false;
+      isPolymerPage[tabId] = false;
+      port.postMessage({
+        name: 'check-page-fresh'
+      });
+    }
+  });
+
+  // When a page navigation is completed.
+  chrome.webNavigation.onCompleted.addListener(function(details) {
+    if (details.frameId !== 0) {
+      // If it is not the top-frame, we just ignore it.
+      return;
+    }
+    var tabId = details.tabId;
+    if (tabId in tabIdToPortMap && tabId in isFreshPage && !(tabId in isPolymerPage)) {
+      // If the panel has told us that this page is fresh, the panel needs to be
+      // re-initialized. This has to be done only if it is a Polymer page, otherwise
+      // content script will send a message 'polymer-ready' which should take care of it.
+      var port = tabIdToPortMap[tabId];
+      port.postMessage({
+        name: 'refresh'
+      });
+    }
+  });
+})();
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..48a46b5
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,11 @@
+{
+  "name": "Polymer debugging extension",
+  "version": "1.0",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.2.4",
+    "platform": "Polymer/platform#>=0.2.4",
+    "core-elements": "Polymer/core-elements#>=0.3.3",
+    "paper-elements": "Polymer/paper-elements#>=0.3.3"
+  }
+}
diff --git a/build.py b/build.py
new file mode 100644
index 0000000..d62ffde
--- /dev/null
+++ b/build.py
@@ -0,0 +1,145 @@
+import subprocess
+import sys
+import os
+
+# Check if it is a clean or a build
+args = sys.argv
+mode = None
+if len(args) == 1 or args[1] == 'build':
+  mode = 'build'
+elif args[1] == 'clean':
+  mode = 'clean'
+else:
+  sys.exit('Invalid param: ' + args[1])
+
+def execCmd (cmd, silentFail):
+  '''Executes the cmd and fails silently if asked to'''
+  if silentFail:
+    with open(os.devnull, 'w') as devnull:
+      subprocess.call(cmd, shell=True, stderr=devnull)
+  else:
+    try:
+      subprocess.check_output(cmd, shell=True)
+    except subprocess.CalledProcessError, e:
+      print 'Error message: '
+      print e.output
+      sys.exit('\nBuild stopped due to above error.')
+
+def copyFilesToBuild (files, silentFail):
+  '''Copies a list of files to build/'''
+  for aFile in files:
+    print 'copying ' + aFile + ' to build/' + aFile + '...'
+    execCmd('cp ' + aFile + ' build/' + aFile, silentFail)
+
+def copyDirectoriesToBuild (dirs, silentFail):
+  '''Copies a list of directories to build/'''
+  for aDir in dirs:
+    print 'copying ' + aDir + ' to build/' + aDir + '...'
+    execCmd('cp -r ' + aDir + ' build/' + aDir, silentFail)
+
+def moveToBuild (files, silentFail):
+  '''Moves a list of files to build/'''
+  for aFile in files:
+    print 'moving ' + aFile + ' to build/' + aFile + '...'
+    execCmd('mv ' + aFile + ' build/' + aFile, silentFail)
+
+def removeFiles (files, silentFail):
+  '''Removes a list of files from pwd'''
+  for aFile in files:
+    print 'removing ' + aFile + '...'
+    execCmd('rm ' + aFile, silentFail)
+
+def removeDirectories (dirs, silentFail):
+  '''Removes a list of files from pwd'''
+  for aDir in dirs:
+    print 'removing ' + aDir + '...'
+    execCmd('rm -r ' + aDir, silentFail)
+
+def closureCompile (srcs, dest):
+  '''Compiles each file in `srcs` and puts results as `dest`'''
+  for aSrc in srcs:
+    print 'Compiling ' + aSrc + ' to ' + dest + '/' + aSrc + '...'
+    execCmd('java -jar ~/closureCompiler/compiler.jar ' +
+      '--language_in=ECMASCRIPT5 --js ' +
+      aSrc + ' --js_output_file ' + dest + '/' + aSrc, silentFail=False)
+
+def createDirectoryStructure ():
+  print 'Creating directory structure...'
+  execCmd('mkdir build', silentFail=False)
+  execCmd('mkdir build/bower_components', silentFail=False)
+  execCmd('mkdir build/bower_components/platform', silentFail=False)
+  execCmd('mkdir build/bower_components/polymer', silentFail=False)
+
+  # core-splitter needs an svg resource. vulcanize doesn't put resources in concatenated
+  # file. So we must manually copy that build/ .
+  execCmd('mkdir build/bower_components/core-splitter', silentFail=False)
+
+
+print 'Cleaning project...\n'
+removeFiles(['panel.js', 'panel.html'], silentFail=True)
+removeDirectories(['build'], silentFail=True)
+print 'Project cleaned.\n'
+
+if mode == 'clean':
+  sys.exit('Run `python build.py` to build again.')
+
+# TODO: Executing `bower` gives us:
+# 'warning: possible EventEmitter memory leak detected. 11 listeners added.'
+# So right now, we ask the user to do it manually. Must fix this.
+'''print 'Getting dependencies with `bower`...'
+
+execCmd('bower install', silentFail=False)'''
+
+print 'Building project...\n'
+
+createDirectoryStructure()
+
+print 'Vulcanizing...\n'
+execCmd('vulcanize --csp -o panel.html panel-orig.html', silentFail=False)
+
+print 'Finished vulcanizing'
+
+# Vulcanize shouldn't be asked to output result in build/ because it would then
+# rewrite relative paths in files which we don't want. We'll anyway move everything
+# to build/
+# So we manually move panel.html after vulcanizing
+moveToBuild(['panel.html'], silentFail=False)
+
+print 'Compiling with Closure...\n'
+
+closureCompile(srcs=[
+  'panel.js',
+  'panel-orig.js',
+  'panel.js',
+  'hostPageHelpers.js',
+  'evalHelper.js',
+  'DOMJSONizer.js',
+  'devtools.js',
+  'contentScript.js',
+  'background.js',
+  'perfContentScript.js',
+], dest='build')
+
+print 'Finished compiling'
+
+print 'Adding files to build/ ...\n'
+
+# All custom elements defined in the project need not be vulcanized since they are
+# CSP compliant. All we need to do is copy them over to build/.
+copyDirectoriesToBuild(['elements'], silentFail=False)
+
+# panel.js is a product of vulcanize. Since it got compiled to build/ we don't need it.
+removeFiles(['panel.js'], silentFail=False)
+
+copyFilesToBuild(['devtools.html', 'manifest.json'], silentFail=False)
+
+# <script>s are not copied by vulcanize, so these have to be moved in as well.
+execCmd('cp bower_components/platform/platform.js build/bower_components/platform/platform.js',
+  silentFail=False)
+execCmd('cp bower_components/polymer/polymer.js build/bower_components/polymer/polymer.js',
+  silentFail=False)
+# core-splitter needs an svg resource.
+execCmd('cp bower_components/core-splitter/handle.svg build/bower_components/core-splitter/handle.svg',
+  silentFail=False)
+
+print 'All done! The extension was built in `build`.\n'
diff --git a/contentScript.js b/contentScript.js
new file mode 100644
index 0000000..f4b0fc8
--- /dev/null
+++ b/contentScript.js
@@ -0,0 +1,38 @@
+/**
+ * adds the extension ID to the event name so it's unique and matches with what
+ * the host page fires.
+ * @param  {String} name event name
+ * @return {String}      new event name
+ */
+function getNamespacedEventName(name) {
+  return chrome.runtime.id + '-' + name;
+}
+
+window.addEventListener(getNamespacedEventName('object-changed'), function(event) {
+  chrome.runtime.sendMessage({
+    name: 'object-changed',
+    changeList: event.detail
+  });
+});
+
+window.addEventListener(getNamespacedEventName('dom-mutation'), function(event) {
+  chrome.runtime.sendMessage({
+    name: 'dom-mutation',
+    changeList: event.detail
+  });
+});
+
+window.addEventListener(getNamespacedEventName('inspected-element-changed'), function(event) {
+  chrome.runtime.sendMessage({
+    name: 'inspected-element-changed',
+    key: event.detail.key
+  });
+});
+
+chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+  // When panel closes, background page will tell content script to tell the host
+  // page to do some clean-up
+  if (message.name === 'clean-up') {
+    window.dispatchEvent(new CustomEvent('clean-up'));
+  }
+});
diff --git a/devtools.html b/devtools.html
new file mode 100644
index 0000000..007960f
--- /dev/null
+++ b/devtools.html
@@ -0,0 +1,7 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
diff --git a/devtools.js b/devtools.js
new file mode 100644
index 0000000..0be035f
--- /dev/null
+++ b/devtools.js
@@ -0,0 +1,6 @@
+// Create a new panel
+chrome.devtools.panels.create("Polymer",
+  null,
+  "panel.html",
+  null
+);
diff --git a/elements/bread-crumbs/bread-crumbs.html b/elements/bread-crumbs/bread-crumbs.html
new file mode 100644
index 0000000..97922a3
--- /dev/null
+++ b/elements/bread-crumbs/bread-crumbs.html
@@ -0,0 +1,27 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+
+<!--
+  A simple bread-crumbs element.
+  To use:
+  1. <bread-crumbs></bread-crumbs>
+  2. get reference to it and
+  3. breadCrumbs.list = [{name: <label>, key: <key to identify it>}, ...]
+  4. Listen to `bread-crumb-clicked`. It has `key` in `event.detail` to tell which button the
+    click happened on.
+-->
+<polymer-element name='bread-crumbs'>
+  <template>
+    <style>
+      paper-button {
+        background-color: #4285f4;
+        color: white;
+        font-size: 12px;
+      }
+    </style>
+    <template repeat='{{item, index in list}}'>
+      <paper-button id='btn{{index}}' label='{{item.name}}' on-click='{{clicked}}'></paper-button>
+    </template>
+  </template>
+  <script src='bread-crumbs.js'></script>
+</polymer-element>
diff --git a/elements/bread-crumbs/bread-crumbs.js b/elements/bread-crumbs/bread-crumbs.js
new file mode 100644
index 0000000..4f91485
--- /dev/null
+++ b/elements/bread-crumbs/bread-crumbs.js
@@ -0,0 +1,10 @@
+Polymer('bread-crumbs', {
+  clicked: function(event) {
+    var index = parseInt(event.target.id.substring(3));
+    var key = this.list[index].key;
+    this.list.splice(index + 1);
+    this.fire('bread-crumb-click', {
+      key: key
+    });
+  }
+});
diff --git a/elements/core-pages/core-pages.html b/elements/core-pages/core-pages.html
new file mode 100644
index 0000000..fe75856
--- /dev/null
+++ b/elements/core-pages/core-pages.html
@@ -0,0 +1,14 @@
+<!--
+  This was written simply because Polymer's core-pages doesn't work
+  with CSP. It is because it has `noscript` and vulcanize doesn't work
+  with that. When it's fixed, we should use Polymer's core-pages
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<polymer-element name='core-pages' attributes='selected'>
+  <template>
+    <content select='.core-pages-selected'></content>
+  </template>
+  <script src='core-pages.js'></script>
+</polymer-element>
diff --git a/elements/core-pages/core-pages.js b/elements/core-pages/core-pages.js
new file mode 100644
index 0000000..d273434
--- /dev/null
+++ b/elements/core-pages/core-pages.js
@@ -0,0 +1,16 @@
+Polymer('core-pages', {
+  selected: 0,
+  ready: function() {
+    if (this.children[this.selected]) {
+      this.children[this.selected].classList.add('core-pages-selected');
+    }
+  },
+  selectedChanged: function(oldVal, newVal) {
+    if (this.children[this.selected]) {
+      this.children[oldVal].classList.remove('core-pages-selected');
+      this.children[this.selected].classList.add('core-pages-selected');
+    } else {
+      this.selected = oldVal;
+    }
+  }
+});
diff --git a/elements/editable-label/editable-label.html b/elements/editable-label/editable-label.html
new file mode 100644
index 0000000..0d93c0e
--- /dev/null
+++ b/elements/editable-label/editable-label.html
@@ -0,0 +1,23 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<!--A text label that is editable upon mouse-click-->
+
+<polymer-element name='editable-label' attributes='width text hidden'>
+  <template>
+    <style>
+      #static {
+        border: 1px solid #E6F0EA;
+        min-width: 10px;
+        height: 13px;
+        float: left;
+        font-size: 12px;
+        font-family: dejavu sans mono, monospace;
+      }
+    </style>
+    <div hidden?='{{hidden}}'>
+      <div id='static' on-click='{{startEditing}}'>{{text}}</div>
+      <input id='dynamic' type='text' value='{{text}}' size='{{width}}'
+      on-blur='{{stopEditing}}' on-keypress='{{handleKeyPress}}'/>
+    </div>
+  </template>
+  <script src='editable-label.js'></script>
+</polymer-element>
diff --git a/elements/editable-label/editable-label.js b/elements/editable-label/editable-label.js
new file mode 100644
index 0000000..feaade9
--- /dev/null
+++ b/elements/editable-label/editable-label.js
@@ -0,0 +1,75 @@
+(function() {
+  Polymer('editable-label', {
+    text: '',
+    // Present state: editing or not
+    editing: false,
+    width: 5,
+    lastText: null,
+    hidden: false,
+    /**
+     * Called when editing begins or ends. Shows and hides the input field and
+     * span accordingly
+     */
+    toggleEditing: function() {
+      if (this.editing) {
+        this.$.dynamic.style.display = 'none';
+        this.$.static.style.display = 'block';
+      } else {
+        this.$.dynamic.style.display = 'block';
+        this.$.static.style.display = 'none';
+      }
+      this.editing = !this.editing;
+    },
+    ready: function() {
+      this.$.dynamic.style.display = 'none';
+    },
+    /**
+     * When we start editing a field
+     */
+    startEditing: function() {
+      if (!this.editing) {
+        this.toggleEditing();
+        // Select all text in the dynamic field
+        this.$.dynamic.select();
+      }
+    },
+    /**
+     * When we are done editing a field
+     */
+    stopEditing: function() {
+      if (this.editing) {
+        this.toggleEditing();
+        if (this.lastText === this.text) {
+          return;
+        }
+        var that = this;
+        this.fire('field-changed', {
+          oldValue: that.lastText,
+          newValue: that.text,
+          field: that,
+          name: that.getAttribute('data-name')
+        });
+        this.lastText = this.text;
+      }
+    },
+    /**
+     * Handle `enter` key
+     */
+    handleKeyPress: function(event) {
+      if (event.keyCode === 13) {
+        // Enter was pressed. It marks the end of editing.
+        this.stopEditing();
+      }
+    },
+    /**
+     * When text changes.
+     * @param  {String} oldVal Old value of the field
+     * @param  {String} newVal New value of the field
+     */
+    textChanged: function(oldVal, newVal) {
+      if (this.lastText === null) {
+        this.lastText = newVal;
+      }
+    }
+  });
+})();
diff --git a/elements/element-tree/element-tree.html b/elements/element-tree/element-tree.html
new file mode 100644
index 0000000..8ef0db3
--- /dev/null
+++ b/elements/element-tree/element-tree.html
@@ -0,0 +1,83 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/core-icons/core-icons.html">
+
+<!-- Reasons for not implementing it like object-tree:
+  - The entire DOM tree is fetched at once as opposed to how objects are fetched level-by-level in object-tree
+  - Information is lost and refetched everytime the object-tree is collapsed whereas here, it is not.
+    DOM mutations are fewer and we are better of responding to changes
+
+  Use:
+    - declare <element-tree></element-tree>
+    - tree.initFromDOMTree(treeObject)
+    - tree.empty() to empty tree
+    - tree.getChildTreeForKey(key) to get child tree
+
+    Listen to:
+    1. unselected : when an element is unselected (explicitly with the mouse)
+    2. selected : when an element is selected
+    3. highlight : when an element is hovered over
+    4. unhighlight : when an element is hovered out of
+-->
+<polymer-element name='element-tree' attributes='indent text basewidth' constructor='ElementTree'>
+  <template>
+    <style>
+      #expandBtn {
+        cursor: pointer;
+      }
+      #thisElement {
+        padding: 1px;
+        -webkit-user-select: none;
+      }
+      #thisElement:hover {
+        background-color: #C7E4ED;
+      }
+      #thisElement[selected] {
+        background-color: rgb(178, 224, 178);
+        color: white;
+      }
+      #name {
+        font-size: 12px;
+        font-family: dejavu sans mono, monospace;
+        cursor: default;
+        width: 87%;
+        color: #C04747;
+        height: 16px;
+        display: inline-block;
+      }
+      #srcBtn {
+        text-decoration: underline;
+        font-size: 9px;
+        color: rgb(119, 121, 180);
+        cursor: pointer;
+        display: none;
+      }
+      #name[polymer] {
+        color: rgb(19, 106, 185);
+      }
+      #name[polymer]:hover {
+        color: rgb(8, 8, 231);
+      }
+      #name:hover {
+        color: #8F1904;
+      }
+      #name:hover #srcBtn {
+        display: inline-block;
+      }
+    </style>
+    <div id='content'>
+      <div id='thisElement' on-mouseover='{{mouseOver}}' on-mouseout='{{mouseOut}}'>
+        <core-icon id='expandBtn' on-click='{{toggle}}' icon='{{expandBtnIcon}}' size='15'></core-icon>
+        <input hidden?='{{!isPolymer || unRendered}}' type='button' id='magnify' value='{{isDiggable ? "+" : "-"}}' on-click='{{magnify}}'></input>
+        <span hidden?='{{!unRendered}}'> ! </span>
+        <span on-click='{{toggleSelection}}' id='name' polymer?='{{isPolymer}}'>
+          {{text}}
+          <span id='srcBtn' hidden?='{{!isPolymer}}' on-click='{{viewSource}}'>
+            source file
+          </span>
+        </span>
+      </div>
+      <div id='childrenContent'></div>
+    </div>
+  </template>
+  <script src='element-tree.js'></script>
+</polymer-element>
diff --git a/elements/element-tree/element-tree.js b/elements/element-tree/element-tree.js
new file mode 100644
index 0000000..29eb36b
--- /dev/null
+++ b/elements/element-tree/element-tree.js
@@ -0,0 +1,186 @@
+(function() {
+
+  function newExpandBtnIcon(collapsed) {
+    return collapsed ? 'chevron-right' : 'expand-more';
+  }
+
+  Polymer('element-tree', {
+    indent: 0,
+    collapsed: false,
+    // Whether the element at the root is selected or not
+    selected: false,
+    baseWidth: 10,
+    expandBtnIcon: newExpandBtnIcon(false),
+    // Polymer elements are shown differently and can be selected
+    isPolymer: false,
+    ready: function() {
+      this.childElements = [];
+      this.$.childrenContent.style.marginLeft = this.indent + this.baseWidth + 'px';
+    },
+    addChild: function(element) {
+      element.indent = this.indent + this.baseWidth;
+      this.childElements.push(element);
+      this.$.childrenContent.appendChild(element);
+    },
+    /**
+     * Empties the element-tree
+     */
+    empty: function() {
+      this.text = '';
+      if (this.selected) {
+        this.root.selectedChild = null;
+        this.selected = false;
+        this.$.thisElement.removeAttribute('selected');
+      }
+      if (this.isPolymer) {
+        delete this.isPolymer;
+      }
+      if (this.unRendered) {
+        delete this.unRendered;
+      }
+      if (this.keyMap && this.keyMap[this.key]) {
+        delete this.keyMap[this.key];
+      }
+      for (var i = 0; i < this.childElements.length; i++) {
+        this.childElements[i].empty();
+        this.$.childrenContent.innerHTML = '';
+      }
+      delete this.childElements;
+      this.childElements = [];
+    },
+    /**
+     * Helper method that is invoked by initFromDOMTree the first time.
+     * @param  {Object}       tree       An object with a tagName and children trees
+     * @param  {Boolean}      isDiggable If it is possible to hit the `+` button to see inner stuff
+     * @param  {ElementTree}  root       Root of this tree (top-most parent)
+     */
+    _initFromDOMTreeHelper: function(tree, isDiggable, root) {
+      this.text = '<' + tree.tagName + '>';
+      // conditionally set these to save memory (there can be a huge page with very few
+      // Polymer elements)
+      if (tree.isPolymer) {
+        this.isPolymer = true;
+      }
+      if (tree.unRendered) {
+        this.unRendered = true;
+      }
+      this.key = tree.key;
+      this.keyMap = this.keyMap || (root ? root.keyMap : {});
+      this.keyMap[this.key] = this;
+      this.tree = tree;
+      this.isDiggable = isDiggable;
+      this.root = root || this;
+      for (var i = 0; i < tree.children.length; i++) {
+        // Create a new ElementTree to hold a child
+        var child = new ElementTree();
+        child._initFromDOMTreeHelper(tree.children[i], isDiggable, this.root);
+        this.addChild(child);
+      }
+    },
+    /**
+     * Populates the tree with a tree object.
+     * @param  {Object}       tree       An object with a tagName and children trees
+     * @param  {Boolean}      isDiggable If it is possible to hit the `+` button to see inner stuff
+     * @param  {ElementTree}  root       Root of this tree (top-most parent)
+     */
+    initFromDOMTree: function(tree, isDiggable, root) {
+      this.empty();
+      this._initFromDOMTreeHelper(tree, isDiggable, root);
+    },
+    /**
+     * When the tree is expanded or minimized.
+     */
+    toggle: function() {
+      if (this.childElements.length === 0) {
+        return;
+      }
+      this.collapsed = !(this.collapsed);
+      this.expandBtnIcon = newExpandBtnIcon(this.collapsed);
+      for (var i = 0; i < this.childElements.length; i++) {
+        if (this.collapsed) {
+          this.childElements[i].$.content.style.display = 'none';
+        } else {
+          this.childElements[i].$.content.style.display = 'block';
+        }
+      }
+    },
+    /**
+     * When an element is selected or unselected in the tree.
+     */
+    toggleSelection: function() {
+      if (this.selected) {
+        // selectedChild holds the element in the tree that is currently selected
+        this.root.selectedChild = null;
+        this.$.thisElement.removeAttribute('selected');
+        this.selected = !(this.selected);
+        this.fire('unselected', {
+          key: this.key
+        });
+      } else {
+        var oldKey = null;
+        if (this.root.selectedChild) {
+          oldKey = this.root.selectedChild.key;
+          // First unselect the currently selected child
+          this.root.selectedChild.selected = false;
+          this.root.selectedChild.$.thisElement.removeAttribute('selected');
+        }
+        this.root.selectedChild = this;
+        this.$.thisElement.setAttribute('selected', 'selected');
+        this.selected = !(this.selected);
+        this.fire('selected', {
+          key: this.key,
+          oldKey: oldKey
+        });
+      }
+    },
+    /**
+     * Gets the child tree for a given key
+     * @param  {Number}          key         Key to find the ElementTree of
+     * @return {ElementTree}     ElementTree that holds the subtree of the element
+     */
+    getChildTreeForKey: function(key) {
+      return this.keyMap ? this.keyMap[key] : null;
+    },
+    /** 
+     * Tells the extension to highlight the element that was hovered on.
+     */
+    mouseOver: function() {
+      // Only if this is not already selected
+      if (!this.selected) {
+        this.fire('highlight', {
+          key: this.key
+        });
+      }
+    },
+    /**
+     * Tells the extension to unhighlight the highlight that was hovered out of.
+     */
+    mouseOut: function() {
+      // Only if this is not already selected
+      if (!this.selected) {
+        this.fire('unhighlight', {
+          key: this.key
+        });
+      }
+    },
+    /**
+     * When the `+` is clicked on an element to dig into
+     */
+    magnify: function() {
+      var eventName = this.isDiggable ? 'magnify' : 'unmagnify';
+      this.fire(eventName, {
+        key: this.key
+      });
+    },
+    /**
+     * When the `view source` button is clicked
+     * @param  {Event} e JS Event object
+     */
+    viewSource: function(e) {
+      e.stopPropagation();
+      this.fire('view-source', {
+        key: this.key
+      });
+    }
+  });
+})();
diff --git a/elements/method-list/method-list.html b/elements/method-list/method-list.html
new file mode 100644
index 0000000..82a3bfd
--- /dev/null
+++ b/elements/method-list/method-list.html
@@ -0,0 +1,39 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/core-selector/core-selector.html">
+
+<polymer-element name='method-list' constructor='MethodList'>
+  <template>
+    <style>
+      .method {
+        font-size: 12px;
+        font-family: dejavu sans mono, monospace;
+        background-color: white;
+        color: rgb(19, 106, 185);
+        -webkit-user-select: none;
+        -webkit-border-radius: 5px 5px 5px 5px;
+        border: 1px solid #C7E4ED;
+        height: 22px;
+        line-height: 22px;
+        padding: 0 20px;
+        cursor: pointer;
+      }
+      .method.core-selected {
+        background-color: rgb(178, 224, 178);
+      }
+      .method.core-selected:hover {
+        background-color: rgb(178, 224, 178);
+      }
+      .method:hover {
+        background-color: #C7E4ED;
+      }
+
+    </style>
+    <!--TODO: Fix core-selector (it is buggy) or write your own.-->
+    <core-selector class='list' multi>
+      <template repeat='{{item, index in list}}'>
+        <div class='method {{ {"core-selected": item.setBreakpoint} | tokenList }}' id='method{{index}}' hidden?='{{item.type != "function"}}'>{{item.name}}</div>
+      </template>
+    </core-selector>
+  </template>
+  <script src='method-list.js'></script>
+</polymer-element>
diff --git a/elements/method-list/method-list.js b/elements/method-list/method-list.js
new file mode 100644
index 0000000..107a231
--- /dev/null
+++ b/elements/method-list/method-list.js
@@ -0,0 +1,23 @@
+(function() {
+  Polymer('method-list', {
+    filterSelected: function(items) {
+      var selected = [];
+      for (var i = 0; i < items.length; i++) {
+        if (items[i].setBreakpoint) {
+          selected.push(i);
+        }
+      }
+      return selected;
+    },
+    ready: function() {
+      this.list = [];
+      this.addEventListener('core-select', function(event) {
+        event.stopPropagation();
+        this.fire('breakpoint-toggle', {
+          isSet: event.detail.isSelected,
+          index: event.detail.item.id.substring(6)
+        });
+      });
+    }
+  });
+})();
diff --git a/elements/object-tree/object-tree.html b/elements/object-tree/object-tree.html
new file mode 100644
index 0000000..252a286
--- /dev/null
+++ b/elements/object-tree/object-tree.html
@@ -0,0 +1,85 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../editable-label/editable-label.html">
+<link rel="import" href="../../bower_components/core-icons/core-icons.html">
+
+<!--
+  Use:
+    - Declare <object-tree></object-tree>
+    - tree.tree = treeObj; // Set the driving model tree object
+    - Update treeObj as required and the object-tree is updated automatically
+
+    - Listen to:
+      1. object-expand : When an object is expanded
+      2. object-collapse : When an object is collapsed
+      3. property-changed: When a property is changed
+      4. refresh-property: When a property is to be refreshed
+-->
+<polymer-element name='object-tree' attributes='hidden basewidth' constructor='ObjectTree'>
+  <template>
+    <style>
+      #content {
+        white-space: nowrap;
+        font-size: 12px;
+        -webkit-user-select: none;
+      }
+      .property {
+         padding: 3px;
+      }
+      editable-label {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .labelText {
+        font-family: dejavu sans mono, monospace;
+        color: rgb(19, 106, 185);
+      }
+      .labelText[isPolymer] {
+        font-family: Courier, monospace;
+        color: #6A02BF;
+        font-size: 13px;
+      }
+      .typeText {
+        color: gray;
+        font-family: "Arial", Courier, monospace;
+        font-size: 11px;
+      }
+      .btn {
+        cursor: pointer;
+      }
+      .children {
+        margin-left: {{baseWidth}}px;
+      }
+      .propMarker {
+        margin-right: 4px;
+        margin-left: 4px;
+      }
+    </style>
+    <div id='content' hidden?='{{hidden}}'>
+      <!--IDs are assigned dynamically and uniquely. They serve to identify the element.-->
+      <template repeat='{{prop, index in tree}}'>
+        <div class='property'>
+          <span hidden?='{{prop.type != "object" && prop.type != "array" && prop.type != "function"}}' class='btn'>
+            <core-icon id='img{{index}}' icon='{{prop.value.length > 0 ? "expand-more" : "chevron-right"}}' on-click='{{toggle}}' 
+              state='{{prop.value.length > 0 ? "expanded" : "collapsed"}}' size='15'></core-icon>
+          </span>
+          <span hidden?='{{prop.type == "object" || prop.type == "array" || prop.type == "function"}}' class='propMarker'>
+            <core-icon icon='check-circle-blank' size='4'></core-icon>
+          </span>
+          <label class='labelText' id='name{{index}}' isPolymer?='{{prop.polymer}}'>{{prop.name}}</label>
+          <label class='typeText' hidden?='{{prop.type != "object" && prop.type != "array" && prop.type != "function"}}'>&lt;{{prop.type}}&gt;</label>
+          <label class='typeText' hidden?='{{!prop.published}}'>&lt;published&gt;</label>
+          <editable-label id='field{{index}}' text='{{prop.value}}' data-hasAccessor='{{prop.hasAccessor}}' data-name='{{prop.name}}' 
+            hidden?='{{prop.type == "object" || prop.type == "array" || prop.type == "function"}}'>
+          </editable-label>
+          <span hidden?='{{!prop.hasAccessor}}' class='btn'>
+            <core-icon id='refresh{{index}}' data-name='{{prop.name}}' on-click='{{refreshField}}' icon='refresh' size='12'></core-icon>
+          </span>
+        </div>
+        <div class='children'>
+          <object-tree id='child{{index}}'></object-tree>
+        </div>
+      </template>
+    </div>
+  </template>
+  <script src='object-tree.js'></script>
+</polymer-element>
diff --git a/elements/object-tree/object-tree.js b/elements/object-tree/object-tree.js
new file mode 100644
index 0000000..9112d8b
--- /dev/null
+++ b/elements/object-tree/object-tree.js
@@ -0,0 +1,149 @@
+(function() {
+  var EXPAND_BTN_IMAGE = '../res/expand.png';
+  var COLLAPSE_BTN_IMAGE = '../res/collapse.png';
+  var BLANK_IMAGE = '../res/blank.png';
+
+  function copyArray(arr) {
+    var newArr = [];
+    for (var i = 0; i < arr.length; i++) {
+      newArr.push(arr[i]);
+    }
+    return newArr;
+  }
+  /**
+   * Converts a value represented as a string to an actual JS object.
+   * E.g. : "true" -> true and "5" -> 5
+   */
+  function smartCast(val) {
+    if ((val.length >= 2 &&
+      (val[0] === '"' && val[val.length - 1] === '"') ||
+      (val[0] === '\'' && val[val.length - 1] === '\''))) {
+      return val.substring(1, val.length - 1);
+    }
+    switch (val) {
+      case 'true':
+        return true;
+      case 'false':
+        return false;
+      case 'null':
+        return null;
+      case 'undefined':
+        return undefined;
+    }
+    if (!isNaN(parseInt(val, 10))) {
+      return parseInt(val, 10);
+    }
+    throw 'Bad value';
+  }
+  /**
+   * Check if a value is valid
+   */
+  function isFieldValueValid(val) {
+    try {
+      smartCast(val);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  }
+  Polymer('object-tree', {
+    baseWidth: 14,
+    ready: function() {
+      this.tree = [];
+      this.path = [];
+      // When one of the fields change, it will let the object-tree know
+      // with this event
+      this.addEventListener('field-changed', function(event) {
+        var newValue = event.detail.newValue;
+        var oldValue = event.detail.oldValue;
+        var index = event.detail.field.id.substring(5);
+        var path = copyArray(this.path);
+        path.push(index);
+        // Reset it to the old value since O.o() will update it anyway after reflection
+        event.detail.field.text = oldValue;
+        // Stop propagation since this will fire another event
+        event.stopPropagation();
+        if (!isFieldValueValid(newValue)) {
+          return;
+        }
+        var that = this;
+        // Fire an event with all the information
+        this.fire('property-changed', {
+          path: path,
+          value: smartCast(newValue),
+          // reEval is needed if it is an accessor and O.o() won't update it.
+          reEval: event.detail.field.getAttribute('data-hasAccessor') === 'true',
+          tree: that.tree,
+          name: event.detail.name
+        });
+      });
+      // When the `tree` property is updated, Polymer might add
+      // some object-trees under this. Those child trees need to be initialized.
+      this.addEventListener('child-added', function(event) {
+        var child = event.detail.child;
+        if (child === this) {
+          return;
+        }
+        var index = event.detail.index;
+        if (this.tree[index].value instanceof Array) {
+          child.tree = this.tree[index].value;
+          var pathCopy = copyArray(this.path);
+          pathCopy.push(index);
+          child.path = pathCopy;
+        }
+        event.stopPropagation();
+      });
+      // When this message is heard, it destroys a child of itself.
+      this.addEventListener('child-collapsed', function(event) {
+        var index = event.detail.index;
+        // Empty the child tree.
+        this.tree[index].value.length = 0;
+        event.stopPropagation();
+      });
+    },
+    /**
+     * Called when Polymer instantiates this object tree because of
+     * data-binding (with template repeat)
+     */
+    domReady: function() {
+      var that = this;
+      this.fire('child-added', {
+        child: that,
+        index: that.id.substring(5)
+      });
+    },
+    /**
+     * Collapse/Uncollapse
+     */
+    toggle: function(event) {
+      var targetId = event.target.id;
+      var state = event.target.getAttribute('state');
+      if (state === 'expanded') {
+        this.fire('child-collapsed', {
+          index: targetId.substring(3)
+        });
+      }
+      var path = copyArray(this.path);
+      path.push(targetId.substring(3));
+      var eventName = (state === 'collapsed') ? 'object-expand' : 'object-collapse';
+      this.fire(eventName, {
+        path: path
+      });
+    },
+    /**
+     * Called when the refresh button is clicked on an accessor
+     */
+    refreshField: function(event) {
+      var targetIndex = event.target.id.substring(7);
+      var path = copyArray(this.path);
+      path.push(targetIndex);
+      var that = this;
+      this.fire('refresh-property', {
+        path: path,
+        index: targetIndex,
+        tree: that.tree,
+        name: event.target.getAttribute('data-name')
+      });
+    }
+  });
+})();
diff --git a/elements/split-pane/split-pane.html b/elements/split-pane/split-pane.html
new file mode 100644
index 0000000..bb22acc
--- /dev/null
+++ b/elements/split-pane/split-pane.html
@@ -0,0 +1,36 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<!--Creates a double pane with a splitter in between-->
+
+<link rel="import" href="../../bower_components/core-splitter/core-splitter.html">
+
+<polymer-element name='split-pane'>
+  <template>
+    <style>
+      #content {
+        display: flex;
+        flex-direction: row;
+        overflow: auto;
+      }
+      #left {
+        width: 70%;
+        height: 100%;
+        overflow: auto;
+      }
+      #right {
+        height: 100%;
+        overflow: auto;
+        flex: 1;
+      }
+    </style>
+    <div horizontal layout id='content'>
+      <div id='left'>
+        <content select='.split-pane-left'></content>
+      </div>
+      <core-splitter allowOverflow='true'></core-splitter>
+      <div id='right'>
+        <content select='.split-pane-right'></content>
+      </div>
+    </div>
+  </template>
+  <script src='split-pane.js'></script>
+</polymer-element>
diff --git a/elements/split-pane/split-pane.js b/elements/split-pane/split-pane.js
new file mode 100644
index 0000000..ea46928
--- /dev/null
+++ b/elements/split-pane/split-pane.js
@@ -0,0 +1,22 @@
+(function() {
+  Polymer('split-pane', {
+    // TODO: Remove this unless it is decided to re-write core-splitter.
+    /*resizePanels: function (event) {
+      var newX = event.offsetX + this.$.left.offsetWidth;
+      var totalWidth = this.$.content.offsetWidth;
+      this.$.left.style.width = (newX / totalWidth * 100) + '%';
+    },*/
+    get leftScrollTop() {
+      return this.$.left.scrollTop;
+    },
+    set leftScrollTop(pixels) {
+      this.$.left.scrollTop = pixels;
+    },
+    get rightScrollTop() {
+      return this.$.right.scrollTop;
+    },
+    set rightScrollTop(pixels) {
+      this.$.right.scrollTop = pixels;
+    }
+  });
+})();
diff --git a/evalHelper.js b/evalHelper.js
new file mode 100644
index 0000000..2b462a5
--- /dev/null
+++ b/evalHelper.js
@@ -0,0 +1,155 @@
+/**
+ * A helper object to help `eval` code in host page
+ */
+function createEvalHelper(callback) {
+  // The extension's ID serves as the namespace.
+  var extensionNamespace = chrome.runtime.id;
+  /**
+   * Converts any object to a string
+   */
+  function serialize(object) {
+    return JSON.stringify(object);
+  }
+  var srcURLID = 0;
+  /**
+   * gets a unique src URL.
+   */
+  function getSrcURL(string) {
+    srcURLID++;
+    return '\n//@ sourceURL=src' + srcURLID + '.js';
+  }
+  /**
+   * Wraps a function into a self executing function that gets called with the
+   * unique namespace (extension ID) so that the function to be defined in the
+   * host page gets to know of the namespace and also gets defined in the same
+   * namespace.
+   * @param  {String} fnName   name of the function
+   * @param  {String} fnString body of the function
+   * @return {String}          the wrapped function string
+   */
+  function wrapFunction(fnName, fnString) {
+    return '(function (NAMESPACE) {' +
+      'window["' + extensionNamespace + '"].' + fnName + ' = ' +
+      fnString + ';' +
+      '})("' + extensionNamespace + '");';
+  }
+  var helper = {
+    /**
+     * Define a function
+     * @param {String}   name   Name of the function
+     * @param {String}   string Body of the function
+     * @param {Function} callback Function to be called after definion of function
+     */
+    defineFunction: function(name, string, callback) {
+      chrome.devtools.inspectedWindow.eval(wrapFunction(name, string) + getSrcURL(),
+        function(result, error) {
+          callback && callback(result, error);
+        });
+    },
+    /**
+     * Define functions in a batch
+     * @param  {Array}   functionObjects Objects that have `name` and `string` keys
+     * to mean the name and body of the function respectively
+     * @param  {Function} callback        Function called when definitions are done
+     */
+    defineFunctions: function(functionObjects, callback) {
+      var toEval = '';
+      for (var i = 0; i < functionObjects.length; i++) {
+        toEval += wrapFunction(functionObjects[i].name, functionObjects[i].string) + ';\n\n';
+      }
+      toEval += getSrcURL();
+      chrome.devtools.inspectedWindow.eval(toEval, function(result, error) {
+        callback && callback(result, error);
+      });
+    },
+    /**
+     * Execute a function with args and optionally assign the result to something
+     * @param  {String}   name     Name of the function
+     * @param  {Array}    args     An array of arguments
+     * @param  {Function} callback Called when the execution is done
+     * @param  {String}   lhs      Name of the variable to assign result to
+     */
+    executeFunction: function(name, args, callback, lhs) {
+      var params = '(';
+      for (var i = 0; i < args.length - 1; i++) {
+        params += serialize(args[i]) + ', ';
+      }
+      if (args.length > 0) {
+        params += serialize(args[i]);
+      }
+      params += ')';
+      var toEval = (lhs ? ('window["' + extensionNamespace + '"].' + lhs + ' = ') : '') +
+        'window["' + extensionNamespace + '"].' + name + params + ';';
+      toEval += getSrcURL();
+      chrome.devtools.inspectedWindow.eval(toEval, function(result, error) {
+        callback && callback(result, error);
+      });
+    }
+  };
+
+  /**
+   * Does the necessary clean-up to remove all traces of the extension in the page
+   */
+  function cleanUp() {
+    window.removeEventListener('clean-up', window[NAMESPACE].cleanUp);
+    var keys;
+    var i, j, methodNames;
+    // Remove all object observers that were registered
+    keys = Object.keys(window[NAMESPACE].observerCache);
+    for (i = 0; i < keys.length; i++) {
+      window[NAMESPACE].removeObjectObserver(keys[i], [], false);
+    }
+    // Remove all model object observers that were registered
+    keys = Object.keys(window[NAMESPACE].modelObserverCache);
+    for (i = 0; i < keys.length; i++) {
+      window[NAMESPACE].removeObjectObserver(keys[i], [], true);
+    }
+    // Remove any breakpoints that were set
+    keys = Object.keys(window[NAMESPACE].breakPointIndices);
+    for (i = 0; i < keys.length; i++) {
+      methodNames = Object.keys(window[NAMESPACE].breakPointIndices[keys[i]]);
+      for (j = 0; j < methodNames.length; j++) {
+        if (methodNames[i] in window[NAMESPACE].DOMCache[keys[i]]) {
+          undebug(window[NAMESPACE].DOMCache[keys[i]][methodNames[i]]);
+        }
+      }
+    }
+    keys = Object.keys(window[NAMESPACE].DOMCache);
+    for (i = 0; i < keys.length; i++) {
+      // Remove DOM mutation observers
+      if (keys[i] in window[NAMESPACE].mutationObserverCache) {
+        window[NAMESPACE].mutationObserverCache[keys[i]].disconnect();
+      }
+      // Remove the key property that we had added to all DOM objects
+      delete window[NAMESPACE].DOMCache[keys[i]].__keyPolymer__;
+    }
+    // Unhighlight any selected element
+    if (window[NAMESPACE].lastSelectedKey) {
+      window[NAMESPACE].unhighlight(window[NAMESPACE].lastSelectedKey, false);
+    }
+    // TODO: Unhighlight hovered elements too
+    delete window[NAMESPACE];
+  }
+  // Wait till the namespace is created and clean-up handler is created.
+  chrome.devtools.inspectedWindow.eval('window["' + extensionNamespace + '"] = {};',
+    function(result, error) {
+      // Define cleanUp
+      helper.defineFunction('cleanUp', cleanUp.toString(), function(result, error) {
+        if (error) {
+          throw error;
+        }
+        // Add an event listener that removes itself
+        chrome.devtools.inspectedWindow.eval('window.addEventListener("clean-up", ' +
+          'window["' + extensionNamespace + '"].cleanUp);',
+          function(result, error) {
+            if (error) {
+              throw error;
+            }
+            // We are ready to let helper be used
+            callback(helper);
+          }
+        );
+      });
+    }
+  );
+}
diff --git a/hostPageHelpers.js b/hostPageHelpers.js
new file mode 100644
index 0000000..29853fb
--- /dev/null
+++ b/hostPageHelpers.js
@@ -0,0 +1,919 @@
+// All these helpers are meant to be injected into the host page as strings
+// after .toString().
+// E.g, to define `highlight` a function which takes `NAMESPACE`
+// as an argument and has a `window[<namspace>] = <highlight-function-string>;`
+// in its body is self-executed in the context of the host page.
+//
+// If you add a new function, and wish for it to be exposed, you will also need
+// to add it to `createPageView()` in `panel-orig.js`.
+
+/**
+ * Reloads the page.
+ */
+function reloadPage () {
+  window.location.reload();
+}
+
+/**
+ * Used to check if the page is fresh (untouched by the extension).
+ * If it is defined in the page, then it won't raise an error. The page is considered unfresh.
+ * If it goes through, the page is fresh.
+ * (This is dummy function.)
+ * @return {String}
+ */
+function isPageFresh() {
+  return true;
+}
+
+/**
+ * Adds the extension ID to the event name so its unique.
+ * @param  {String} name name of event
+ * @return {String}      new event name
+ */
+function getNamespacedEventName(name) {
+  return NAMESPACE + '-' + name;
+}
+
+/**
+ * Creates/updates an overlay at `rect`. Will replace the previous overlay at
+ * `Overlays[index]` if it exists.
+ * @param {!ClientRect} rect  rectangle to display a highlight over.
+ * @param {Number}      index index of `Overlays` to reuse/set.
+ */
+function renderOverlay(rect, index) {
+  var overlay = window[NAMESPACE].overlays[index];
+  if (!overlay) {
+    overlay = window[NAMESPACE].overlays[index] = document.createElement('div');
+    document.body.appendChild(overlay);
+
+    overlay.style.position        = 'absolute';
+    overlay.style.backgroundColor = 'rgba(255, 64, 129, 0.5)';
+    overlay.style.pointerEvents   = 'none';
+    overlay.style.zIndex          = 2147483647; // Infinity is not valid.
+  }
+
+  overlay.style.left       = (rect.left + window.scrollX) + 'px';
+  overlay.style.top        = (rect.top  + window.scrollY) + 'px';
+  overlay.style.height     = rect.height + 'px';
+  overlay.style.width      = rect.width  + 'px';
+  overlay.style.visibility = 'visible';
+}
+
+/**
+ * Hides overlays at minIndex and above.
+ * @param {Number} minIndex minimum index to hide at.
+ */
+function hideOverlays(minIndex) {
+  var overlays = window[NAMESPACE].overlays;
+  for (var i = overlays.length - 1; i >= minIndex; i--) {
+    overlays[i].style.visibility = 'hidden';
+  }
+}
+
+/**
+ * Highlights an element in the page.
+ * @param  {Number} key Key of the element to highlight
+ */
+function highlight(key) {
+  var element = window[NAMESPACE].DOMCache[key];
+  if (window[NAMESPACE].highlightedElement == element) return;
+  window[NAMESPACE].highlightedElement = element;
+
+  var rects = element.getClientRects();
+  for (var i = 0, rect; rect = rects[i]; i++) {
+    window[NAMESPACE].renderOverlay(rect, i);
+  }
+  // And mop up any extras.
+  window[NAMESPACE].hideOverlays(rects.length);
+}
+
+/**
+ * Unhighlights an element in the page.
+ * @param  {Number} key Key of the element in the page
+ */
+function unhighlight(key) {
+  var element = window[NAMESPACE].DOMCache[key];
+  if (window[NAMESPACE].highlightedElement == element) {
+    window[NAMESPACE].highlightedElement = null;
+    window[NAMESPACE].hideOverlays(0);
+  }
+}
+
+/**
+ * Scrolls an element into view.
+ * @param  {Number} key key of the element in the page
+ */
+function scrollIntoView(key) {
+  if (key in window[NAMESPACE].DOMCache) {
+    window[NAMESPACE].DOMCache[key].scrollIntoView();
+  }
+}
+
+/**
+ * Sets a breakpoint on a method of an element.
+ * @param {Number} key  Key of the element
+ * @param {Array}  path path to find the method in the element
+ */
+function setBreakpoint(key, path) {
+  var method = window[NAMESPACE].resolveObject(key, path);
+  var methodName = window[NAMESPACE].getPropPath(key, path).pop();
+  if (typeof method !== 'function') {
+    return;
+  }
+  if (!(key in window[NAMESPACE].breakPointIndices)) {
+    window[NAMESPACE].breakPointIndices[key] = {};
+  }
+  window[NAMESPACE].breakPointIndices[key][methodName] = true;
+  debug(method);
+}
+
+/**
+ * Clears a breakpoint on a method of an element.
+ * @param  {Number} key  Key of the element
+ * @param  {Array}  path path to find the method in the element
+ */
+function clearBreakpoint(key, path) {
+  var method = window[NAMESPACE].resolveObject(key, path);
+  var methodName = window[NAMESPACE].getPropPath(key, path).pop();
+  if (typeof method !== 'function') {
+    return;
+  }
+  if ((key in window[NAMESPACE].breakPointIndices) &&
+    (methodName in window[NAMESPACE].breakPointIndices[key])) {
+    delete window[NAMESPACE].breakPointIndices[key][methodName];
+  }
+  undebug(method);
+}
+
+/**
+ * Returns a string property path from an index property path (which is used by the UI).
+ * @param  {Number}  key     Key of the element
+ * @param  {Array}   path    index property path
+ * @param  {Boolean} isModel if the object is from the model-tree
+ * @return {Array}           The string property path (array of property names)
+ */
+function getPropPath(key, path, isModel) {
+  var propPath = [];
+  var indexMap = isModel ? window[NAMESPACE].modelIndexToPropMap[key] :
+    window[NAMESPACE].indexToPropMap[key];
+  path.forEach(function(el) {
+    indexMap = indexMap[el];
+    propPath.push(indexMap.__name__);
+  });
+  return propPath;
+}
+
+/**
+ * Finds an object given an element's key and a path to reach the object.
+ * @param  {Number}  key     Key of the element.
+ * @param  {Array}   path    The index path to find the object.
+ * @param  {Boolean} isModel If the object is to be looked under the model of the element.
+ * @return {<T>}             The object that was found.
+ * @template T
+ */
+function resolveObject(key, path, isModel) {
+  var obj = isModel ? window[NAMESPACE].DOMModelCache[key] :
+    window[NAMESPACE].DOMCache[key];
+  var propPath = window[NAMESPACE].getPropPath(key, path, isModel);
+  propPath.forEach(function(el) {
+    obj = obj[el];
+  });
+  return obj;
+}
+
+/**
+ * Changes a property of an element in the page.
+ * @param  {Number}  key      Key of the element
+ * @param  {Array}   path     index path to find the element
+ * @param  {<T>}     newValue the new value to put
+ * @param  {Boolean} isModel  if it is a model object
+ * @template T
+ */
+function changeProperty(key, path, newValue, isModel) {
+  var prop = window[NAMESPACE].getPropPath(key, path, isModel).pop();
+  path.pop();
+  var obj = window[NAMESPACE].resolveObject(key, path, isModel);
+  if (obj) {
+    obj[prop] = newValue;
+  }
+}
+
+/**
+ * Gets a property of an element.
+ * @param  {Number}  key     Key of the element
+ * @param  {Array}   path    Index path to find the property
+ * @param  {Boolean} isModel if it is a model object
+ * @return {Object}          A wrapped JSON object containing the latest value
+ */
+function getProperty(key, path, isModel) {
+  var prop = window[NAMESPACE].getPropPath(key, path, isModel).pop();
+  path.pop();
+  var obj = window[NAMESPACE].resolveObject(key, path, isModel);
+  return window[NAMESPACE].JSONizer.JSONizeProperty(prop, obj);
+}
+
+/**
+ * Adds an element to DOMCache and DOMModelCache.
+ * @param {HTMLElement} obj the element to cache
+ * @param {Number}      key The key to identify it with
+ */
+function addToCache(obj, key) {
+  if (obj.tagName === 'TEMPLATE' && obj.model) {
+    window[NAMESPACE].DOMModelCache[key] = obj.model;
+  } else if (obj.templateInstance) {
+    window[NAMESPACE].DOMModelCache[key] = obj.templateInstance.model;
+  }
+  window[NAMESPACE].DOMCache[key] = obj;
+}
+
+/**
+ * Used as a listener to inspector selection changes.
+ */
+function inspectorSelectionChangeListener() {
+  if ($0.__keyPolymer__) {
+    window.dispatchEvent(new CustomEvent(window[NAMESPACE].getNamespacedEventName('inspected-element-changed'), {
+      detail: {
+        key: $0.__keyPolymer__
+      }
+    }));
+  }
+}
+
+/**
+ * Goes deep into indexMap to find the subIndexMap that stores information about
+ * the object found by traversing through `path`.
+ * @param  {Number}  key     Key of the element
+ * @param  {Array}   path    The index path to traverse with
+ * @param  {Boolean} isModel if it is a model object
+ * @return {Object}          Sub index-map
+ */
+function getIndexMapObject(key, path, isModel) {
+  var start = isModel ? window[NAMESPACE].modelIndexToPropMap[key] :
+    window[NAMESPACE].indexToPropMap[key];
+  for (var i = 0; i < path.length; i++) {
+    start = start[path[i]];
+  }
+  return start;
+}
+
+/**
+ * Adds a new property to a sub-index map. It creates a mapping between a property
+ * name and its associated index (as managed by the extension UI) and also a reverse
+ * mapping. Note: 'name-' is prepended to the property name key.
+ * @param {Object} indexMap sub-Index map
+ * @param {String} propName Property name
+ */
+function addToSubIndexMap(indexMap, propName) {
+  indexMap.__lastIndex__ = '__lastIndex__' in indexMap ? (indexMap.__lastIndex__ + 1) : 0;
+  indexMap[indexMap.__lastIndex__] = {
+    __name__: propName
+  };
+  indexMap['name-' + propName] = indexMap.__lastIndex__;
+}
+
+/**
+ * Removes a property from a sub index map.
+ * @param  {Object} indexMap The sub-index map
+ * @param  {Number} index    The index to remove the property of
+ */
+function removeFromSubIndexMap(indexMap, index) {
+  var propName = indexMap[index].__name__;
+  for (var i = index + 1; i <= indexMap.__lastIndex__; i++) {
+    indexMap[i - 1] = indexMap[i];
+  }
+  delete indexMap['name-' + propName];
+  delete indexMap[indexMap.__lastIndex__--];
+}
+
+/**
+ * Empties a sub-index map.
+ * @param  {Number}  key     Key of the element
+ * @param  {Array}   path    index array to find the sub-index map
+ * @param  {Boolean} isModel if we have to look in the model index map
+ */
+function emptySubIndexMap(key, path, isModel) {
+  // Find the sub-index map
+  var indexMap = isModel ? window[NAMESPACE].modelIndexToPropMap :
+    window[NAMESPACE].indexToPropMap;
+  var start = indexMap[key];
+  var lastIndex = path.pop();
+  if (!lastIndex) {
+    indexMap[key] = {};
+    indexMap[key].__lastIndex__ = -1;
+    return;
+  }
+  for (var i = 0; i < path.length; i++) {
+    start = start[path[i]];
+  }
+  var name = start[lastIndex].__name__;
+  start[lastIndex] = {
+    __name__: name
+  };
+  start[lastIndex].__lastIndex__ = -1;
+}
+
+/**
+ * Tells if an element is a Polymer element
+ * @param  {HTMLElement}     element the element we want to check
+ * @return {Boolean}                  whether it is a Polymer element
+ */
+function isPolymerElement(element) {
+  return element && ('element' in element) && (element.element.localName === 'polymer-element');
+}
+
+/**
+ * Tells if an element is a custom element.
+ * @param  {HTMLElement}  el The element to check.
+ * @return {Boolean}         whether it is a custom element.
+ */
+function isCustomElement(el) {
+  return el.localName.indexOf('-') !== -1 || el.getAttribute('is');
+}
+
+/**
+ * Tells if a custom element is unregistered
+ * @param  {HTMLElement}  el The element to check.
+ * @return {Boolean}         whether it is unregistered or not.
+ */
+function isUnregisteredCustomElement(el) {
+  return window[NAMESPACE].isCustomElement(el) && el.constructor === HTMLElement;
+}
+
+/**
+ * Warns about an unregistered custom element.
+ * @param  {HTMLElement}  el The element to check.
+ */
+function warnUnregisteredCustomElement(el) {
+  console.log('%cThis custom element isn\'t registered: ', 'color: red; font-size: 13px;');
+  console.log(el);
+}
+
+/**
+ * A property filter
+ * @param  {String} prop A property name
+ * @return {Boolean}     Whether it is to be kept or not.
+ */
+function filterProperty(prop) {
+  return prop[0] !== '_' && prop.slice(-1) !== '_' && !filterProperty.blacklist[prop];
+}
+
+// IMPORTANT: First set filterProperty and then call setBlacklist.
+// See :
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+// and
+// https://developer.mozilla.org/en-US/docs/Web/API/Element
+// TODO: Improve blacklist
+/**
+ * Sets the static blacklist property on `filterProperty`
+ */
+function setBlacklist() {
+  window[NAMESPACE].filterProperty.blacklist = {
+    accessKey: true,
+    align: true,
+    attributes: true,
+    baseURI: true,
+    childElementCount: true,
+    childNodes: true,
+    children: true,
+    classList: true,
+    className: true,
+    clientHeight: true,
+    clientLeft: true,
+    clientTop: true,
+    clientWidth: true,
+    contentEditable: true,
+    dataset: true,
+    dir: true,
+    draggable: true,
+    firstChild: true,
+    firstElementChild: true,
+    hidden: true,
+    id: true,
+    innerHTML: true,
+    innerText: true,
+    inputMethodContext: true,
+    isContentEditable: true,
+    lang: true,
+    lastChild: true,
+    lastElementChild: true,
+    localName: true,
+    namespaceURI: true,
+    nextElementSibling: true,
+    nextSibling: true,
+    nodeName: true,
+    nodeType: true,
+    nodeValue: true,
+    offsetHeight: true,
+    offsetLeft: true,
+    offsetParent: true,
+    offsetTop: true,
+    offsetWidth: true,
+    onabort: true,
+    onbeforecopy: true,
+    onbeforecut: true,
+    onbeforepaste: true,
+    onblur: true,
+    oncancel: true,
+    oncanplay: true,
+    oncanplaythrough: true,
+    onchange: true,
+    onclick: true,
+    onclose: true,
+    oncontextmenu: true,
+    oncopy: true,
+    oncuechange: true,
+    oncut: true,
+    ondblclick: true,
+    ondrag: true,
+    ondragend: true,
+    ondragenter: true,
+    ondragleave: true,
+    ondragover: true,
+    ondragstart: true,
+    ondrop: true,
+    ondurationchange: true,
+    onemptied: true,
+    onended: true,
+    onerror: true,
+    onfocus: true,
+    oninput: true,
+    oninvalid: true,
+    onkeydown: true,
+    onkeypress: true,
+    onkeyup: true,
+    onload: true,
+    onloadeddata: true,
+    onloadedmetadata: true,
+    onloadstart: true,
+    onmousedown: true,
+    onmouseenter: true,
+    onmouseleave: true,
+    onmousemove: true,
+    onmouseout: true,
+    onmouseover: true,
+    onmouseup: true,
+    onmousewheel: true,
+    onpaste: true,
+    onpause: true,
+    onplay: true,
+    onplaying: true,
+    onprogress: true,
+    onratechange: true,
+    onreset: true,
+    onresize: true,
+    onscroll: true,
+    onsearch: true,
+    onseeked: true,
+    onseeking: true,
+    onselect: true,
+    onselectstart: true,
+    onshow: true,
+    onstalled: true,
+    onsubmit: true,
+    onsuspend: true,
+    ontimeupdate: true,
+    onvolumechange: true,
+    onwaiting: true,
+    onwebkitfullscreenchange: true,
+    onwebkitfullscreenerror: true,
+    onwheel: true,
+    outerHTML: true,
+    outerText: true,
+    ownerDocument: true,
+    parentElement: true,
+    parentNode: true,
+    prefix: true,
+    previousElementSibling: true,
+    previousSibling: true,
+    scrollHeight: true,
+    scrollLeft: true,
+    scrollTop: true,
+    scrollWidth: true,
+    shadowRoot: true,
+    spellcheck: true,
+    style: true,
+    tabIndex: true,
+    tagName: true,
+    textContent: true,
+    title: true,
+    translate: true,
+    webkitShadowRoot: true,
+    webkitdropzone: true,
+    resolvePath: true,
+
+    shadowRoots: true,
+    $: true,
+    controller: true,
+    eventDelegates: true,
+    reflect: true,
+
+    onautocomplete: true,
+    onautocompleteerror: true,
+    ontoggle: true,
+    hasBeenAttached: true,
+    element: true
+  };
+}
+
+/**
+ * Processes a list of DOM mutations given by mutation observers and for each
+ * mutation, creates a JSONized object for the element that got affected.
+ * @param  {Array} mutations Array of mutations
+ * @return {Array}           List of JSON objects each representing a changed element.
+ */
+function processMutations(mutations) {
+  var changedElementKeys = {};
+  var changedElements = [];
+  for (var i = 0; i < mutations.length; i++) {
+    var mutation = mutations[i];
+    if (mutation.type !== 'childList') {
+      // We are interested only in childList mutations
+      continue;
+    }
+    var changedElement = mutation.target;
+    if (changedElement.host) {
+      changedElement = changedElement.host;
+    }
+    if (changedElement.__keyPolymer__ in changedElementKeys) {
+      continue;
+    }
+    // We should ideally remove all the removed nodes from `DOMCache` but it
+    // would involve finding all children of a removed node (recursively through the
+    // composed DOM). So we let them be.
+    changedElements.push(window[NAMESPACE].getDOMJSON(changedElement));
+    changedElementKeys[changedElement.__keyPolymer__] = true;
+  }
+  return changedElements;
+}
+
+/**
+ * Returns JSON representation for a DOM element
+ * @param  {Object} el An element
+ * @return {Object}    A JSON representation of the element
+ */
+function getDOMJSON(el) {
+  return {
+    'data': window[NAMESPACE].JSONizer.JSONizeDOMObject(el || document.body,
+      function(domNode, converted, isLightDOM) {
+        if (!domNode.__keyPolymer__) {
+          if (isLightDOM) {
+            // Something that wasn't found in the composed tree but found in the light DOM
+            // was probably not rendered.
+            converted.unRendered = true;
+          } else if ((window[NAMESPACE].isPolymerElement(domNode) && !domNode.shadowRoot)) {
+            // Polymer elements may not have shadow roots. So, the composed DOM tree is the light DOM tree
+            // and has nothing do with the shadow DOM.
+            converted.noShadowRoot = true;
+          }
+          // For every element found during traversal, we store it in a hash-table with a unique key.
+          window[NAMESPACE].lastDOMKey++;
+          var key = window[NAMESPACE].lastDOMKey;
+          window[NAMESPACE].addToCache(domNode, key);
+          // Also make a map to store the actual property names to the indices corresponding to the names
+          // before passing it to the caller.
+          window[NAMESPACE].indexToPropMap[key] = {};
+          window[NAMESPACE].modelIndexToPropMap[key] = {};
+          domNode.__keyPolymer__ = key;
+
+          // DOM mutation listeners are added to the very first element (the parent) of all elements
+          // so that it will report all light DOM changes and to *all* shadow roots so they will
+          // report all shadow DOM changes.
+          if (key === window[NAMESPACE].firstDOMKey || domNode.shadowRoot) {
+            var observer = new MutationObserver(function(mutations) {
+              window.dispatchEvent(new CustomEvent(window[NAMESPACE].getNamespacedEventName('dom-mutation'), {
+                detail: window[NAMESPACE].processMutations(mutations)
+              }));
+            });
+            window[NAMESPACE].mutationObserverCache[key] = observer;
+            var config = {
+              childList: true,
+              subtree: true
+            };
+            if (key === window[NAMESPACE].firstDOMKey) {
+              observer.observe(domNode, config);
+            }
+            if (domNode.shadowRoot) {
+              observer.observe(domNode.shadowRoot, config);
+            }
+          }
+          // Warn about unregistered custom elements.
+          if (window[NAMESPACE].isUnregisteredCustomElement(domNode)) {
+            window[NAMESPACE].warnUnregisteredCustomElement(domNode);
+          }
+        }
+        converted.key = domNode.__keyPolymer__;
+        var isPolymer = window[NAMESPACE].isPolymerElement(domNode);
+        if (domNode.parentNode) {
+          // Set the parent node key.
+          // The || is because <a> elements have a 'host' property which is a string.
+          if (domNode.parentNode.host && typeof domNode.parentNode.host === 'object') {
+            converted.parentKey = domNode.parentNode.host.__keyPolymer__;
+          } else {
+            converted.parentKey = domNode.parentNode.__keyPolymer__;
+          }
+        }
+        // conditionally set the properties
+        if (isPolymer) {
+          converted.isPolymer = true;
+          converted.sourceURL = domNode.element.ownerDocument.URL;
+        }
+      }
+    )
+  };
+}
+
+/**
+ * Returns a JSON representation for an object
+ * @param  {Number}  key     The key of the element to which the object belongs
+ * @param  {Array}   path    Path to reach the object from the element's top level
+ * @param  {Boolean} isModel If the object is a model object
+ * @return {Object}          A JSON object representation
+ */
+function getObjectJSON(key, path, isModel) {
+  var obj = window[NAMESPACE].resolveObject(key, path, isModel);
+  if (!obj) {
+    return {
+      'data': JSON.stringify({
+        value: []
+      })
+    };
+  }
+  var indexMap = window[NAMESPACE].getIndexMapObject(key, path, isModel);
+  var filter = null;
+  if (path.length === 0) {
+    filter = function(prop) {
+      return prop !== '__keyPolymer__';
+    };
+  }
+  if (window[NAMESPACE].isPolymerElement(obj)) {
+    filter = function(prop) {
+      return window[NAMESPACE].filterProperty(prop) && prop !== '__keyPolymer__';
+    };
+  }
+  return {
+    'data': window[NAMESPACE].JSONizer.
+    JSONizeObject(obj, function(converted) {
+        var propList = converted.value;
+        for (var i = 0; i < propList.length; i++) {
+          if (!isModel) {
+            if (path.length === 0 && (key in window[NAMESPACE].breakPointIndices) &&
+              (propList[i].name in window[NAMESPACE].breakPointIndices[key])) {
+              converted.value[i].setBreakpoint = true;
+            }
+          }
+          var propName = propList[i].name;
+          // Must associate each index to the corresponding property name.
+          window[NAMESPACE].addToSubIndexMap(indexMap, propName, isModel);
+        }
+      },
+      filter)
+  };
+}
+
+/**
+ * Adds an object observer to an object
+ * @param {Number}  key     Key of the element to which the object belongs
+ * @param {Array}   path    Path to reach the object from the element's top level
+ * @param {Boolean} isModel If the object is a model object
+ */
+function addObjectObserver(key, path, isModel) {
+  /**
+   * Checks if a property is a present in the higher proto levels of the object
+   * @param  {String} prop The property we are looking at
+   * @param  {Object} obj  The object that owns the property
+   * @return {Boolean}     If it is present somewhere above.
+   */
+  function checkChainUpForProp(prop, obj) {
+    var proto = obj.__proto__;
+    while (proto) {
+      if (proto.hasOwnProperty(prop)) {
+        return true;
+      }
+      proto = proto.__proto__;
+    }
+    return false;
+  }
+  /**
+   * Checks if a property is present in lower proto levels of an object
+   * @param  {String} prop     The property
+   * @param  {Object} protoObj The level below which we are looking
+   * @param  {Object} obj      The starting level to look from
+   * @return {Boolean}         If it was found.
+   */
+  function checkChainDownForProp(prop, protoObj, obj) {
+    var proto = obj;
+    while (proto !== protoObj && proto) {
+      if (proto.hasOwnProperty(prop)) {
+        return true;
+      }
+      proto = proto.__proto__;
+    }
+    return false;
+  }
+  var obj = window[NAMESPACE].resolveObject(key, path, isModel);
+  if (!obj) {
+    // This is because an element may not have a `model` and we just ignore it.
+    // No observer can be added
+    return;
+  }
+  var indexMap = window[NAMESPACE].getIndexMapObject(key, path, isModel);
+
+  /**
+   * Processes O.o() changes
+   * @param  {Array} changes Array of changes given by O.o()
+   * @return {Object}         Looks like:
+   * {
+   *   path: <path of the object>,
+   *   key: <DOM element's key>,
+   *   changes: [
+   *     {
+   *       index: <the index by which the UI knows about the property>,
+   *       name: <the property's name>,
+   *       type: <the type of change (see O.o() docs),
+   *       object: <the changed object at the property, wrapped in another object>
+   *     },
+   *     // one of every change
+   *   ]
+   * }
+   */
+  function processChanges(changes) {
+    var processedChangeObject = {
+      isModel: isModel,
+      path: path,
+      key: key,
+      changes: []
+    };
+    for (var i = 0; i < changes.length; i++) {
+      var change = changes[i];
+      var summary = {
+        index: indexMap['name-' + change.name],
+        type: change.type,
+        name: change.name
+      };
+      if (change.object !== obj) {
+        if (checkChainDownForProp(change.name, change.obj, obj)) {
+          continue;
+        }
+      }
+      switch (change.type) {
+        case 'update':
+          // We've chosen to ignore certain Polymer properties which may have gotten updated
+          if (window[NAMESPACE].isPolymerElement(obj) &&
+            !window[NAMESPACE].filterProperty(change.name)) {
+            continue;
+          }
+          // We might be dealing with non-Objects which DOMJSONizer can't JSONize.
+          // So we wrap it and then let the caller unwrap later.
+          var wrappedObject = {
+            value: change.object[change.name]
+          };
+          summary.object = window[NAMESPACE].JSONizer.
+          JSONizeObject(wrappedObject);
+          break;
+        case 'delete':
+          if (checkChainUpForProp(change.name, obj)) {
+            // Though it is a deletion at one level, the same property also exists
+            // in a higher prototype object, so this is an update in the view of the UI
+            // This applies only to Polymer elements because of how multiple prototype levels are traversed
+            // only for Polymer elements.
+            summary.type = 'update';
+            var wrappedObject = {
+              value: change.object[change.name]
+            };
+            summary.object = window[NAMESPACE].JSONizer.
+            JSONizeObject(wrappedObject);
+          } else {
+            // Update the index-to-propName map to reflect the deletion
+            window[NAMESPACE].removeFromSubIndexMap(indexMap, indexMap['name-' + change.name], isModel);
+          }
+          break;
+        case 'add':
+          if (window[NAMESPACE].isPolymerElement(obj) &&
+            !window[NAMESPACE].filterProperty(change.name)) {
+            continue;
+          }
+          var wrappedObject = {
+            value: change.object[change.name]
+          };
+          summary.object = window[NAMESPACE].JSONizer.
+          JSONizeObject(wrappedObject);
+          if (window[NAMESPACE].isPolymerElement(obj) &&
+            checkChainUpForProp(change.name, obj)) {
+            // Even though this is an addition at one level, this is an update in the view of the UI
+            // because another property of the same name is already shown.
+            // This applies only to Polymer elements because of how multiple prototype levels are traversed
+            // only for Polymer elements.
+            summary.type = 'update';
+          } else {
+            window[NAMESPACE].addToSubIndexMap(indexMap, change.name, isModel);
+          }
+          break;
+      }
+      processedChangeObject.changes.push(summary);
+    }
+    return processedChangeObject;
+  }
+
+  function observer(changes) {
+    window.dispatchEvent(new CustomEvent(window[NAMESPACE].getNamespacedEventName('object-changed'), {
+      detail: processChanges(changes)
+    }));
+  }
+  Object.observe(obj, observer);
+
+  var proto = obj.__proto__;
+  while (proto && !Polymer.isBase(proto)) {
+    Object.observe(proto, observer);
+    proto = proto.__proto__;
+  }
+  var observerCache = isModel ? window[NAMESPACE].modelObserverCache :
+    window[NAMESPACE].observerCache;
+  // Store the observer function so that we can unobserve when we need to.
+  if (!observerCache[key]) {
+    observerCache[key] = {};
+  }
+  var hashLocation = observerCache[key];
+  for (var i = 0; i < path.length; i++) {
+    if (!hashLocation[path[i]]) {
+      hashLocation[path[i]] = {};
+    }
+    hashLocation = hashLocation[path[i]];
+  }
+  hashLocation['__objectObserver__'] = observer;
+}
+
+/**
+ * removes an object observer
+ * @param  {Number}  key     Key of the element that owns the object
+ * @param  {Array}   path    Path to reach the object
+ * @param  {Boolean} isModel If the object is a model object
+ */
+function removeObjectObserver(key, path, isModel) {
+  function recursiveUnobserve(obj, hashLocation, indexMap) {
+    if (hashLocation['__objectObserver__']) {
+      Object.unobserve(obj, hashLocation['__objectObserver__']);
+      if (window[NAMESPACE].isPolymerElement(obj)) {
+        // Polymer objects have listeners on multiple proto levels
+        var proto = obj.__proto__;
+        while (proto && !Polymer.isBase(proto)) {
+          Object.unobserve(proto, hashLocation['__objectObserver__']);
+          proto = proto.__proto__;
+        }
+      }
+      var props = Object.keys(hashLocation);
+      for (var i = 0; i < props.length; i++) {
+        if (props[i] === '__objectObserver__') {
+          continue;
+        }
+        recursiveUnobserve(obj[indexMap[props[i]].__name__], hashLocation[props[i]], indexMap[props[i]]);
+      }
+    }
+  }
+  var obj = window[NAMESPACE].resolveObject(key, path, isModel);
+  if (!obj) {
+    // This is because an element may not have a `model` and we just ignore it.
+    // No observer can be added
+    return;
+  }
+  var parent = isModel ? window[NAMESPACE].modelObserverCache :
+    window[NAMESPACE].observerCache;
+  var hashLocation = parent[key];
+  var indexMap = isModel ? window[NAMESPACE].modelIndexToPropMap[key] :
+    window[NAMESPACE].indexToPropMap[key];
+  for (var i = 0; i < path.length; i++) {
+    parent = hashLocation;
+    hashLocation = hashLocation[path[i]];
+    indexMap = indexMap[path[i]];
+  }
+  // All objects under this have to be unobserved
+  recursiveUnobserve(obj, hashLocation, indexMap);
+  delete parent[path.length === 0 ? key : path[path.length - 1]];
+}
+
+/**
+ * Creates all the data-structures needed by the extension to maintain a consitent image
+ * of the page.
+ */
+function createCache() {
+  // All DOM elements discovered are hashed by a unique key
+  window[NAMESPACE].DOMCache = {};
+  // A similar map is maintained for the models associated with the DOM objects
+  window[NAMESPACE].DOMModelCache = {};
+  // O.o() observers are hashed so they can be removed when needed
+  window[NAMESPACE].observerCache = {};
+  window[NAMESPACE].modelObserverCache = {};
+  window[NAMESPACE].breakPointIndices = {};
+  // indexToPropMap maps indices to property names
+  // The UI maintains properties as an array (to keep them ordered). To keep an
+  // association with real object properties and those, we need a map.
+  window[NAMESPACE].indexToPropMap = {};
+  window[NAMESPACE].modelIndexToPropMap = {};
+  window[NAMESPACE].firstDOMKey = 1;
+  // The key of the last DOM element added
+  window[NAMESPACE].lastDOMKey = window[NAMESPACE].firstDOMKey - 1;
+  // Mutation observers are stored so they can be removed later
+  window[NAMESPACE].mutationObserverCache = {};
+  window[NAMESPACE].JSONizer = new window[NAMESPACE].DOMJSONizer();
+  // All active overlays
+  window[NAMESPACE].overlays = [];
+}
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..923a21c
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name" : "Polymer debugging extension",
+  "version" : "1.1",
+  "description" : "Helps debug Polymer apps.",
+  "background" : {
+    "scripts": ["background.js"]
+  },
+  "devtools_page": "devtools.html",
+  "permissions": ["<all_urls>", "webNavigation"],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "manifest_version": 2,
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["perfContentScript.js"],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..4f9f1d4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "polymer-debugging-extension",
+  "version": "1.0.0",
+  "devDependencies": {
+  }
+}
diff --git a/panel-orig.html b/panel-orig.html
new file mode 100644
index 0000000..21b80e5
--- /dev/null
+++ b/panel-orig.html
@@ -0,0 +1,127 @@
+<html>
+  <head>
+    <script src="bower_components/platform/platform.js"></script>
+    <script src="DOMJSONizer.js"></script>
+    <script src="hostPageHelpers.js"></script>
+    <script src="evalHelper.js"></script>
+    <script src="panel-orig.js"></script>
+    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
+    <link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
+    <link rel="import" href="elements/core-pages/core-pages.html">
+    <link rel="import" href="elements/split-pane/split-pane.html">
+    <link rel="import" href="elements/element-tree/element-tree.html">
+    <link rel="import" href="elements/object-tree/object-tree.html">
+    <link rel="import" href="elements/method-list/method-list.html">
+    <link rel="import" href="elements/bread-crumbs/bread-crumbs.html">
+    <style>
+      #objectTreePagesContainer {
+        margin-left: 10px;
+        margin-top: 10px;
+      }
+      paper-tab {
+        margin: 1px;
+        border: 1px solid rgb(230, 240, 177);
+      }
+      paper-tabs {
+        background-color: rgba(239, 245, 255, 0.63);
+        width: 97%;
+        height: 30px;
+        color: rgb(47, 150, 141);
+      }
+      paper-tabs::shadow #selectionBar {
+        background-color: rgba(14, 177, 228, 0.83);
+      }
+      #localViewToggle {
+        -webkit-border-radius: 5px 5px 5px 5px;
+        border: 1px solid #C7E4ED;
+        display: inline-block;
+        padding: 3px;
+      }
+      #localViewToggle > span {
+        margin: 5px;
+        color: rgb(57, 139, 19);
+        -webkit-user-select: none;
+        cursor: default;
+      }
+      paper-toggle-button {
+        vertical-align: middle
+      }
+      paper-toggle-button::shadow paper-radio-button::shadow #ink {
+        color: white;
+      }
+      paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
+        color: white;
+      }
+      .breadCrumbsContainer {
+        margin-left: 10px;
+        margin-top: 4px;
+        margin-bottom: 4px;
+      }
+      .loading {
+        font-size: 14px;
+        color: rgb(39, 112, 39);
+        display: none;
+      }
+      #reloadPage {
+        background: #DFE9E6;
+        color: rgb(87, 89, 92);
+        font-size: 12px;
+        float: right;
+      }
+      #reloadPage::shadow #ripple {
+        color: #2a56c6;
+      }
+      #controlContainer {
+        margin: 10px;
+        width: 96%;
+      }
+    </style>
+  </head>
+  <body unresolved>
+    <split-pane>
+      <div class='split-pane-left'>
+        <div id='controlContainer'>
+          <div id='localViewToggle'>
+            <span>Composed DOM</span>
+            <paper-toggle-button id='toggleButton'></paper-toggle-button>
+            <span>Local DOM</span>
+          </div>
+          <paper-button id='reloadPage' label='Reload page'></paper-button>
+        </div>
+        <div>
+          <core-pages id='elementTreePages' selected='0'>
+            <div>
+              <div id='composedTreeLoadingBar' class='loading'>
+                Loading... Please wait
+              </div>
+              <element-tree id='composedDOMTree'></element-tree>
+            </div>
+            <div>
+              <div id='localDOMTreeLoadingBar' class='loading'>
+                Loading... Please wait
+              </div>
+              <div class='breadCrumbsContainer'>
+                <bread-crumbs></bread-crumbs>
+              </div>
+              <element-tree id='localDOMTree'></element-tree>
+            </div>
+          </core-pages>
+        </div>
+      </div>
+      <div class='split-pane-right'>
+        <paper-tabs id='tabs' selected='0' noink>
+          <paper-tab>Properties</paper-tab>
+          <paper-tab>Model</paper-tab>
+          <paper-tab>Breakpoints</paper-tab>
+        </paper-tabs>
+        <div id='objectTreePagesContainer'>
+          <core-pages id='objectTreePages' selected='0'>
+            <object-tree id='main-tree'></object-tree>
+            <object-tree id='model-tree'></object-tree>
+            <method-list></method-list>
+          </core-pages>
+        </div>
+      </div>
+    </split-pane>
+  </body>
+</html>
diff --git a/panel-orig.js b/panel-orig.js
new file mode 100644
index 0000000..2c8568a
--- /dev/null
+++ b/panel-orig.js
@@ -0,0 +1,897 @@
+(function() {
+  // elementTree is the tree used for viewing composed DOM.
+  // It is initialized once and its branches are kept up-to-date as necessary.
+  var elementTree;
+
+  // localDOMTree is the tree used for viewing local DOM contents
+  var localDOMTree;
+
+  // Object-tree is the object tree in the right pane.
+  var objectTree;
+
+  // The bread crumbs that are shown in the local DOM view
+  var breadCrumbs;
+
+  // For breakpoints
+  var methodList;
+
+  var splitPane;
+
+  // Loading bars
+  var composedTreeLoadingBar;
+  var localDOMTreeLoadingBar;
+
+  // For injecting code into the host page
+  var EvalHelper;
+
+  // Last scroll position of the element tree.
+  var elementTreeScrollTop;
+
+  // localDOMMode is true when we're viewing the local DOM element tree
+  var localDOMMode = false;
+
+  // deepView is true when the local DOM tree is showing the shadow DOM contents,
+  // false when showing the light DOM contents
+  var deepView = false;
+
+  // If the page had DOM mutations while the tree was being rendered, we need
+  // to account for those later.
+  var pendingDOMMutations = [];
+
+  // If the page has a pending refresh while the tree was being rendered.
+  var pendingRefresh = false;
+
+  // isTreeLoading is set to true when the tree is being loaded (upon init or
+  // DOM mutations)
+  var isTreeLoading = false;
+
+  /**
+   * Called when the panel has to re-init itself upon host page reload/change.
+   */
+  function createPageView() {
+
+    // Even though this is to be set only when a tree is loading, during the first
+    // page view creation, by the time the initialization stuff is done in the page's
+    // context, we don't want DOM mutations doing stuff.
+    isTreeLoading = true;
+    pendingRefresh = false;
+    // Create an EvalHelper object that will help us interact with host page
+    // via `eval` calls.
+    createEvalHelper(function(helper) {
+      EvalHelper = helper;
+      // Make all the definitions in the host page
+      EvalHelper.defineFunctions([{
+        name: 'highlight',
+        string: highlight.toString()
+      }, {
+        name: 'unhighlight',
+        string: unhighlight.toString()
+      }, {
+        name: 'scrollIntoView',
+        string: scrollIntoView.toString()
+      }, {
+        name: 'changeProperty',
+        string: changeProperty.toString()
+      }, {
+        name: 'getProperty',
+        string: getProperty.toString()
+      }, {
+        name: 'resolveObject',
+        string: resolveObject.toString()
+      }, {
+        name: 'addObjectObserver',
+        string: addObjectObserver.toString()
+      }, {
+        name: 'removeObjectObserver',
+        string: removeObjectObserver.toString()
+      }, {
+        name: 'createCache',
+        string: createCache.toString()
+      }, {
+        name: 'addToCache',
+        string: addToCache.toString()
+      }, {
+        name: 'getPropPath',
+        string: getPropPath.toString()
+      }, {
+        name: 'getIndexMapObject',
+        string: getIndexMapObject.toString()
+      }, {
+        name: 'addToSubIndexMap',
+        string: addToSubIndexMap.toString()
+      }, {
+        name: 'emptySubIndexMap',
+        string: emptySubIndexMap.toString()
+      }, {
+        name: 'removeFromSubIndexMap',
+        string: removeFromSubIndexMap.toString()
+      }, {
+        name: 'DOMJSONizer',
+        string: DOMJSONizer.toString()
+      }, {
+        name: 'getObjectJSON',
+        string: getObjectJSON.toString()
+      }, {
+        name: 'getDOMJSON',
+        string: getDOMJSON.toString()
+      }, {
+        name: 'setBreakpoint',
+        string: setBreakpoint.toString()
+      }, {
+        name: 'clearBreakpoint',
+        string: clearBreakpoint.toString()
+      }, {
+        name: 'filterProperty',
+        string: filterProperty.toString()
+      }, {
+        name: 'setBlacklist',
+        string: setBlacklist.toString()
+      }, {
+        name: 'isPolymerElement',
+        string: isPolymerElement.toString()
+      }, {
+        name: 'processMutations',
+        string: processMutations.toString()
+      }, {
+        name: 'inspectorSelectionChangeListener',
+        string: inspectorSelectionChangeListener.toString()
+      }, {
+        name: 'getNamespacedEventName',
+        string: getNamespacedEventName.toString()
+      }, {
+        name: 'isPageFresh',
+        string: isPageFresh.toString()
+      }, {
+        name: 'reloadPage',
+        string: reloadPage.toString()
+      }, {
+        name: 'renderOverlay',
+        string: renderOverlay.toString()
+      }, {
+        name: 'hideOverlays',
+        string: hideOverlays.toString()
+      }, {
+        name: 'isCustomElement',
+        string: isCustomElement.toString()
+      }, {
+        name: 'isUnregisteredCustomElement',
+        string: isUnregisteredCustomElement.toString()
+      }, {
+        name: 'warnUnregisteredCustomElement',
+        string: warnUnregisteredCustomElement.toString()
+      }], function(result, error) {
+        // Set the blacklist static property on `filterProperty`
+        EvalHelper.executeFunction('setBlacklist', [], function(result, error) {
+          if (error) {
+            throw error;
+          }
+          EvalHelper.executeFunction('createCache', [], function(result, error) {
+            if (error) {
+              throw error;
+            }
+            EvalHelper.executeFunction('getDOMJSON', [], function(result, error) {
+              if (error) {
+                throw error;
+              }
+              // Reset object-trees and bread-crumbs
+              objectTree.tree.length = 0;
+              modelTree.tree.length = 0;
+              breadCrumbs.list.length = 0;
+              // Load element-trees
+              var DOM = result.data;
+              console.log('loading composed DOM tree');
+              // Load the composed DOM tree
+              doTreeLoad(function() {
+                elementTree.initFromDOMTree(DOM, true);
+              });
+              console.log('loading local DOM tree');
+              // Load the local DOM tree
+              initLocalDOMTree(localDOMTree, DOM);
+              breadCrumbs.list.push({
+                name: DOM.tagName,
+                key: DOM.key
+              });
+              doPendingActions();
+            });
+          });
+        });
+      });
+    });
+  }
+
+  /**
+   * Called when panel is opened or page is refreshed.
+   */
+  function init() {
+    elementTree = document.querySelector('element-tree#composedDOMTree');
+    localDOMTree = document.querySelector('element-tree#localDOMTree');
+
+    // objectTree shows the properties of a selected element in the tree
+    objectTree = document.querySelector('object-tree#main-tree');
+
+    // modelTree shows the model behind a seleccted element (if any)
+    modelTree = document.querySelector('object-tree#model-tree');
+
+    // methodList is the list of methods of the selected element. It is used
+    // to add breakpoints
+    methodList = document.querySelector('method-list');
+
+    splitPane = document.querySelector('split-pane');
+    breadCrumbs = document.querySelector('bread-crumbs');
+    breadCrumbs.list = [];
+
+    composedTreeLoadingBar = document.querySelector('#composedTreeLoadingBar');
+    localDOMTreeLoadingBar = document.querySelector('#localDOMTreeLoadingBar');
+
+    // tabs is a reference to the paper-tabs that is used to change the object-tree
+    // shown in view
+    var tabs = document.querySelector('#tabs');
+    var objectTreePages = document.querySelector('#objectTreePages');
+    tabs.addEventListener('core-select', function(event) {
+      objectTreePages.selected = tabs.selected;
+    });
+
+    // toggleButton is an instance of paper-toggle-button used to switch between
+    // composed DOM and local DOM views
+    var toggleButton = document.querySelector('#toggleButton');
+    var elementTreePages = document.querySelector('#elementTreePages');
+    toggleButton.addEventListener('change', function(event) {
+      // Unselect whatever is selected in whichever element-tree
+      unSelectInTree();
+      splitPane.leftScrollTop = elementTreeScrollTop;
+      elementTreePages.selected = toggleButton.checked ? 1 : 0;
+      localDOMMode = toggleButton.checked;
+    });
+
+    // When the reload button is clicked.
+    document.querySelector('#reloadPage').addEventListener('click', function (event) {
+      EvalHelper.executeFunction('reloadPage', function (result, error) {
+        if (error) {
+          throw error;
+        }
+      });
+    });
+    createPageView();
+  }
+
+  /**
+   * Sets the loading state and loading sign while the tree is rendered and
+   * resets them back when done.
+   * @param  {Function} callback       called when loading state is set
+   * @param  {Boolean}  isLocalDOMTree if it is the local DOM tree that is being rendered
+   */
+  function doTreeLoad(callback, isLocalDOMTree) {
+    isTreeLoading = true;
+    var loadingBar = isLocalDOMTree ? localDOMTreeLoadingBar : composedTreeLoadingBar;
+    var tree = isLocalDOMTree ? localDOMTree : elementTree;
+    loadingBar.style.display = 'block';
+    tree.style.display = 'none';
+    if (isLocalDOMTree) {
+      breadCrumbs.style.display = 'none';
+    }
+    callback();
+    loadingBar.style.display = 'none';
+    tree.style.display = 'block';
+    if (isLocalDOMTree) {
+      breadCrumbs.style.display = 'block';
+    }
+    isTreeLoading = false;
+  }
+
+  /**
+   * Initializes the element tree in the local DOM view with the DOM tree supplied.
+   * It checks `deepView` and decides how to display the DOM tree (i.e., light DOM or shadow DOM).
+   * @param  {Object} tree either localDOMTree or a sub-tree of it to be rendered.
+   * @param  {Object} DOM  The DOM object or part of it extracted from the page.
+   */
+  function initLocalDOMTree(tree, DOM) {
+    doTreeLoad(function() {
+      if (!deepView) {
+        // DOM tree is to be shown as light DOM tree
+        if (tree === localDOMTree) {
+          tree.initFromDOMTree(DOM.lightDOMTree, true);
+        } else {
+          tree.initFromDOMTree(DOM.lightDOMTree, true, localDOMTree);
+        }
+      } else if (tree === localDOMTree) {
+        // We are trying to set the entire tree here.
+        // It is done this way:
+        // 1. First level of children are from the composed DOM
+        // 2. After that all children of first level children are from light DOM
+        var treeRoot = {
+          tagName: DOM.tagName,
+          key: DOM.key,
+          children: [],
+          isPolymer: DOM.isPolymer
+        };
+        tree.initFromDOMTree(treeRoot, false);
+        tree.tree = DOM;
+        if (!DOM.noShadowRoot) {
+          // if the tree object didn't contain this flag it would have meant that this element
+          // doesn't have a shadow root and shouldn't have a shadow DOM view
+          var childTree;
+          for (var i = 0; i < DOM.children.length; i++) {
+            childTree = new ElementTree();
+            childTree.initFromDOMTree(DOM.children[i].lightDOMTree, true, localDOMTree);
+            tree.addChild(childTree);
+          }
+        }
+      } else {
+        // called when DOM mutations happen and we need update just one part of the tree
+        tree.initFromDOMTree(DOM.lightDOMTree, true);
+      }
+    }, true);
+  }
+
+  /**
+   * Gets the currently selected element's key in whichever view
+   * @return {Number} The key
+   */
+  function getCurrentElementTreeKey() {
+    if (localDOMMode) {
+      return localDOMTree.selectedChild ? localDOMTree.selectedChild.key : null;
+    }
+    return elementTree.selectedChild ? elementTree.selectedChild.key : null;
+  }
+
+  /**
+   * Gets the currently focused element tree
+   * @return {ElementTree} Either the composed DOM tree or localDOMTree
+   */
+  function getCurrentElementTree() {
+    if (localDOMMode) {
+      return localDOMTree;
+    }
+    return elementTree;
+  }
+
+  /**
+   * Unselect the selected element in whichever tree
+   */
+  function unSelectInTree() {
+    var selectedKey = getCurrentElementTreeKey();
+    if (selectedKey) {
+      var childTree = getCurrentElementTree().selectedChild;
+      childTree.toggleSelection();
+    }
+  }
+
+  /**
+   * Switch to local DOM view if we're not in it
+   */
+  function switchToLocalDOMView() {
+    if (localDOMMode) {
+      return;
+    }
+    unSelectInTree();
+    elementTreeScrollTop = splitPane.leftScrollTop;
+    localDOMMode = true;
+    toggleButton.checked = true;
+    splitPane.rightScrollTop = 0;
+  }
+
+  /**
+   * Zoom out local DOM view to a key in the bread-crumbs.
+   * @param {Object} newTree Object representing the JSON tree object we need to
+   * zoom out till.
+   */
+  function zoomOutLocalDOMView(newTree) {
+    if (!localDOMMode) {
+      return;
+    }
+    unSelectInTree();
+    deepView = false;
+    // Remove last few crumbs from bread-crumbs until we hit key.
+    while (breadCrumbs.list[breadCrumbs.list.length - 1].key !== newTree.key) {
+      breadCrumbs.list.pop();
+    }
+    initLocalDOMTree(localDOMTree, newTree);
+    doPendingActions();
+  }
+
+  /**
+   * elementTree has references to all rendered elements. So if someother
+   * part of the code wants a reference to a DOM element we can just get it from
+   * elementTree. It is an alternative to a separate hash table which would have
+   * needed another complete tree traversal.
+   * @param  {Number}      key The key of the DOM element
+   * @return {HTMLElement}     The element corresponding to key.
+   */
+  function getDOMTreeForKey(key) {
+    var childTree = elementTree.getChildTreeForKey(key);
+    return childTree ? childTree.tree : null;
+  }
+
+  /**
+   * Highlight an element in the page
+   * @param  {Number key The key of the element to be highlighted
+   */
+  function highlightElement(key) {
+    EvalHelper.executeFunction('highlight', [key], function(result, error) {
+      if (error) {
+        throw error;
+      }
+    });
+  }
+
+  /**
+   * Unhighlight a highlighted element in the page
+   * @param  {Number} key Key of the element to be unhighlighted
+   */
+  function unhighlightElement(key) {
+    EvalHelper.executeFunction('unhighlight', [key], function(result, error) {
+      if (error) {
+        throw error;
+      }
+    });
+  }
+
+  /**
+   * Expands an object in either of the object-trees and adds O.o() listeners.
+   * @param  {Number}  key     Key of the element whose object is to be expanded.
+   * @param  {Array}   path    An array representing the path to find the expansion point.
+   * @param  {Boolean} isModel If it is the model-tree we're trying to expand.
+   */
+  function expandObject(key, path, isModel) {
+    EvalHelper.executeFunction('getObjectJSON', [key, path, isModel], function(result, error) {
+      if (error) {
+        throw error;
+      }
+      var props = result.data.value;
+      var childTree = isModel ? modelTree.tree : objectTree.tree;
+      for (var i = 0; i < path.length; i++) {
+        childTree = childTree[path[i]].value;
+      }
+      childTree.push.apply(childTree, props);
+      if (!isModel && path.length === 0) {
+        methodList.list = objectTree.tree;
+      }
+      EvalHelper.executeFunction('addObjectObserver', [key, path, isModel], function(result, error) {
+        if (error) {
+          throw error;
+        }
+      });
+    });
+  }
+
+  /**
+   * Selects an element = expands Object-tree and highlights in page
+   * @param  {Number} key Key of element to expand.
+   */
+  function selectElement(key) {
+    // When an element is selected, we try to open both the main and model trees
+    expandObject(key, [], false);
+    expandObject(key, [], true);
+    // Scroll the element into view when selected.
+    EvalHelper.executeFunction('scrollIntoView', [key], function(result, error) {
+      if (error) {
+        throw error;
+      }
+    });
+  }
+
+  /**
+   * Unselects an element = removes O.o() listeners and empties index map.
+   * @param  {Number}   key      Key of the unselected element.
+   * @param  {Function} callback Called when everything is done.
+   */
+  function unselectElement(key, callback) {
+    function removeObject(isModel, callback) {
+      EvalHelper.executeFunction('removeObjectObserver', [key, [], isModel], function(result, error) {
+        if (error) {
+          throw error;
+        }
+        EvalHelper.executeFunction('emptySubIndexMap', [key, [], isModel], function(result, error) {
+          if (error) {
+            throw error;
+          }
+          // Empty the object/model tree
+          if (!isModel) {
+            objectTree.tree.length = 0;
+          } else {
+            modelTree.tree.length = 0;
+          }
+
+          callback && callback();
+        });
+      });
+    }
+    // First remove everything associated with the actual object
+    removeObject(false, function() {
+      // Then remove everything associated with the model
+      removeObject(true, callback);
+    });
+  }
+
+  /**
+   * Refresh an accessor property.
+   * @param  {Number}      key       Key of the element concerned.
+   * @param  {ObjectTree}  childTree The sub-object-tree where this property is rendered.
+   * @param  {Array}       path      Path to find the property.
+   * @param  {Boolean}     isModel   If the property belongs to the model-tree.
+   */
+  function refreshProperty(key, childTree, path, isModel) {
+    var index = path[path.length - 1];
+    EvalHelper.executeFunction('getProperty', [key, path, isModel], function(result, error) {
+      var newObj = result.value[0];
+      childTree[index] = newObj;
+    });
+  }
+
+  /**
+   * Tells if an element is a child of another.
+   * @param  {Number}  childKey     Key of the child element.
+   * @param  {Number}  parentKey    Key of the supposed parent element.
+   * @return {Boolean}              Whether it is a child actually.
+   */
+  function isChildOf(childKey, parentKey) {
+    var childTree = getDOMTreeForKey(childKey);
+    if (!childTree) {
+      throw 'No child tree with that key';
+    }
+    var nextParentKey;
+    // Iterate up parent key links until we reach the top or we find that it is
+    // parentKey.
+    do {
+      nextParentKey = childTree.parentKey;
+      if (nextParentKey === parentKey) {
+        return true;
+      }
+      childTree = getDOMTreeForKey(nextParentKey);
+    } while (childTree && childTree.parentKey);
+    return false;
+  }
+
+  /**
+   * Processes DOM mutations. i.e., updates trees with pending DOM mutations.
+   */
+  function addMutations() {
+    var mutations = pendingDOMMutations.slice(0);
+    pendingDOMMutations.length = 0;
+    for (var i = 0; i < mutations.length; i++) {
+      var newElement = mutations[i].data;
+      var key = newElement.key;
+      var childElementTree = elementTree.getChildTreeForKey(key);
+      var childLocalDOMTree = localDOMTree.getChildTreeForKey(key);
+
+      function resetTree() {
+        if (childLocalDOMTree) {
+          // The element to be refreshed is there in the local DOM tree.
+          initLocalDOMTree(childLocalDOMTree, newElement);
+        } else if (isChildOf(localDOMTree.key, key)) {
+          // The root of local DOM tree is a child of the element being
+          // re-rendered due to DOM mutation. So it will be inconsistent to continue showing it.
+          // We zoom out to the point where it is consistent.
+          zoomOutLocalDOMView(newElement);
+        }
+        // elementTree has all composed DOM elements. A DOM mutation will might need
+        // an update there
+        if (childElementTree) {
+          doTreeLoad(function() {
+            childElementTree.initFromDOMTree(newElement, true, elementTree);
+          });
+        }
+      }
+      if ((childElementTree && childElementTree.selected) ||
+        (childLocalDOMTree && childLocalDOMTree.selected)) {
+        // The selected element and the one to be refreshed are the same.
+        unselectElement(key, resetTree);
+      } else {
+        resetTree();
+      }
+    }
+    doPendingActions();
+  }
+
+  /**
+   * Do pending stuff (page reloads or DOM mutations) that happened while trees were
+   * being rendered.
+   */
+  function doPendingActions() {
+    if (pendingRefresh) {
+      createPageView();
+    } else if (pendingDOMMutations.length > 0) {
+      addMutations();
+    }
+  }
+  // When the panel is opened
+  window.addEventListener('polymer-ready', function() {
+    init();
+
+    // When an element in the element-tree is selected
+    window.addEventListener('selected', function(event) {
+      var key = event.detail.key;
+      if (event.detail.oldKey) {
+        unselectElement(event.detail.oldKey, function() {
+          selectElement(key);
+        });
+      } else {
+        selectElement(key);
+      }
+    });
+
+    // When an element in the element-tree is unselected
+    window.addEventListener('unselected', function(event) {
+      var key = event.detail.key;
+      unselectElement(key);
+    });
+
+    // When a property in the object-tree changes
+    window.addEventListener('property-changed', function(event) {
+      var newValue = event.detail.value;
+      var path = event.detail.path;
+      var key = getCurrentElementTreeKey();
+      var childTree = event.detail.tree;
+      var isModel = (event.target.id === 'model-tree');
+      // Reflect a change in property in the host page
+      EvalHelper.executeFunction('changeProperty', [key, path, newValue, isModel],
+        function(result, error) {
+          if (error) {
+            throw error;
+          }
+          if (event.detail.reEval) {
+            // The property requires a re-eval because it is accessor
+            // and O.o() won't update it.
+            refreshProperty(key, childTree, path, isModel);
+          }
+        }
+      );
+    });
+
+    // When the refresh button is clicked in the object-trees.
+    window.addEventListener('refresh-property', function(event) {
+      var key = getCurrentElementTreeKey();
+      var childTree = event.detail.tree;
+      var path = event.detail.path;
+      var isModel = (event.target.id === 'model-tree');
+      refreshProperty(key, childTree, path, isModel);
+    });
+
+    // When an object is expanded.
+    window.addEventListener('object-expand', function(event) {
+      var isModel = (event.target.id === 'model-tree');
+      var key = getCurrentElementTreeKey();
+      expandObject(key, event.detail.path, isModel);
+    });
+
+    // An object has been collapsed. We must remove the object observer
+    // and empty the index-propName map in the host page for this object
+    window.addEventListener('object-collapse', function(event) {
+      var key = getCurrentElementTreeKey();
+      var path = event.detail.path;
+      var isModel = (event.target.id === 'model-tree');
+      EvalHelper.executeFunction('removeObjectObserver', [key, path, isModel], function(result, error) {
+        if (error) {
+          throw error;
+        }
+        EvalHelper.executeFunction('emptySubIndexMap', [key, path, isModel], function(result, error) {
+          if (error) {
+            throw error;
+          }
+        });
+      });
+    });
+
+    // When a breakpoint is added/removed.
+    window.addEventListener('breakpoint-toggle', function(event) {
+      var key = getCurrentElementTreeKey();
+      var index = event.detail.index;
+      var functionName = event.detail.isSet ? 'setBreakpoint' : 'clearBreakpoint';
+      EvalHelper.executeFunction(functionName, [key, [index]], function(result, error) {
+        if (error) {
+          throw error;
+        }
+      });
+    });
+
+    // Happens when an element is hovered over
+    window.addEventListener('highlight', function(event) {
+      highlightElement(event.detail.key);
+    });
+
+    // Happens when an element is hovered out
+    window.addEventListener('unhighlight', function(event) {
+      unhighlightElement(event.detail.key);
+    });
+
+    // Happens when an element is to be magnified,
+    // i.e., either seen in the local DOM view or if already in the
+    // local DOM view, to see the shadow content of it.
+    window.addEventListener('magnify', function(event) {
+      var key = event.detail.key;
+      var childTree = getCurrentElementTree().getChildTreeForKey(key);
+      if (!localDOMMode) {
+        var DOMTree = getDOMTreeForKey(key);
+        unSelectInTree();
+        deepView = false;
+        breadCrumbsList = [];
+        var parentDOMTree = DOMTree;
+        // Iterate through parents until we reach the root to show bread-crumbs for
+        // each parent.
+        do {
+          breadCrumbsList.push({
+            name: parentDOMTree.tagName,
+            key: parentDOMTree.key
+          });
+          parentDOMTree = getDOMTreeForKey(parentDOMTree.parentKey);
+        } while (parentDOMTree);
+
+        breadCrumbsList.reverse();
+        breadCrumbs.list = breadCrumbsList;
+        initLocalDOMTree(localDOMTree, DOMTree);
+        switchToLocalDOMView();
+      } else {
+        deepView = true;
+        var DOMTree = getDOMTreeForKey(key);
+        unSelectInTree();
+        // If the last bread crumb is not the one representing what we want in the
+        // local DOM view (this means it is not just a peek into the shadow DOM from light DOM)
+        if (breadCrumbs.list[breadCrumbs.list.length - 1].key !== DOMTree.key) {
+          breadCrumbs.list.push({
+            name: DOMTree.tagName,
+            key: DOMTree.key
+          });
+        }
+        initLocalDOMTree(localDOMTree, DOMTree);
+      }
+      doPendingActions();
+    });
+
+    // When an element in the local DOM view is to be 'unmagnified',
+    // i.e., its light DOM is to be seen.
+    window.addEventListener('unmagnify', function(event) {
+      // Only possible inside local DOM view and when in deepView
+      var key = event.detail.key;
+      var childTree = getCurrentElementTree().getChildTreeForKey(key);
+      deepView = false;
+      var DOMTree = childTree.tree;
+      unSelectInTree();
+      initLocalDOMTree(localDOMTree, DOMTree);
+      doPendingActions();
+    });
+
+    // When a bread crumb click happens we may need to focus something else in
+    // tree
+    window.addEventListener('bread-crumb-click', function(event) {
+      unSelectInTree();
+      var key = event.detail.key;
+      var DOMTree = getDOMTreeForKey(key);
+      deepView = false;
+      initLocalDOMTree(localDOMTree, DOMTree);
+      doPendingActions();
+    });
+
+    // When a Polymer element's definition is to be viewed.
+    window.addEventListener('view-source', function(event) {
+      var key = event.detail.key;
+      var DOMTree = getDOMTreeForKey(key);
+      var sourceURL = DOMTree.sourceURL;
+      // TODO: Is there any way to find the exact line and column of definition of
+      // a Polymer element?
+      chrome.devtools.panels.openResource(sourceURL, 1, 1);
+    });
+
+    var backgroundPageConnection = chrome.runtime.connect({
+      name: 'panel'
+    });
+    // All these messages come from the background page and not from the UI of the extension.
+    backgroundPageConnection.onMessage.addListener(function(message, sender, sendResponse) {
+      switch (message.name) {
+        case 'check-page-fresh':
+          // The page's location has changed. This doesn't necessarily mean that
+          // the page itself got reloaded. So we try to execute a function which is supposed
+          // to be defined if the page is not fresh. If it fails, then the page is fresh.
+          EvalHelper.executeFunction('isPageFresh', [], function(result, error) {
+            if (error) {
+              // The page is fresh.
+              // Check if this is a Polymer page.
+              chrome.devtools.inspectedWindow.eval('Polymer', function (result, error) {
+                // Boolean(error) tells if this was a Polymer page.
+                // Let the background page know so it can spawn the content script.
+                // Expect a 'refresh' message after that.
+                backgroundPageConnection.postMessage({
+                  name: 'fresh-page',
+                  tabId: chrome.devtools.inspectedWindow.tabId,
+                  isPolymerPage: Boolean(error)
+                });
+              });
+            }
+          });
+          break;
+        case 'refresh':
+          // No use processing DOM mutations of older page.
+          pendingDOMMutations.length = 0;
+          // This happens when the page actually got reloaded.
+          if (isTreeLoading) {
+            // We don't want to trigger another init process starting if the extension UI
+            // is still trying to get set up. We just mark it so it can processed afterwards.
+            pendingRefresh = true;
+          } else {
+            createPageView();
+          }
+          break;
+        case 'object-changed':
+          // An object has changed. Must update the object-trees
+
+          // The list of changes
+          var changeObj = message.changeList;
+          // The path where the change happened
+          var path = changeObj.path;
+          var changes = changeObj.changes;
+          var isModel = changeObj.isModel;
+          for (var i = 0; i < changes.length; i++) {
+            var change = changes[i];
+            var type = change.type;
+            // Index refers to the index in object-tree corresponding to the property
+            var index = change.index;
+            // Name refers to the actual property name
+            var name = change.name;
+            // This is a wrapped object. `value` contains the actual object.
+            var newObj;
+            var childTree = isModel ? modelTree.tree : objectTree.tree;
+            try {
+              // If the observer reports changes before child-tree is ready, we can
+              // only wait and ignore it
+              for (var j = 0; j < path.length; j++) {
+                childTree = childTree[path[j]].value;
+              }
+            } catch (e) {
+              // TODO: is it okay to do this busy looping until child-tree is ready?
+            }
+            if (type !== 'delete') {
+              newObj = change.object.value[0];
+              newObj.name = name;
+            } else {
+              childTree.splice(index, 1);
+              return;
+            }
+            switch (type) {
+              case 'update':
+                childTree[index] = newObj;
+                break;
+              case 'add':
+                childTree.push(newObj);
+                break;
+            }
+          }
+          break;
+        case 'dom-mutation':
+          // A DOM element has changed. Must re-render it in the element tree.
+          var mutations = message.changeList;
+          pendingDOMMutations.push.apply(pendingDOMMutations, mutations);
+          if (!isTreeLoading) {
+            addMutations();
+          }
+          break;
+        case 'inspected-element-changed':
+          if (localDOMMode) {
+            return;
+          }
+          // An element got selected in the inspector, must select in composed DOM tree
+          var childTree = elementTree.getChildTreeForKey(message.key);
+          if (childTree && !childTree.selected) {
+            childTree.toggleSelection();
+            childTree.scrollIntoView();
+          }
+          break;
+      }
+    });
+
+    // Send a message to background page so that the background page can associate panel
+    // to the current host page
+    backgroundPageConnection.postMessage({
+      name: 'panel-init',
+      tabId: chrome.devtools.inspectedWindow.tabId
+    });
+
+    // When an element selection changes in the inspector, we try to update the new pane with
+    // the same element selected
+    chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {
+      EvalHelper.executeFunction('inspectorSelectionChangeListener', [], function(result, error) {
+        if (error) {
+          console.log(error);
+        }
+      });
+    });
+  });
+})();
diff --git a/perfContentScript.js b/perfContentScript.js
new file mode 100644
index 0000000..6c87cf7
--- /dev/null
+++ b/perfContentScript.js
@@ -0,0 +1,28 @@
+// This content script runs on all pages. It can't be conditionally injected because we can't
+// miss out on any events by the time the script gets injected. On the other hand manifest.json allows
+// us to name content scripts to be run at 'document_start' which seemed like the ideal time.
+(function () {
+
+	// Used to style console.log messages.
+	var messageStyle = 'color: blue; font-size: 15px;';
+	var timeStyle = 'color: green; font-size: 13px';
+
+	function getFormattedDate() {
+		var date = new Date();
+		var str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +
+			date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + ':' + date.getMilliseconds();
+		return str;
+	}
+
+	console.log('%cDocument start: ', messageStyle);
+	console.log('%c' + getFormattedDate(), timeStyle);
+
+	// 'polymer-ready' event means that the host page runs a Polymer app and it just got upgraded by Polymer.
+	window.addEventListener('polymer-ready', function() {
+		console.log('%cpolymer-ready:', messageStyle);
+		console.log('%c' + getFormattedDate(), timeStyle);
+		chrome.runtime.sendMessage({
+			name: 'polymer-ready'
+		});
+	});
+})();